更新记录

0.1.0（2021-01-21）

支持涂鸦、文本、直线、矩形、椭圆、橡皮、激光笔等功能 音画同步 实时协作

平台兼容性

原生插件通用使用流程：

1. 购买插件，选择该插件绑定的项目。
2. 在HBuilderX里找到项目，在manifest的app原生插件配置中勾选模块，如需要填写参数则参考插件作者的文档添加。
3. 根据插件作者的提供的文档开发代码，在代码中引用插件，调用插件功能。
4. 打包自定义基座，选择插件，得到自定义基座，然后运行时选择自定义基座，进行log输出测试。
5. 开发完毕后正式云打包

付费原生插件目前不支持离线打包。
Android 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/android
iOS 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/ios

注意事项：使用HBuilderX2.7.14以下版本，如果同一插件且同一appid下购买并绑定了多个包名，提交云打包界面提示包名绑定不一致时，需要在HBuilderX项目中manifest.json->“App原生插件配置”->”云端插件“列表中删除该插件重新选择

ZegoWhiteboardView 互动白板 SDK

即构互动白板服务（ZegoWhiteboard），基于即构亿级海量用户的实时信令网络，提供给用户多人白板互动协同的功能。同一房间的用户，可以在指定的白板画布上进行实时绘制，借助涂鸦、文本、直线、矩形、椭圆、橡皮、激光笔等基础教具，低延迟、高效率地以多种形式交换想法，真正实现轨迹实时同步、音“画”同步。我们以 UI 插件的形式提供了可供全平台集成的 SDK，接入门槛低、抽象程度高。

了解更多使用说明请访问： 快速开始

使用方法

申请 ZEGO AppID

登录 ZEGO 官网 注册账号，根据自身实际业务需求选择场景，获取 AppID 与 AppSign，用于初始化 SDK。

创建uniapp项目

使用uniapp官方IDE HBuilder，创建uni-app类型的项目

获取「ZegoExpress音视频SDK带白板 」uniapp SDK，并引入工程

在uniapp市场获取相应插件，并将插件引入工程

获取 「ZegoWhiteboardView 互动白板 SDK」uniapp SDK，并引入工程

在uniapp市场获取本插件，并将插件引入工程

下载 ZegoWhiteboardView「js封装层」代码，并引入工程

下载地址 http://zego-public.oss-cn-shanghai.aliyuncs.com/edu/whiteboardview/uniapp/zego-whiteboard-uniapp.zip

将以上白板「js封装层」引入到uniapp项目中

下载 ZegoExpress （带白板）的「js封装层」代码，并引入工程

下载地址 http://zego-public.oss-cn-shanghai.aliyuncs.com/edu/whiteboardview/uniapp/zego-whiteboard-uniapp.zip

将以上ZegoExpress （带白板）的「js封装层」引入到uniapp项目中

基础使用

初始化 ZegoExpress SDK

import ZegoExpressEngine from '../../zego-express-video-uniapp/ZegoExpressEngine';

// AppID AppSign 为之前在官网申请的
// false 代表正式环境，true 代表正式环境
// 0 代表通用场景
ZegoExpressEngine.createEngine(AppID, AppSign, false, 0);

注册 ZegoExpress 通知事件

instance.on('roomStateUpdate', result => {
  console.log('From Native roomStateUpdate:' + result);
  if(result['state'] == 0) { //房间断开

  } else if(result['state'] == 1) { //房间连接中

  } else if(result['state'] == 2) { //房间连接成功
        //连接成功后可以开始使用白板的 绘画涂鸦等功能
  }
});

登录房间

var instance = ZegoExpressEngine.getInstance();
// 必须保证 userID 是唯一的
instance.loginRoom("roomID", { userID: "userID", userName: "userName" });

初始化 ZegoWhiteboardView（白板） SDK

import ZegoWhiteboardManager from '../../zego-whiteboard-uniapp/ZegoWhiteboardManager';

ZegoWhiteboardManager.getInstance().init((ret) => {
  if (ret == 0) {
    //白板初始化成功
  }
});

注册 ZegoWhiteboardView 通知事件

ZegoWhiteboardManager.getInstance().on("onWhiteboardAdd", result => {
  //房间内其他用户创建了新的白板
  //收到了此通知时，可以在这里创建视图，展示相应的白板，可参考以下代码：
  /*
  <zego-whiteboard-view :whiteboardModel="model" style="width:500rpx;height:300rpx"></zego-whiteboard-view>
  */
});
ZegoWhiteboardManager.getInstance().on("onWhiteboardRemoved", result => {
    //房间内有用户删除了白板
});

使用白板的基础功能

创建白板

ZegoWhiteboardManager.getInstance().createWhiteboardView(this.whiteboardModelParam, result => {
if (result['errorCode'] == 0) {
        /*
        创建白板成功, 此时需在视图区展示相应的 view , 示例：
        <zego-whiteboard-view v-if="whiteboardModel" ref='mywhiteboardview' :whiteboardModel="whiteboardModel" style="width:900rpx;height:450rpx"></zego-whiteboard-view>
        */
        this.whiteboardModel = result['whiteboardModel'];
} else {
    //创建失败
}

});

涂鸦绘画

• 创建白板成功，并展示在界面上后，用户即可在白板界面上绘画，并且将内容同步到服务器上
• 其他用户收到 “onWhiteboardAdd” 的通知后，需创建相应 view，示例：

  /*
  <zego-whiteboard-view :whiteboardModel="newWhiteboardModel" style="width:500rpx;height:300rpx"></zego-whiteboard-view>
  */

  ZegoWhiteboardManager.getInstance().on("onWhiteboardAdd", result => {
  if (result['whiteboardModel']) {
      this.newWhiteboardModel = result['whiteboardModel'
  }
  });

• 切换为“画笔”工具，注意：画笔工具是默认的工具 ZegoWhiteboardManager.getInstance().setToolType(1);
• 切换为“橡皮檫”工具 ZegoWhiteboardManager.getInstance().setToolType(64);
• 切换为“激光笔”工具 ZegoWhiteboardManager.getInstance().setToolType(128);

更多功能

1、参考示例源码

2、参考 ZegoWhiteboardView 原生 Android 版使用文档 https://doc-zh.zego.im/zh/6208.html

示例源码使用

示例源码下载地址

demo

1. 将 demo导入 HBuilderX，修改 manifest.json 下的 AppID（uniapp的 AppID）
2. 修改 demo 下 ./KeyCenter.js 内的 AppID、AppSign (从 ZEGO 官网获取的)
3. 从应用市场获取「ZegoExpress音视频SDK带白板 」插件 和 ZegoWhiteboardView 互动白板 SDK（即本插件）
4. 使用 uniapp 本地打包/云打包，制定自定义基座
5. 运行