文档反馈
文档反馈

流程

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

API

webview --> 客户端

webPageLoaded

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

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

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

webJsError

Js运行时报错

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

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
    }
}

客户端 ->> webview

jsInitPlayer

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

{
    action: 'jsInitPlayer',
    param: {
        urls: Array<string>,
        controlContainerId: string  //工具栏dom的id
        /**
         * 请参考SDK接口中WhiteboardSDK.getInstance中的drawPluginParams
         */
        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
    }
}

jsDirectCall

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

{
    action: 'jsDirectCall',
    param: {
        target: 'whiteboardSDK'
        funcName: string      //请参考SDK API文档。funcName为函数名
        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'
                }
            ]
        }
    }
}

jsGetState

获取应用内部的状态。SDK获取状态后,会通过webSendAppState将数据传递给客户端。

{
    action: 'jsGetState',
    param: {
        target: 'drawPlugin'
        funcName: string      //请参考SDK API文档。funcName为函数名
    }
}
×

反馈成功

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