关于直播:视频会议直播中实现Web实时互动白板功能｜Demo分享

超级白板性能概述

即构超级白板（ZegoSuperBoard），基于即构亿级海量用户的实时信令网络，提供残缺的多人实时在线白板互动协同服务，包含：白板涂鸦、实时轨迹同步、文档共享、文件转码、白板录制与回放、白板与实时音视频同步等多种能力，具备灵便易用、扩展性强、形象水平高的特点，实用于在线教育、合作办公、游戏娱乐、金融面签等场景。

即构超级白板 SDK 提供以下外围性能：

超级白板直播 SDK 概念解释

• ZegoExpress-Video SDK：ZEGO 音视频互动 SDK，可能提供超级白板所需的实时信令传输的能力。超级白板 SDK 必须搭配 实时音视频 SDK 应用。
• 超级白板 SDK、ZegoSuperBoard SDK：均指提供 ZEGO 超级白板服务（ZegoSuperBoard）的 SDK。
• ZegoSuperBoardView：在代码实现过程中，开发者用于展现的白板视图。
• ZegoSuperBoardSubView：ZegoSuperBoardView 的子集，开发者理论创立的 View。ZegoSuperBoardView 会主动出现最新创立或通过 switchSuperBoardSubView 指定的 ZegoSuperBoardSubView。
• 纯白板：指定宽、高和页数创立的白板，用户在指定的白板画布上进行实时绘制。
• 文件白板：基于文件创建的白板，白板宽高和页数由文件决定，实现在文件上绘制图元的业务需要。

实现直播白板互动性能的前提条件

• ZegoSuperBoard SDK 须要与 ZegoExpress-Video SDK 搭配应用，请同时集成 ZegoExpress-Video SDK。超级白板 SDK 的压缩包中曾经蕴含 ZegoExpress-Video SDK，无需独自下载。
• 若之前已集成过 ZegoExpress-Video SDK，请降级到最新版本，防止 SDK 版本不匹配造成初始化失败。
• 已在 ZEGO 控制台 创立我的项目，并申请无效的 AppID，详情请参考 控制台 – 项目管理 中的“我的项目信息”。
• 已生成 Token，详情请参考 应用 Token 鉴权。也能够参考 控制台 – 项目管理 中的“我的项目信息”，在 ZEGO 控制台获取长期 Token（有效期为 24 小时）。

白板的文件共享性能不是默认开启的，应用前请在 ZEGO 控制台 自助开明（开明步骤请参考 项目管理 – 服务配置 中的“文件共享”），或分割 ZEGO 技术支持开明。

集成互动白板 SDK 的筹备环境

在开始集成 ZegoSuperBoard SDK 前，请确保开发环境满足以下要求：

• 筹备一台能够连贯到互联网的 Windows 或 macOS 计算机。
• 获取摄像头麦克风等行为需运行在 HTTPS 环境下，集成 SDK 之前，请确保最终我的项目可能运行在 HTTPS 环境下。开发环境下则可先通过本地运行躲避，例如 localhost 或 127.0.0.1。
• 应用在线直播互动白板 SDK 反对的浏览器，目前 超级白板 SDK 反对的浏览器版本如下：

集成 超级白板 SDK

1 下载 在线白板 SDK

从即构官网下载 互动白板 SDK

请参考 下载 SDK 包，下载最新版本的 SDK，下载实现后进行解压。

npm 下载 直播白板互动 SDK

须要别离下载 ZegoSuperBoard SDK 和 ZegoExpress-Video SDK。

npm i zego-superboard-web
npm i zego-express-engine-webrtc

• 超级白板 2.2.0 及之前版本的 SDK 仅适配 ZegoExpress-Video 2.14.0 及之前的 SDK。
• npm 下载包反对 typescript 语言 (举荐)。
• 如果在 macOS 或 Linux 零碎中执行 npm 命令失败，提醒“permission denied”，请在 npm 命令前加上 sudo 从新执行即可。

2 导入互动白板 SDK

从官网下载的 SDK 可应用 script 间接引入，须要别离导入 ZegoSuperBoard SDK 和 ZegoExpress-Video SDK，其中，“x.x.x”为 ZegoExpress-Video SDK 的版本号，请参考上一步压缩包解压后的文件名。

<script src="ZegoSuperBoardManagerWeb.js"></script>
<script src="ZegoExpressWebRTC-x.x.x.js"></script>

npm 下载的 互动白板 SDK 可应用上面的办法导入。

import {ZegoSuperBoardManager} from 'zego-superboard-web';
import {ZegoExpressEngine} from 'zego-express-engine-webrtc'
// 或
const ZegoSuperBoardManager = require('zego-superboard-web').ZegoSuperBoardManager;
var ZegoExpressEngine = require('zego-express-engine-webrtc').ZegoExpressEngine

实现直播互动白板性能

1 初始化 互动白板 SDK

初始化 ZegoExpress-Video SDK

创立 ZegoExpressEngine 引擎实例，将申请到的 AppID 传入参数“appID”，将接入服务器地址传入参数“server”。

“server”为接入服务器地址，获取形式如下：

1. 登录 ZEGO 控制台。
2. 在对应我的项目下单击“查看”。
3. 弹出根本信息后单击“环境配置”下的“查看”按钮。
4. 在弹窗中的“集成的 SDK”中抉择“Express”后，再抉择“Web”平台便可获取对应的接入服务器地址。

// 初始化实例
const zg = new ZegoExpressEngine(appID, server);

初始化 即构超级互动白板 SDK ZegoSuperBoard SDK

1. 应用 ZegoSuperBoardManager 的 getInstance 办法获取 ZegoSuperBoard 实例。
2. 应用 ZegoSuperBoard 实例的 init 办法初始化 ZegoSuperBoard SDK，这里须要传入 ZegoExpressEngine 的引擎实例。

初始化 即构互动白板 SDK 须要用于验证身份的 Token，其获取形式请参考 用户权限管制 中的“4.1 生成 Token”。

文件共享在验证身份时不校验“RoomId”参数，开发者在生成 Token 的过程中，可将“RoomId”参数设置为空字符串。

<!-- 须要挂载的父容器 -->
<div id="parentDomID"></div>

// 获取 ZegoSuperBoard 实例
zegoSuperBoard = ZegoSuperBoardManager.getInstance();
// 初始化 ZegoSuperBoard，胜利则 result 返回 true  
const result = await zegoSuperBoard.init(zg, {
    parentDomID: 'parentDomID', // 须要挂载的父容器 ID
    appID: 0, // 申请到的 AppID
    userID: '', // 用户自定义生成的用户 ID
    token: '' // 登录房间须要用于验证身份的 Token
});

请初始化 ZegoExpress-Video SDK 和 ZegoSuperBoard SDK 胜利之后，再调用登录房间接口。

2 互动白板 SDK 监听事件回调

依据理论利用须要，在初始化 SuperBoard 后监听想要关注的事件回调，比方谬误揭示、远端新增白板文件、远端删除白板文件、远端切换白板文件等。

SuperBoard 主动实现了多端同步能力，远端告诉回调内只需刷新本地 UI 逻辑即可。

on: 注册回调事件，通过 event 指定监听事件名。

// 罕用的 SuperBoard 相干回调
// SuperBoard 主动实现了多端同步能力，远端告诉回调内只需刷新本地 UI 逻辑即可。// 监听谬误回调，SDK 外部谬误均通过此回调抛出，除了间接在接口中间接返回的谬误外
    zegoSuperBoard.on('error', function(errorData) {
        // 错误码，谬误提醒语
        conosole.log(errorData.code, errorData.message)
    });

    // 监听白板翻页、滚动
    zegoSuperBoard.on('superBoardSubViewScrollChanged', function(uniqueID, page, step) {});
    // 监听远端白板缩放
    zegoSuperBoard.on('superBoardSubViewScaleChanged', function(uniqueID, scale) {}); 

    // 监听远端新增白板
    zegoSuperBoard.on('remoteSuperBoardSubViewAdded', function(uniqueID) {});

    // 监听远端销毁白板
    zegoSuperBoard.on('remoteSuperBoardSubViewRemoved', function(uniqueID) {});

    // 监听远端切换白板
    zegoSuperBoard.on('remoteSuperBoardSubViewSwitched', function(uniqueID) {});

    // 监听远端切换 Excel Sheet
    zegoSuperBoard.on('remoteSuperBoardSubViewExcelSwitched', function(uniqueID, sheetIndex) {});

    // 监听远端白板权限变更
    zegoSuperBoard.on('remoteSuperBoardAuthChanged', function(data) {console.log(data.scale, data.scroll)
    });

    // 监听远端白板图元权限变更
    zegoSuperBoard.on('remoteSuperBoardGraphicAuthChanged', function(data) {console.log(data.create, data.delete, data.move, data.update, data.clear)
    });

3 直播白板 - 登录房间

1. 获取登录 Token

调用 ZegoExpressEngine 的 loginRoom 接口登录房间。登录时，请传入本文 前提条件 所获取到的 Token 进行鉴权。

留神：长期 Token 仅供调试，正式上线时，请从开发者的业务服务器生成 token，详情可参考 应用 Token 鉴权。如果 Token 谬误，请参考 错误码 文档中的 1002067 和 1003072 排查问题。

2. 登录房间

调用 loginRoom 接口，传入房间 ID 参数“roomID”、“token”和用户参数“user”，依据理论状况传入参数“config”，登录房间。

• 在登录房间之前，请先注册登录房间后须要监听的所有回调。胜利登录房间后，即可接管相干的回调。
• “roomID”、“userID”和“userName”参数的取值都为自定义。
• “roomID”和“userID”都必须惟一，倡议开发者将“userID”设置为一个有意义的值，可将其与本人的业务账号零碎进行关联。

// 登录房间，胜利则返回 true
// userUpdate 设置为 true 能力收到 roomUserUpdate 回调。let userID = Util.getBrow() + '_' + new Date().getTime();
let userName = "user0001";
let roomID = "0001";
let token = ;
// 为防止错过任何告诉，您须要在登录房间前先监听用户退出 / 退出房间、房间连贯状态变更、推流状态变更等回调。zg.on('roomStateChanged', async (roomID, reason, errorCode, extendedData) => {})
zg.loginRoom(roomID, token, { userID, userName: userID}, {userUpdate: true}).then(result => {if (result == true) {console.log("login success")
     }
});

4 超级白板 - 创立白板性能

超级白板反对创立纯白板和文件白板。

• 纯白板：指定宽、高和页数创立的白板，用户在指定的白板画布上进行实时绘制。
• 文件白板：基于文件创建的白板，白板宽高和页数由文件决定，实现在文件上绘制图元的业务需要。

创立白板前须要保障登录胜利，即登录房间返回 true 后才可创立白板。

• 创立纯白板

// 上一步的登录房间胜利，返回 true 后才可创立白板
const model = await zegoSuperBoard.createWhiteboardView({
    name: '', // 白板名称
    perPageWidth: 1600, // 白板每页宽度
    perPageHeight: 900, // 白板每页高度
    pageCount: 5 // 白板页数
});

• 创立文件白板

创立文件白板前须要先获取文件的 fileID，可参考 共享文件治理 进行上传。

// 上一步的登录房间胜利，返回 true 后才可创立白板
const model = await zegoSuperBoard.createFileView({fileID // 文件的 fileID，在上传文件胜利后返回的惟一文件标识});

• 一个房间内最多可创立 50 个白板，房间内已存在 50 个白板时再创立白板会失败。
• 请通过 querySuperBoardSubViewList 获取房间内以后的白板数量。

5 挂载以后在线白板

1. 客户端退出房间时房间内已有白板存在时，因为 ZegoSuperBoard SDK 无奈得悉 parentDomID 对应的父容器是否曾经存在，所以无奈被动挂载以后白板到父容器上。
2. 进房胜利后，肯定要在 parentDomID 对应的父容器存在（物理像素宽高不为 0）后，依照以下步骤，先调用 querySuperBoardSubViewList 接口告诉 ZegoSuperBoard SDK 以后白板容器曾经存在，并通过 switchSuperBoardSubView 接口挂载以后白板到父容器上

// 获取 SuperBoardSubViewList
const superBoardSubViewList = await zegoSuperBoard.querySuperBoardSubViewList();

// 获取 SuperBoardView
const superBoardView = zegoSuperBoard.getSuperBoardView();

// 获取以后 SuperBoardSubView
const zegoSuperBoardSubView = superBoardView.getCurrentSuperBoardSubView()

// 获取 SuperBoardSubView 对应 model
const model = zegoSuperBoardSubView.getModel();

// 获取以后须要挂载白板的 uniqueID
const uniqueID = model.uniqueID;

// 判断文件类型，如果是 Excel 白板，须要先获取到 sheetIndex
let sheetIndex;
const fileType = model.fileType;
if (fileType === 4) {
    // Excel 白板
    const sheetName = zegoSuperBoardSubView.getCurrentSheetName();
    // 获取以后 Excel 对应的 Sheet 列表
    const zegoExcelSheetNameList = zegoSuperBoardSubView.getExcelSheetNameList();
    // 通过 sheetName 从 zegoExcelSheetNameList 中获取到对应的 sheetIndex
    sheetIndex = zegoExcelSheetNameList.findIndex(function(element, index) {return element === sheetName;});
}

// 挂载以后白板
const result = await superBoardView.switchSuperBoardSubView(uniqueID, sheetIndex);

6 验证在线白板的创立

运行上述我的项目的多个实例，登录同一房间 ID。用鼠标在任一窗口的 ZegoSuperBoardView 的范畴内按下挪动，即可看到涂鸦成果展现在各个窗口的 ZegoSuperBoardView 上。

7 销毁互动白板 SDK

// 销毁后 SDK 外部会主动切换到另外一个白板。展现的白板为销毁白板的上一个
const result = await zegoSuperBoard.destroySuperBoardSubView(uniqueID)

获取 互动白板 SDK 更多反对

获取本文直播白板 sdk 的开发文档、技术支持、Demo 体验，拜访即构文档核心，实现视频会议直播中的实时白板互动 / 共享。

近期有开发布局的开发者可上即构官网查看，恰逢即构七周年全线音视频产品 1 折的优惠，分割商务获取产品优惠；