接入webview
更新时间: 2024/07/24 13:59:48
本文介绍 Android、iOS、Windows、macOS 客户端通过 webview 接入互动白板的方法。
概要
云信分别提供了互动白板和录像回放的 webview 页面。每个 webview 又额外提供了带虚拟控制台(vconsole
)的页面。vconsole
页面在 webview 中挂载一个虚拟的开发者控制台,方便开发者查看开发中遇到的问题。
功能原理
webview 和 Native 客户端消息流如下图所示。
互动白板 webview 和录像回放 webview 均通过 jsBridge
和 Native 客户端交互数据。
webview 向 Native 客户端发送消息:
- Native 客户端在 webview 注册
window.jsBridge.NativeFunction
方法。 - webview 通过该方法,将消息传递给 Native 客户端处理。
Native 客户端向 webview 发送消息:
- webview 在页面上注册
window.WebJSBridge
方法。(webview已处理,第三方开发者wu xu) - Native 客户端通过该方法,将消息传递给 webview 。
Windows 和 macOS 客户端推荐使用 Electron 框架接入。若使用 Qt 框架接入,集成音视频播放功能可能存在问题。
部署 webview
-
下载 webview,具体请参见下载SDK和体验Demo。
-
在业务服务器上创建 webview 的项目文件夹,并将解压后的 webview 脚本文件拷贝至文件夹中。
webview 文件夹中的主要页面说明如下:
g2/webview.html
:G2 互动白板的 webview 地址。g2/webview_vconsole.html
:G2 互动白板的虚拟控制台。g2/webview.record.html
:G2 互动白板回放的 webview 地址。g2/webview_vconsole.record.html
:G2 互动白板回放的虚拟控制台。
实现方法
-
客户端为了接收 webview 的数据,需要在
Web
的window
对象上注册NativeFunction
。-
如果客户端无法直接在
window
对象上注册NativeFunction
,可以选择注册在window.jsBridge.NativeFunction
上。 -
如果使用 Flutter 客户端接入互动白板,请将 webview 发送给客户端的消息注册在
window.jsBridge.postMessage
方法上,不要将消息注册在window.jsBridge.NativeFunction
方法上。
java
/** * 安卓接入示例 */ //MainActivity.java webView.addJavascriptInterface(new WebAppInterface(this, webView), "jsBridge"); //WebAppInterface.java public class WebAppInterface { MainActivity mContext; @JavascriptInterface public void NativeFunction(String toast) throws JSONException { JSONObject obj = new JSONObject(toast); String action = obj.getString("action"); JSONObject param = obj.getJSONObject("param"); switch (action) { case "webPageLoaded": login(); break; case "webJoinWBSucceed": enableDraw(); break; case "webLoginIMFailed": case "webJoinWBFailed": case "webCreateWBFailed": case "webLeaveWB": /** * webview已经退出了白板房间,客户端此时应该销毁webview */ destroyWebViewAndExitActivity(); break; case "webGetAuth": sendAuthInfo(); break; } } }
-
-
webview 页面载入后,会在
window
上挂载WebJSBridge
对象。客户端通过WebJSBridge
向 webview 发送消息。传给 webview 的参数为 JSON 字符串。
java
//WebAppInterface.java public class WebAppInterface { MainActivity mContext; webview webView; /** Instantiate the interface and set the context */ WebAppInterface(Context c, webview w) { mContext = (MainActivity)c; webView = w; } private void runJs(final String param) { final String escapedParam = param.replaceAll("\"", "\\\\\""); webView.post(new Runnable() { @Override public void run() { Log.d("native function call js", "javascript:WebJSBridge(\"" + escapedParam + "\")"); webView.loadUrl("javascript:WebJSBridge(\"" + escapedParam + "\")"); } }); } private void enableDraw() throws JSONException { JSONObject jsParam = new JSONObject(); JSONObject param = new JSONObject(); jsParam.put("action", "jsDirectCall"); jsParam.put("param", param); param.put("target", "drawPlugin"); param.put("funcName", "enableDraw"); param.put("arg1", true); runJs((jsParam.toString())); } }