录像回放

更新时间: 2024/07/24 13:59:48

接入准备

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

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

云信服务器会抄送一至多个这样的文件 http://nox.xxx.com/51435961-201599034016129-1574992453452-0.gz(取决于编辑白板的用户数量) 到开发者的服务器,开发者可以将文件上传到自己的域名能够访问到的地方。

  1. 在加入白板房间前传入录制参数
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
})

快速开始

  1. 在本地文件夹中创建互动白板的项目文件夹,并将解压后的互动白板 SDK 的脚本文件拷贝至文件夹中。文件目录类似如下:
    ├── index.html
    ├── scripts
    │   └── index.js
    │   └── RecordPlayer_vx.x.x.js
    │   └── pptRenderer_vx.x.x.js
    

RecordPlayer_vx.x.x.jspptRenderer_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.getInstancethen回调中,会返回这次会话的所有参与者列表。开发者可以根据此信息渲染可以选择的视角列表

jsplayer.setViewer(viewer: string)

设置时间范围

用户可以设置录像回放的时间范围。调用seekTo,将以setTimeRange设置的起始时间作为基准时间。设置完成后,player会抛出tickdurationChange事件,开发者可以监听这些事件调整外部播放器进度。

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

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

此文档是否对你有帮助?
有帮助
去反馈
  • 接入准备
  • 快速开始
  • 播放控制
  • 播放速度
  • 播放视角
  • 设置时间范围
  • 设置drawPlugin
  • setAppConfig
  • setFontFamily