这种方式播放视频的优点:实时性好。
技术难点在于:前端和C++客户端的交互。
主要使用的插件,与技术:DPSDK_VideoPlayer这个插件,需要下载这个js,这个js,客户端提供了一系列的方法供我们前端调用。如下:
视频播放的流程:
player.DPSDK_Init()=====》
player.DPSDK_Login()=======》
player.DPSDK_SetCallBack(cb)=====》
展示位置 player.DPSDK_ShowModule(jsonParam) 与播放视频 player.DPSDK_OpenVideos(videoParams)
// 1.player.DPSDK_Init()初始化,需要传入div与端口:
var param = {
'spaceId': 'ocxWrapper', // IE下只要传入放置视频播放插件的div
'options': {
'websocketPort': port
} // 端口
}
player.DPSDK_Init(param, (param) => {
if (param.result) {
resolve()
vm.login(cb) // 走login()函数
} else {
reject(new Error('初始化失败,请先安装插件'))
}
})
player.DPSDK_Login()完成客户端登录初始化后,需要设置回调自定义函数。
login(callback) {
var player = this.player
player.DPSDK_Login(param => {
var cb = {
getNewUrlCb: this.getNewUrlCb,
downloadVideoCb: this.downloadVideoCb,
cancelCollectVideoCb: this.cancelCollectVideoCb,
collectVideoCb: this.collectVideoCb,
endVideoCb: this.endVideoCb,
markVideoCb: this.markVideoCb,
closeVideoCb: this.closeVideoCb,
timePointNoticeCb: this.timePointNoticeCb,
liveAbnormalCb: this.liveAbnormalCb
}
player.DPSDK_SetCallBack(cb)
this.clientKey = param.clientKey
callback && callback(param) // 在这会执行回调函数:执行this.openVideo()播放函数.
})
},
C++客户端展示在web页面的位置,提供的方法:DPSDK_ShowModule():
openRealMonitor(clientKey, param) {
var player = this.player
var jsonParam = {
'id': vm.normalPageId,
'clientKey': vm.clientKey,
'outerPosX': pos.outerPosX,
'outerPosY': pos.outerPosY,
'outerWidth': pos.outerWidth,
'outerHeight': pos.outerHeight,
'innerPosX': pos.innerPosX,
'innerPosY': pos.innerPosY,
'innerWidth': pos.innerWidth,
'innerHeight': pos.innerHeight,
'iframeX': iframeXY.x,
'iframeY': iframeXY.x,
'param': param
}
player && player.DPSDK_ShowModule(jsonParam)
},