云社区 博客 博客详情

vue中使用海康视频插件(1.监控)

SegmentFault思否 发表于 2020-10-24 22:19:23 2020-10-24
0
0

【摘要】 使用条件一.、引入依赖文件jsencrypt.min.jsjsWebControl-1.0.0.min.js注:必须在与 vue 的 根 index.html 文件中引入, main.js 中引入无效;依赖文件及官方demo:官网下载二、 template<div class="video-wrap mt-16"> <wrap class="video-box" v-fo...

使用条件
一.、引入依赖文件
jsencrypt.min.js
jsWebControl-1.0.0.min.js
注:必须在与 vue 的 根 index.html 文件中引入, main.js 中引入无效;
依赖文件及官方demo:官网下载

二、 template

<div class="video-wrap mt-16">
  <wrap class="video-box" v-for="(item, index) in realTimeData.videoConfig" :key="item.id"
  > <div :id="`playWnd${index}`" class="playWnd">div>
  wrap>
div>

三、methods

/* 获取视频code */ async getVideoCode() { this.realTimeData.videoLoad = true; const params = { area: "", enterprise: this.realTimeData.Warehouse.enterpriseName, street: "", }; await getCamera(params).then((res) => { const videoCode = res.data.list.map(({ cameraIndexCode }) => ({ cameraIndexCode, })); this.realTimeData.videoConfig = videoCode.map((item) => { return { code: item.cameraIndexCode, id: Math.floor(Math.random() * 100), }; }); this.initPlugin(videoCode); }); }, /* 创建插件实例 */ initPlugin(codeArr) { const dll = { dllPath: "./VideoPluginConnect.dll" }; codeArr.forEach((item, index) => { let oWebControl = new WebControl({ szPluginContainer: `playWnd${index}`, // 指定容器id iServicePortStart: 15900, iServicePortEnd: 15909, szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid cbConnectSuccess: () => { oWebControl.JS_StartService("window", dll).then(() => { oWebControl.JS_SetWindowControlCallback({ cbIntegrationCallBack: (msg) => { //注:不能使用外部函数调用,无效 if (msg?.responseMsg?.msg?.result) { const { result } = msg.responseMsg.msg; if (result == 1024) { oWebControl.JS_HideWnd();//放大隐藏其它视频窗口 } else if (result == 1025) { oWebControl.JS_ShowWnd();//缩小显示全部窗口 } } }, }); //启动插件服务成功 oWebControl.JS_CreateWnd(`playWnd${index}`, 260, 160).then(() => { //JS_CreateWnd创建视频播放窗口,宽高可设定 this.initVideo(oWebControl, item.cameraIndexCode); // 创建播放实例成功后初始化 }); }); }, }); this.plug.example.push(oWebControl); }); }, /* 获取公钥 */ initVideo(oWebControl, code) { const params = { funcName: "getRSAPubKey", argument: JSON.stringify({ keyLength: 1024 }), }; oWebControl.JS_RequestInterface(params).then((res) => { if (res.responseMsg.data) { this.plug.pubKey = res.responseMsg.data; this.getVideoConfig(oWebControl); this.getClickAction(oWebControl, code); } }); }, /* 视频插件配置项回调 */ getVideoConfig(oWebControl) { const { offsetWidth, offsetHeight } = document.getElementById("playWnd0"); const configObj = { funcName: "init", argument: JSON.stringify({ appkey: "xxxxxx", //API网关提供的appkey secret: this.setEncrypt("xxxxxx"), //API网关提供的secret ip: "xxx.xxx.xxx.xxx", //API网关IP地址 playMode: 0, //播放模式(决定显示预览还是回放界面) port: 8443, //端口 snapDir: "D:\\SnapDir", //抓图存储路径 videoDir: "D:\\VideoDir", //紧急录像或录像剪辑存储路径 layout: "1x1", //布局 enableHTTPS: 1, //是否启用HTTPS协议 encryptedFields: "secret", //加密字段 showToolbar: 1, //是否显示工具栏 showSmart: 1, //是否显示智能信息 buttonIDs: "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769", //自定义工具条按钮 }), }; oWebControl.JS_RequestInterface(configObj).then(() => { oWebControl.JS_Resize(offsetWidth, offsetHeight); }); }, /* 视频流RSA加密 */ setEncrypt(value) { const encrypt = new JSEncrypt(); encrypt.setPublicKey(this.plug.pubKey); return encrypt.encrypt(value); }, /* 视频播放 */ getClickAction(oWebControl, code) { code = code.trim(); oWebControl.JS_RequestInterface({ funcName: "startPreview", argument: JSON.stringify({ cameraIndexCode: code, //监控点编号 streamMode: 0, //主子码流标识:0-主码流,1-子码流 transMode: 1, //传输协议:0-UDP,1-TCP gpuMode: 0, //是否启用GPU硬解,0-不启用,1-启用 wndId: -1, //播放窗口序号(在2x2以上布局下可指定播放窗口) }), }); this.realTimeData.videoLoad = false; }, /* 销毁视频实例 */ getDestruction() { this.plug.example.forEach((item) => { item.JS_HideWnd(); item.JS_DestroyWnd().then((res) => {}); // item.JS_Disconnect().then((res) => {}); }); },

四、使用效果图、功能:
1.实时监控 / 2.截图 / 3.录屏 / 4.摄像头控制 / 5.语音指挥(硬件支持)/ 6.即时回放
image

文章来源: segmentfault.com,作者:XiNine,版权归原作者所有,如需转载,请联系作者。

原文链接:segmentfault.com/a/1190000037581543

登录后可下载附件,请登录或者注册

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:huaweicloud.bbs@huawei.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
评论文章 //点赞 收藏 0
点赞
分享文章到微博
分享文章到朋友圈

上一篇:W6Mo5Cr4V2技术特性

下一篇:发布订阅模式和观察者模式

评论 (0)


登录后可评论,请 登录注册

评论