海康威视的视频web端（vue开发）的实时预览、录像回放和页面拖拽

效果图

实现步骤

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