海康威视的视频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

版权声明：本文为CSDN博主「_freely」的原创文章
原文链接：https://blog.csdn.net/hbjiankely/article/details/103169234