文档反馈
文档反馈

接入准备

录制回放需要开发者进行如下配置

  1. 需要在云信后台开启白板功能
  2. 需要配置服务器抄送地址

云信服务器会抄送一个这样的文件 URL http://nox.xxx.com/51435961-51609352701904-1574992454435-0.mp4 或者 http://nox.xxx.com/51435961-201599034016129-1574992453452-0.gz 到开发者的服务器,开发者可以将文件上传到自己的域名能够访问到的地方。

  1. 在加入白板房间前传入录制参数
// 白板添加抄送参数
const sdk = WhiteBoardSDK.getInstance({
    appKey: appkey,
    account: account,
    nickname: string,
    token: token
    container: document.getElementById('xxx') as HTMLDivElement,
    platform: 'web' | 'ios' | 'android' | 'pc' | 'mac' | 'pad',
    /**
     * 是否开启录制
     */
    record: true
})

快速开始

创建录像文件index.html,首先加载录像SDK脚本。

<!doctype html>
<html lang="en">
    <head>
        <script src="https://app.yunxin.163.com/webdemo/whiteboard/sdk/RecordPlayer_v3.1.0.js"></script>
    </head>
    <body style="width: 100vw; height: 100vh; overflow: hidden; margin: 0; position: relative">
        <div id="whiteboard" style="width: 100vw; height: 100vh;"></div>
        <div id="toolbar" style="position: absolute;"></div>
        <script src='./index.js'></script>
    </body>
</html>

然后打开编辑器,创建index.js,输入下面的代码。

RecordPlayer.getInstance({
    whiteboardParams: {
      urlArr: [
        //   "https://app.yunxin.163.com/webdemo/whiteboard/assets/replay/161047310-206967194175233-1604651017329-0.gz",
        //   "https://app.yunxin.163.com/webdemo/whiteboard/assets/replay/161055521-206967194175233-1604651017329-0.gz"
        "./161047310-206967194175233-1604651017329-0.gz",
        "./161055521-206967194175233-1604651017329-0.gz"
      ],
      container: document.getElementById('whiteboard')
    }
  })
  .then(({player, params, drawPlugin}) => {
    /**
     * 其中player是RecordPlayer返回的对象。
     * 通过调用player的接口,可以控制录像回放的播放
     *
     * params包含录像文件的基本信息:开始时间,结束时间,持续时间,以及白板文件中包含哪些用户
     *
     * 白板回放内部通过给drawPlugin发送命令完成。在大部分场景下,回放时不需要直接操作drawPlugin对象。但是,部分在绘制阶段的配置需要在回放阶段重新配置一遍,
     * 这样回放时的显示才能够保证和绘制阶段一致。
     */
     player.bindControlContainer(document.getElementById('toolbar'))
})

注意,由于https://app.yunxin.163.com未配置支持跨域访问,所以用户需要先将录像文件下载到本地,放置到和index.html同一文件下。然后用户可以用npx serve ./开启静态服务,此时打开静态服务的页面,应该能够看到录像回放的页面。页面底部有控制条,可以控制录像回放的开始,暂停,设置倍速等等。

播放控制

若不使用SDK自带的工具栏,则请勿调用player.bindControlContainer函数。使用下面的函数可以控制白板的播放:

player.play()
player.pause()
/**
 * time为相对于起始时间的偏移量。单位为ms
 */
player.seekTo(time: number)

播放结束时,调用destroy释放播放器实例

player.destroy()

播放速度

使用setPlaySpeed调整播放速度

player.setPlaySpeed(speed: number)

播放视角

设置以谁的视角来观看录像。默认视角为录像文件中第一个动作的发出者。RecordPlayer.getInstancethen回调中,会返回这次会话的所有参与者列表。开发者可以根据此信息渲染可以选择的视角列表

player.setViewer(viewer: string)

设置drawPlugin

setAppConfig

具体来说,如果在开发阶段配置了drawPlugin.setAppConfig的下列属性时,需要在回放阶段也重新设置一下:

{
  canvas_bg_color: string,
  showCursorNickname: boolean,
  showSelectNickname: boolean,
  showLaserNickname: boolean,
}

setFontFamily

若在开发阶段配置了字体,那么回放阶段也需要再配置一遍

×

反馈成功

非常感谢您的反馈,我们会继续努力做得更好。