您可以通过 NERoom 的互动白板，实现互动涂鸦、实时同步、文档共享等功能，满足在线教育、互动娱乐、金融面签、视频会议等低延时高互动场景的需求。

功能介绍

互动白板的应用场景包括：

• 在线教育：用于线上语言培训、K12 学科辅导等课堂教学场景，教师可借助涂鸦、文本、直线、激光笔等基础教具，边演示课件边勾画要点。
• 视频会议：用于视频会议、在线培训等企业协同场景，满足主讲实时演示讲解、多方协同交流的需求。
• 互动娱乐：用于你画我猜、互动涂鸦等娱乐场景，满足更多有趣的游戏互动玩法。
• 金融面签：用于视频面签、远程见证等金融场景，满足面签双方远程办理业务、进行签名确认的需求。

注意事项

使用白板之前需要先初始化白板。

前提条件

创建房间时，已在NECreateRoomOptions方法中，设置enableWhiteboard=true，具体操作方法请参见创建房间。

配置步骤

1. 初始化白板。

   function initWhiteboard()
   

2. 开始共享白板。

   function startWhiteboardShare()
   

3. 设置白板视图。

   function setupWhiteboardCanvas(view: NEWhiteboardView)
   
   

4. （可选）重置白板视图。

   function resetWhiteboardCanvas(view: HTMLDivElement)
   

   如果 view 的值设置为 null，表示强制重置白板视图。

5. 设置白板是否可绘制。

   function setEnableDraw(enable: true/false)
   

   enable的参数说明如下：

   • true：允许绘制。
   • false：不允许绘制。

6. 查询白板共享者的userUuid。

   function getWhiteboardSharingUserUuid(): string
   

7. 停止共享白板。

   function stopWhiteboardShare()
   

8. 关闭某成员的白板共享。

   function stopMemberWhiteboardShare(_userUuid: stri)
   

示例代码

调用 getRoomContext 方法获取房间上下文。调用此方法时，您需要将 roomUuid 设置为您所加入房间的 ID。

/**
 * 获取房间上下文NERoomContext
 * @param roomUuid 房间ID
 */
const NERoomContext = NERoomService.getRoomContext(roomUuid)

初始化白板

try {
    await NERoomContext.whiteboardController.initWhiteboard()
    console.log("initWhiteboard success")
} catch(error) {
    console.error(error, 'initWhiteboard fail')
}

开始共享白板。

try {
    await NERoomContext.whiteboardController.startWhiteboardShare(_userUuid)
    console.log("startWhiteboardShare success")
} catch(error) {
    console.error(error, 'startWhiteboardShare fail')
}

设置白板视图。

/**
* 绑定白板视图
* @param view dom结构
*/
try {
    await NERoomContext.whiteboardController.setupWhiteboardCanvas(view)
    console.log("setupWhiteboardCanvas success")
} catch(error) {
    console.error(error, 'setupWhiteboardCanvas fail')
}

重置白板视图。

/**
* 白板视图
* @param view dom结构
*/
try {
    await NERoomContext.whiteboardController.resetWhiteboardCanvas(view)
    console.log("resetWhiteboardCanvas success")
} catch(error) {
    console.error(error, 'resetWhiteboardCanvas fail')
}

设置白板是否可绘制。

/**
* 设置白板是否可绘制
* @param enable 是否允许绘制 
*/
try {
    await NERoomContext.whiteboardController.setEnableDraw(enable)
    console.log("setEnableDraw success")
} catch(error) {
    console.error(error, 'setEnableDraw fail')
}

查询白板共享者的userUuid。

try {
    const result = await NERoomContext.whiteboardController.getWhiteboardSharingUserUuid(_userUuid)
    console.log("getWhiteboardSharingUserUuid", result)
} catch(error) {
    console.error(error, 'getWhiteboardSharingUserUuid fail')
}

停止共享白板。

try {
    await NERoomContext.whiteboardController.stopWhiteboardShare()
    console.log("stopWhiteboardShare success")
} catch(error) {
    console.error(error, 'stopWhiteboardShare fail')
}

实现关闭某成员的白板共享。

try {
    await NERoomContext.whiteboardController.stopMemberWhiteboardShare(_userUuid)
    console.log("stopWhiteboardShare success")
} catch(error) {
    console.error(error, 'stopWhiteboardShare fail')
}

相关API文档

方法	功能描述
initWhiteboard	初始化白板。
setEnableDraw	设置白板可绘制。
setupWhiteboardCanvas	设置白板视图。
resetWhiteboardCanvas	重置白板视图。
startWhiteboardShare	开始共享白板。
stopWhiteboardShare	停止共享白板。
getWhiteboardSharingUserUuid	查询白板共享者的userUuid。
stopMemberWhiteboardShare	关闭某成员的白板共享。