效果图
实现步骤
1. 安装海康web插件,去海康威视官网上下载,官方不支持Mac,只支持Windows
https://open.hikvision.com/
2. 在index.html引入js文件,安装包里面有
3. 代码实现,可兼容谷歌、火狐、360、edge
监控点
×
预览
回放
开发中遇到的问题及解决方法
1. 创建实例失败时重新唤起插件
文档错误 oWebControl.JS_WakeUp("VideoWebPlugin://")
正确方法如下
WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行
2. 产品要求弹框显示后直接进行预览,不需要再次点击
实现过程
先初始化 this.initPlugin()
再执行预览方法 this.previewVideo()
未能实现,因为初始化方法是异步的
解决方法,给初始化方法传递一个回调函数
this.initPlugin(() => {
this.previewVideo();
});
3. 多窗口实时预览实现,效果图如下
切换到2x2模式,监听父组件传递过来的监控点编号,调预览方法
watch: {
monitorDeviceNo: {
handler(newV, oldV) {
this.cameraIndexCode = newV;
if (newV && this.playMode === 0) {
this.previewVideo();
} else if (newV && this.playMode === 1) {
this.backVideo();
}
}
}
}
关闭弹框的是,需要调用停止所有预览的API