文档反馈
文档反馈

流程

云信也提供了一套录像回放的webview。录像回放的控制方式即可以由内及外,即通过webview内部的工具栏控制播放,外界监听webview播放进度的变化,并与外部的音视频轨道对齐。也可以是外部播放时,通过webview的接口函数控制并对齐白板内部的播放。

客户端事件

下面我们将一一来讲述webview会抛出哪些消息。

webPageLoaded

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

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

webAssetsLoaded

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

webPlayFinish

白板录像播放结束

webPlayTick

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

webview接口

webview的接口比较简单。具体说明如下:

jsInitPlayer

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

jsPlay

播放

jsPause

暂停

jsSeekTo

移动到指定位置

jsSetPlaySpeed

设置播放速度

jsSetViewer

设置以谁的视角观看

API

webview --> 客户端

webPageLoaded

通知各端Web页面已经准备好了。传递给客户端的数据如下,格式为JSON。

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

webJsError

Js运行时报错

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

webAssetsLoaded

客户端调用jsInitPlayer之后,当资源加载完毕后,会通过此消息通知客户端

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

webPlayFinish

通知客户端录像播放结束

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

webPlayTick

通知客户端录像播放位置

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

客户端 ->> webview

jsInitPlayer

{
    action: 'jsInitPlayer',
    param: {
        urls: Array<string>,
        controlContainerId: string  //工具栏dom的id
    }
}

jsPlay

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

jsPause

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

jsSeekTo

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

jsSetPlaySpeed

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

jsSetViewer

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

反馈成功

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