接入回放webview

更新时间: 2023/06/02 15:48:45

静态资源

webview的下载地址为SDK&示例

G1回放的webview地址为g1/webview.record.html, g1/webview_vconsole.record.html
G2回放的webview地址为g2/webview.record.html, g2/webview_vconsole.record.html

开发者使用上面的地址下载webview后,部署静态资源服务器serve上述页面

实现方法

通过 webview 调用白板的 API 时序图如下图所示。

uml diagram
  1. webview 调用 webPageLoaded 接口,通知客户端 webview 脚本加载成功。

  2. 客户端收到webPageLoaded之后,调用 jsInitPlayer 接口加载录像回放资源文件

  3. 资源加载完毕后,webview 调用 webAssetsLoaded 通知客户端

  4. 客户端通过 jsPlay, 'jsPause, 'jsSeekTo等接口控制播放进度

  5. webview 通过 webPlayTick 事件,通知客户端播放进度更新。客户端可以根据该事件更新时间轴位置

  6. webview 通过 webPlayFinish 事件,通知客户端播放已完成

  7. 客户端调用 jsDestroy 回收录像回放实例。客户端应该销毁 webview

API

webview --> 客户端

事件 描述 处理建议
webPageLoaded 通知客户端 webview 已加载完毕 收到该事件后调用 jsInitPlayer 初始化播放器
webAssetsLoaded 通知客户端录像回放播放器资源加载完毕 收到该事件后调用 jsPlay 开始播放
webPlayFinish webview通知客户端播放结束
webPlayTick webview通知客户端播放进度更新 如果客户端选择自己渲染进度条,可以根据此事件控制进度条位置
webPlayDurationChange webview 通知客户端录像回放总时长 如果客户端选择自己渲染进度条,可以根据此事件控制进度条长度
webGetAntiLeechInfo 白板SDK向客户端请求防盗链参数 客户端向应用服务器请求防盗链参数,然后通过 jsSendAntiLeechInfo 返回
webDirectCallReturn jsDirectCall 调用的回调消息 jsDirectCall 调用后,webview通过该事件将消息回传给客户端
webLog webview 运行时产生的日志。 建议客户端将这些日志保存下来,方便日后调试
webJsError webview 内js运行异常。 客户端可根据此消息调试

webPageLoaded

webview通知客户端脚本加载成功。由于网络环境可能不稳定,有时候页面可能无法加载。客户端应该在加载webview时,设置一个定时器。若超过定时器设置的时间还未收到webPageLoaded,则应该重新加载webview。推荐设置定时器时间为20s。

客户端收到webPageLoaded之后,应该通知webview加入房间:jsInitPlayer

{
    action: 'webPageLoaded',
    param: {}
}

webAssetsLoaded

客户端调用jsInitPlayer之后,当资源加载完毕后,webview通知客户端webAssetsLoaded。随通知的参数有录像的开始结束时间,白板的参与人员名单等信息。此时客户端可以通过jsPlay控制录像的播放

{
    action: 'webAssetsLoaded',
    param: {
        beginTimeStamp: number,
        endTimeStamp: number,
        duration: number,
        /**
        * 本次白板会话的参与者列表
        */
        viewerArr: string[]
    }
}

webPlayFinish

通知客户端录像播放结束

{
    action: 'webPlayFinish',
    param: {}
}

webPlayTick

白板播放进度更新时,会通知客户端最新的播放位置

{
    action: 'webPlayTick',
    param: {
        time: number
    }
}

webPlayDurationChange

当用户调用setTimeRange时,录像的持续时间可能发生变化,此时客户端会收到该事件。开发者可以监听该事件改变客户端中播放器控制条的时间跨度。

{
    action: 'webPlayDurationChange',
    param: {
        duration: number
    }
}

webGetAntiLeechInfo

应用如果开启 URL 防盗链,则需要应用服务器获取防盗链参数。收到该消息后,客户端向应用服务器请求防盗链参数,然后通过 jsSendAntiLeechInfo 返回。bucket 和 object 分别为资源的桶名和对象名。 URL 防盗链的参数配置方法请参考: 点播-防盗链

{
    action: 'webGetAntiLeechInfo',
    param: {
        prop: {
            bucket: string
            object: string
        },
        url: string,                   // 不含防盗链的地址。回传拼接地址时使用
        seqId: number                  // 序列号。每次请求都会递增。通过 jsSendAntiLeechInfo 返回时,需要带上请求的 seqId
    }
}

webDirectCallReturn

调用jsDirectCall时,如果带有序列号seqId,则webview会通过webDirectCallReturn将返回值传递给客户端。

{
    action: 'webDirectCallReturn',
    param: {
        target: 'drawPlugin'
        funcName: string  //请参考API文档,action为接口名称
        result: res     //接口函数调用后返回的数据
        seqId: number | string
    }
}

webLog

webview 给客户端发送 webview 运行时产生的日志。建议客户端将这些日志保存下来,方便日后调试。

{
    action: 'webLog',
    param: {
        type: 'info' | 'error' | 'warn' | 'log' | 'debug',
        msg: string
    }
}

webJsError

Js运行时报错

{
    action: 'webJsError',
    param: {
        msg: string
    }
}

客户端 --> webview

函数 描述 调用时机
jsInitPlayer 初始化录像回放播放器 收到 webPageLoaded 后调用此接口初始化录像回放播放器
jsPlay 播放 在 webAssetsLoaded 事件后调用
jsPause 暂停 在 webAssetsLoaded 事件后调用
jsSeekTo 跳转 在 webAssetsLoaded 事件后调用
jsSetPlaySpeed 设置播放速度 在 webAssetsLoaded 事件后调用
jsSetViewer 设置播放视角 在 webAssetsLoaded 事件后调用
jsSetTimeRange 设置播放时间范围 在 webAssetsLoaded 事件后调用
jsDirectCall 直接调用白板 SDK 的接口 需要在收到 webJoinWBSucceed 后调用
jsSendAntiLeechInfo 传入防盗链地址 收到 webGetAntiLeechInfo 后,通过该接口回复防盗链地址
jsDestroy 销毁播放器 销毁录像回放实例

jsInitPlayer

初始化播放资源。包括播放的urls, 是否加载工具栏等等

{
    action: 'jsInitPlayer',
    param: {
        urls: Array<string>,
        /**
         * toolbar为webview.record.html中工具栏的domId, 若不填,则不会渲染控制条
         */
        controlContainerId: 'toolbar' | undefined  
        /**
         * 请参考SDK接口中WhiteboardSDK.getInstance中的drawPluginParams。
         *
         * 若白板在线阶段开启防盗链,录像回放时请设置:
         * drawPluginParams: {
         *   appConfig: {
         *      nosAntiLeech: true,
         *      nosAntiLeechExpire: 7200              //过期时间,默认后台配置为2小时
         *   }
         * }
         */
        drawPluginParams: any
    }
}

jsPlay

播放

{
    action: 'jsPlay',
    param: {}
}

jsPause

暂停

{
    action: 'jsPause',
    param: {}
}

jsSeekTo

跳转到指定位置。

{
    action: 'jsSeekTo',
    param: {
        /**
         * time为相对于起始时间的偏移量。单位为ms
         */
        time: number
    }
}

jsSetPlaySpeed

设置播放速度, 默认为1

{
    action: 'jsSetPlaySpeed',
    param: {
        speed: number
    }
}

jsSetViewer

设置以谁的视角观看录像。viewer为登录时的account

{
    action: 'jsSetViewer',
    param: {
        viewer: string
    }
}

jsSetTimeRange

设置录像的起始和终止时间。单位为毫秒级的时间戳。

{
    action: 'jsSetTimeRange',
    param: {
        startTime: number | undefined,
        endTime: number | undefined
    }
}

jsDirectCall

通过jsDirectCall直接操作drawPlugin对象。在回放阶段调用jsDirectCall常用于配置白板的显示行为。比如配置背景色,字体等等

如果参数中设置了seqId,则jsDirectCall的返回值会通过webDirectCallReturn传给客户端。webDirectCallReturn返回结果时,会将seqId一并返回。用户应该自行维护seqId,并通过seqId判断应该将序列号和哪一次jsDirectCall匹配。

{
    action: 'jsDirectCall',
    param: {
        target: 'whiteboardSDK'
        funcName: string      //请参考SDK API文档。funcName为函数名
        seqId?: number | string
        arg1?: any
        arg2?: any
        arg3?: any
        arg4?: any
        arg5?: any
    }
}

比如若调用setFontFamily操作,则参数应该为:

{
    action: 'jsDirectCall',
    param: {
        target: 'drawPlugin',
        funcName: 'setFontFamily',
        arg1: {
            fontFamily: "Helvetica",
            fontFace: [
                {
                    url: '/assets/font/Helvetica.ttf',
                    format: 'truetype'
                },
                {
                    url: '/assets/font/Helvetica.woff',
                    format: 'woff'
                },
                {
                    url: '/assets/font/Helvetica.woff2',
                    format: 'woff2'
                }
            ]
        }
    }
}

jsSendAntiLeechInfo

客户端收到 webGetAntiLeechInfo后,通过调用应用服务器的 http 接口,计算防盗链 url 地址,然后将 url 地址返回给白板 SDK。防盗链文档请参考: 点播-防盗链

{
    action: 'jsSendAntiLeechInfo',
    param: {
        code: 200,
        seqId: number,                                    // webGetAntiLeechInfo 中的 seqId,代表这次请求的序列号
        url: `${param.url}?wsSecret=${res.data.wsSecret}&wsTime=${wsTime}`
    }
}

jsDestroy

销毁录像回放实例

{
    action: 'jsDestroy',
    param: {}
}
此文档是否对你有帮助?
有帮助
去反馈
  • 静态资源
  • 实现方法
  • API
  • webview --> 客户端
  • webPageLoaded
  • webAssetsLoaded
  • webPlayFinish
  • webPlayTick
  • webPlayDurationChange
  • webGetAntiLeechInfo
  • webDirectCallReturn
  • webLog
  • webJsError
  • 客户端 --> webview
  • jsInitPlayer
  • jsPlay
  • jsPause
  • jsSeekTo
  • jsSetPlaySpeed
  • jsSetViewer
  • jsSetTimeRange
  • jsDirectCall
  • jsSendAntiLeechInfo
  • jsDestroy