1、在页面插入按钮、视频播放器元素、浏览器直播元素、同步数据元素,如下图:
2、在视频播放器元素上进行属性绑定和绑定变量初始化,如下图:
绑定参数:{"data--vsrc":source}
绑定变量初始化:{"source":""}
3、开始按钮的id设置为start,同时对此按钮进行绑定数据编程,如下图:
绑定数据编程中的高级编辑:_vm.state("start");
4、停止按钮的id设置为stop,同时对此按钮进行绑定数据编程(同上)。
绑定数据编程中的高级编辑:_vm.state("stop");
5、在浏览器直播元素上设置id为test,name为webcamchunk;同时进行属性绑定和绑定变量初始化,如下图:
绑定参数:{"data--state":state,"data--camera":camera,"data-x-source":source,"data-x-datacount":datacount,"data-x-liveid":liveid,"data-studioid":studioid,"data-livevideoid":"vjs_video_1_html5_api"} ;studioid是由后端返回的直播间的id。
绑定变量初始化:{"camera":0,"source":""}
6、设置同步数据元素,如下图:
播放端为观众观看直播的页面,需要在页面插入播放器元素并在其设置中开启直播功能,如下图: