vue调用监控（海康威视）
uni-app 2022-06-25 20:09:08

1、安装依赖

C/C++ Code复制内容到剪贴板
  1. npm install ezuikit-js  

 

2、在你使用的页面引入

C/C++ Code复制内容到剪贴板
  1. import EZUIKit from 'ezuikit-js';  

 

3、HTML

C/C++ Code复制内容到剪贴板
  1. <div id="video-container"></div>  
  2.   
  3. <div v-if="isControl">  
  4.     <p class="up contain" title="上" @click="control(0)"><img src="../../assets/image/video/up.png" /></p>  
  5.     <p class="left contain" title="左" @click="control(2)"><img src="../../assets/image/video/left.png" /></p>  
  6.     <p class="zt contain" title="暂停" @click="stop()"><img src="../../assets/image/video/zt.png" /></p>  
  7.     <p class="right contain" title="右" @click="control(3)"><img src="../../assets/image/video/right.png" /></p>  
  8.     <p class="bottom contain" title="下" @click="control(1)"><img src="../../assets/image/video/bottom.png" /></p>  
  9. </div>  

 

js

C/C++ Code复制内容到剪贴板
  1. //获取token  
  2. handleAsstoken() {  
  3.     this.Sevice({  
  4.         url: 'monitor/accessToken',  
  5.         method: 'get'  
  6.     }).then(res => {  
  7.         if (res && res.code == 200) {  
  8.             this.accessToken = res.data.accessToken;  
  9.             this.handleEzuikit();  
  10.         }  
  11.     }).catch(err => {  
  12.         console.log(err);  
  13.     })  
  14. },  
  15. //开启监控  
  16. handleEzuikit() {  
  17.     //获取地址  
  18.     this.isControl = false;  
  19.     this.Sevice({  
  20.         url: '/monitor/address?accessToken=' + this.accessToken + '&deviceSerial=123',  
  21.         method: 'get',   
  22.     }).then(res => {  
  23.         if (res && res.code == 200) {  
  24.             this.isControl = true;  
  25.             var player = new EZUIKit.EZUIKitPlayer({  
  26.                 id: 'video-container', // 视频容器ID  
  27.                 accessToken: this.accessToken, //token  
  28.                 url: res.data.url, //播放地址  
  29.                 audio: 1, //开启声音  
  30.                 width: 1000,  
  31.                 height: 600,  
  32.                 template: 'standard', //播放器模板   simple：极简版;standard：标准版;security：安防版(预览回放);vioce：语音版      
  33.                 header: ["capturePicture", "save", "zoom"], // 如果templete参数不为simple,该字段将被覆盖  
  34.                 // footer: ["broadcast", "hd", "fullScreen"], // 如果template参数不为simple,该字段将被覆盖  
  35.             })  
  36.         }  
  37.     }).catch(err => {  
  38.         console.log(err);  
  39.     })  
  40. }  

 

C/C++ Code复制内容到剪贴板
  1. //操作监控  
  2. control(val) {  
  3.     let that = this;  
  4.     that.direction = val;  
  5.     this.Sevice({  
  6.         url: "monitor/controlStop?accessToken=" + that.accessToken + "&deviceSerial=123" +"&channelNo=1&direction=" + that.direction,  
  7.         method: 'get',  
  8.     }).then((res) => {  
  9.         console.log(res);  
  10.         if (res.code == 200) {  
  11.             that.$message.success('暂停成功');  
  12.             this.Sevice({  
  13.                 url: "monitor/control?accessToken=" + that.accessToken +  
  14.                     "&deviceSerial=123" + "&channelNo=1&direction=" + val + "&speed=1",  
  15.                 method: 'get',  
  16.             }).then((res) => {  
  17.                 console.log(res);  
  18.                 if (res.code == 200) {  
  19.                     that.$message.success('控制成功');  
  20.                 }  
  21.             })  
  22.         }  
  23.     })  
  24. }  
  25. // 暂停操作  
  26. stop() {  
  27.     let that = this;  
  28.     this.Sevice({  
  29.         url:"monitor/controlStop?accessToken=" + that.accessToken + "&deviceSerial=123"+"&channelNo=1&direction="+'',  
  30.         method: 'get',  
  31.         }).then((res) => {  
  32.         console.log(res);  
  33.         if (res.data.code == 200) {  
  34.             that.$message.success('暂停成功');  
  35.         }  
  36.     })  
  37. },  

 

css

C/C++ Code复制内容到剪贴板
  1. #video-container {  
  2.     width: 100%;  
  3. }  

 

 

 

 

本文来自于：https://blog.csdn.net/weixin_43787161/article/details/124997

上一篇 前端生成二维码
下一篇 Android安装adb
相关的文章
Powered by yoyo苏ICP备15045725号