更新记录

0.1.0(2021-01-21)

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


平台兼容性

Android iOS
适用版本区间:8.0 - 11.0 支持CPU类型:armeabi-v7a,arm64-v8a 适用版本区间:9 - 14

原生插件通用使用流程:

  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. 运行

隐私、权限声明

1. 本插件需要申请的系统权限列表:

读取文件,写入文件

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

此插件需配合插件 ZegoExpress音视频SDK(白板)使用,该插件会采集摄像头、录音数据,详情可参考 https://doc-zh.zego.im/zh/5416.html

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT License

Copyright (c) 2020 ZEGO

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问