静态资源

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 时序图如下图所示。

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

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

webAssetsLoaded

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

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

webPlayFinish

通知客户端录像播放结束

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

webPlayTick

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

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

webPlayDurationChange

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

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

webGetAntiLeechInfo

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

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

webDirectCallReturn

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

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

webLog

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

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

webJsError

Js运行时报错

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, 是否加载工具栏等等

js{
    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

播放

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

jsPause

暂停

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

jsSeekTo

跳转到指定位置。

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

jsSetPlaySpeed

设置播放速度, 默认为1

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

jsSetViewer

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

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

jsSetTimeRange

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

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

jsDirectCall

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

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

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

比如若调用setFontFamily操作，则参数应该为：

js{
    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。防盗链文档请参考: 点播-防盗链

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

jsDestroy

销毁录像回放实例

js{
    action: 'jsDestroy',
    param: {}
}