本文介绍 Android、iOS、Windows、macOS 客户端通过 webview 接入互动白板的方法。

概要

云信分别提供了互动白板和录像回放的 webview 页面。每个 webview 又额外提供了带虚拟控制台(vconsole)的页面。vconsole 页面在 webview 中挂载一个虚拟的开发者控制台，方便开发者查看开发中遇到的问题。

功能原理

webview 和 Native 客户端消息流如下图所示。

互动白板 webview 和录像回放 webview 均通过 jsBridge 和 Native 客户端交互数据。

webview 向 Native 客户端发送消息：

1. Native 客户端在 webview 注册window.jsBridge.NativeFunction 方法。
2. webview 通过该方法，将消息传递给 Native 客户端处理。

Native 客户端向 webview 发送消息：

1. webview 在页面上注册window.WebJSBridge 方法。(webview已处理，第三方开发者wu xu)
2. Native 客户端通过该方法，将消息传递给 webview 。

部署 webview

1. 下载 webview，具体请参见下载SDK和体验Demo。

2. 在业务服务器上创建 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 互动白板回放的虚拟控制台。

实现方法

1. 客户端为了接收 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;
           }
       }
   }
   

2. 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()));
       }
   }