視頻會議直播中實作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="https://www.cnblogs.com/zegodeveloper/archive/2022/08/22/ZegoSuperBoardManagerWeb.js"></script>
<script src="https://www.cnblogs.com/zegodeveloper/archive/2022/08/22/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折的優惠，聯系商務獲取產品優惠；

標籤：其他

上一篇：App移動端測驗【1】Android SDK的部署

下一篇：leetcode 503. Next Greater Element II 下一個更大元素 II(中等)