vue项目通过下载js 文件海康威视视频监控

要在Vue项目中使用海康威视视频监控，需要先下载并引入相关的JavaScript文件。具体步骤如下：

1. 打开海康威视官网，进入“开发者中心”，下载“Web SDK（含示例代码）”压缩包。

2. 解压压缩包，找到“WebComponents.exe”文件，运行该文件进行安装。

3. 安装完成后，在安装目录下找到“components”文件夹，将里面的“HikVideoPlayer.js”文件复制到Vue项目的“public”文件夹下。

4. 在Vue项目的“index.html”文件中，通过script标签引入“HikVideoPlayer.js”文件。

   <script src="./HikVideoPlayer.js"></script>

5. 在Vue组件的mounted生命周期中，创建海康威视视频监控组件对象，并指定监控画面所在的DOM元素。

   mounted() {
       // 创建海康威视视频监控组件对象
       let player = new window.HikVideoPlayer();
       // 指定监控画面所在的DOM元素
       player.createPlayer({
           id: 'player-container', // 监控画面所在的DOM元素的id
           width: '100%', // 监控画面的宽度
           height: '100%', // 监控画面的高度
           url: 'rtsp://xxx.xxx.xxx.xxx:554/h264/ch1/main/av_stream', // 监控视频的RTSP地址
           username: 'admin', // 监控视频的用户名
           password: '12345', // 监控视频的密码
           success: function() {
               console.log('视频监控组件创建成功！');
           },
           error: function() {
               console.log('视频监控组件创建失败！');
           }
       });
   }

上述代码中，需要将“id”属性的值指定为Vue组件中的一个DOM元素的id，该DOM元素将用于显示监控画面。另外，“url”、“username”和“password”分别为监控视频的RTSP地址、用户名和密码，需要替换为实际的值。

6. 在Vue组件的beforeDestroy生命周期中，销毁海康威视视频监控组件对象。

   beforeDestroy() {
       // 销毁海康威视视频监控组件对象
       window.HikVideoPlayer.destroyAllPlayer();
   }

上述代码中，调用了“window.HikVideoPlayer.destroyAllPlayer()”方法，可以销毁所有创建的海康威视视频监控组件对象。