接入webview

更新时间: 2022/09/28 17:38:36

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

概要

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

功能原理

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

webview的架构原理.png

互动白板 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 。

Windows 和 macOS 客户端推荐使用 Electron 框架接入。若使用 Qt 框架接入,集成音视频播放功能可能存在问题。

部署 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 的数据,需要在Webwindow对象上注册NativeFunction

    • 如果客户端无法直接在window对象上注册NativeFunction,可以选择注册在window.jsBridge.NativeFunction上。

    • 如果使用 Flutter 客户端接入互动白板,请将 webview 发送给客户端的消息注册在window.jsBridge.postMessage方法上,不要将消息注册在window.jsBridge.NativeFunction方法上。

    /**
    * 安卓接入示例
    */
    
    //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 字符串。

    //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()));
        }
    }
    
此文档是否对你有帮助?
有帮助
去反馈
  • 概要
  • 功能原理
  • 部署 webview
  • 实现方法