vue接入海康萤石云npm包,开发视频模块
因为公司项目的需要,需要接入海康萤石云平台的npm包
来开发公司的视频模块
我们目前做的是公司的视频直播模块
ui设计采用的是公司的视频窗口ui
好了,我们先看一下这个npm包的md文档
安装和引入方式可以参考里面的,注意引用方式不同,调用的类也不同
这里我们采用npm引入的方式来调用
与文档里面的用法一致
我们需要先创建一个dom节点
注意,如果初始化视频时没有设置长度和宽度
那么就会铺满这个dom元素,所以这个dom元素一定要设置长度和宽度
<div id="video-container"></div>
接下来就是在mounted钩子里初始化视频
this.player = new EZUIKit.EZUIKitPlayer({
autoplay: true, //自动播放
id: 'video-container', // 视频容器ID
accessToken:accessToken ,// 视频的AccessToken
url: "ezopen://open.ys7.com/"+imei+"/1.live",
template: "simple", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版;
})
海康的视频url的特点是可根据url拼接,展示不同的摄像头,不同的清晰度,视频的时间段回放
视频回放的url:
const url = "ezopen://open.ys7.com/"+imei+"/1.rec?begin="+begin+"&end="+end
高清视频url
url = "ezopen://open.ys7.com/"+imei+"/1.hd.live"
切换视频url的方法
player.play();
// 切换播放地址场景(建议先执行stop方法停止上次取流)
player.play({
url: 'ezopen://open.ys7.com/203751922/1.rec?begin=202001000000&end=202001235959'
});
我们先来看一下页面的设计
需求:
九宫格内可以随意填充视频的窗口,
但是由于萤石云初始化的方式是在dom节点内渲染出一个iframe层
所以直接修改url是不能取消的iframe层的
只能用vue的v-if结合this.$nextTick
去销毁这个小窗口内的iframe层
这也是我觉得很不方便的地方,希望海康可以提出一个好的解决方案
去销毁这个视频节点