Web
录像回放
更新时间： 2022/11/22 07:54:22
接入准备
录制回放需要开发者进行如下配置
- 需要在云信后台开启白板功能
- 需要配置服务器抄送地址
云信服务器会抄送一至多个这样的文件 http://nox.xxx.com/51435961-201599034016129-1574992453452-0.gz（取决于编辑白板的用户数量） 到开发者的服务器，开发者可以将文件上传到自己的域名能够访问到的地方。
- 在加入白板房间前传入录制参数
javascript// 白板添加抄送参数
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
})
快速开始
- 在本地文件夹中创建互动白板的项目文件夹，并将解压后的互动白板 SDK 的脚本文件拷贝至文件夹中。文件目录类似如下：
├── index.html ├── scripts │ └── index.js │ └── RecordPlayer_vx.x.x.js │ └── pptRenderer_vx.x.x.js
RecordPlayer_vx.x.x.js和 pptRenderer_vx.x.x.js为互动白板 SDK 中的脚本文件。
创建录像文件index.html，首先加载录像SDK脚本。
html<!doctype html>
<html lang="en">
<head>
<script src="./scripts/RecordPlayer_vx.x.x.js"></script>
<script src="./scripts/pptRenderer_vx.x.x.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;left:0;right:0;bottom:0;"></div>
<script src='./scripts/index.js'></script>
</body>
</html>
然后打开编辑器，创建index.js，输入下面的代码。注意，由于https://app.yunxin.163.com未配置支持跨域访问，所以用户需要先将录像文件下载到本地，放置到和index.html同一文件下
javascriptRecordPlayer.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'))
})
然后用户可以用npx serve ./开启静态服务，此时打开静态服务的页面，应该能够看到录像回放的页面。页面底部有控制条，可以控制录像回放的开始，暂停，设置倍速等等。
播放控制
若不使用SDK自带的工具栏，则请勿调用player.bindControlContainer函数。使用下面的函数可以控制白板的播放：
jsplayer.play()
player.pause()
/**
* time为相对于起始时间的偏移量。单位为ms
*/
player.seekTo(time: number)
播放结束时，调用destroy释放播放器实例
jsplayer.destroy()
播放速度
使用setPlaySpeed调整播放速度
jsplayer.setPlaySpeed(speed: number)
播放视角
设置以谁的视角来观看录像。默认视角为录像文件中第一个动作的发出者。RecordPlayer.getInstance的then回调中，会返回这次会话的所有参与者列表。开发者可以根据此信息渲染可以选择的视角列表
jsplayer.setViewer(viewer: string)
设置时间范围
用户可以设置录像回放的时间范围。调用seekTo，将以setTimeRange设置的起始时间作为基准时间。设置完成后，player会抛出tick和durationChange事件，开发者可以监听这些事件调整外部播放器进度。
js/**
* startTime和endTime需要传入ms级时间戳
*/
player.setTimeRange(startTime: number | undefined, endTime: number | undefined)
设置drawPlugin
setAppConfig
具体来说，如果在开发阶段配置了drawPlugin.setAppConfig的下列属性时，需要在回放阶段也重新设置一下：
js{
/**
* 3.6.0版本之前请使用canvas_bg_color
*/
canvasBgColor: string,
showCursorNickname: boolean,
showSelectNickname: boolean,
showLaserNickname: boolean,
}
setFontFamily
若在开发阶段配置了字体，那么回放阶段也需要再配置一遍