vue2 对接 海康摄像头插件 （视频WEB插件 V1.5.2）

前言

海康视频插件v.1.5.2版本运行环境需要安装插件VideoWebPlugin.exe，对浏览器也有兼容性要求，具体看官方文档

对应下载插件

去海康官网下载插件 里面有dome等其他需要用到的

地址：

安装插件

打开下载的文件里的bin文件 安装一下VideoWebPlugin

vue脚手架中集成插件

把官方资源包里的query-1.12.4.min.js、jsencrypt.min.js、web-control_1.2.5.min.js复制到vue项目public目录下，在index.html引入js

封装组件

        代码：

<!-- 只实现预览摄像头功能videoMain: 视频盒子高自己在组件里设置传递值cameraIndexCode: 'e67ea60409fa46......', // 监控点必填objData: {//海康初始化数据appkey: '29...5', //综合安防管理平台提供的appkey，必填ip: '192', //综合安防管理平台IP地址，必填secret: 'TidU1E9....TtVLAq', //综合安防管理平台提供的secret，必填port: 443, //综合安防管理平台端口，若启用HTTPS协议，默认443playMode: 0, // 0 预览 1回放layout: '1x1', //页面展示的模块数【16】},方法调用// 预览监控点的方法调用 可以传值 值为监控点this.$refs.hikVideo.previewVideo('333');// 停止全部预览this.$refs.hikVideo.stopAllPreview();注意：如果要实现 点击播放摄像头 前提是组件已经在页面显示出来例子：this.$refs.hikVideo.previewVideo(data); data为监控点编号-->
<template><div class="videoMain" ref="playWndBox"><divid="playWnd"class="playWnd":style="{height: playWndHeight + 'px',width: playWndWidth + 'px',}"></div></div>
</template><script>
export default {name: "HikVideo",props: {cameraIndexCode: {type: String,required: true,},objData: {type: Object,required: true,},},data() {return {// 视频盒子的高度playWndHeight: "244",// 视频盒子的宽度playWndWidth: "434",oWebControl: null,initCount: 0,pubKey: "",// cameraIndexCode: 'e67ea60409fa46fe879....', // 这里面是监控点编号// objData: {// 	//海康初始化数据// 	appkey: '2917...5',// 	ip: '192',// 	secret: 'TidU1E...tVLAq',// 	port: 443,// 	playMode: 0, // 0 预览 1回放// 	layout: '1x1', //页面展示的模块数【16】// },};},mounted() {console.log("首次加载时的到父容器", this.$refs.playWndBox);// 首次加载时的到父容器的高度this.playWndHeight = this.$refs.playWndBox.clientHeight;// 首次加载时的到父容器的宽度this.playWndWidth = this.$refs.playWndBox.clientWidth;console.log("父容器的高度",this.playWndHeight,"父容器的宽度",this.playWndWidth);// 初始化播放器插件this.$nextTick(() => {this.initPlugin();});// 监听scroll事件，使插件窗口尺寸跟随DIV窗口变化window.addEventListener("scroll", () => {if (this.oWebControl != null) {this.oWebControl.JS_Resize(this.$refs.playWndBox.clientWidth,this.$refs.playWndBox.clientHeight);console.log("scroll");this.setWndCover();}});// 监听resize事件，使插件窗口尺寸跟随DIV窗口变化this.monResize();setTimeout(() => {this.monResize();}, 1000);},destroyed() {if (this.oWebControl != null) {// 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题this.oWebControl.JS_HideWnd();// 销毁当前播放的视频this.oWebControl.JS_RequestInterface({ funcName: "destroyWnd" });// 断开与插件服务连接this.oWebControl.JS_Disconnect();}},methods: {monResize() {window.addEventListener("resize", (e) => {if (this.oWebControl != null) {console.log("resize");this.oWebControl.JS_Resize(this.$refs.playWndBox.clientWidth,this.$refs.playWndBox.clientHeight);this.setWndCover();}});},// 创建播放实例initPlugin() {let that = this;this.oWebControl = null;that.oWebControl = new WebControl({szPluginContainer: "playWnd", // 指定容器idiServicePortStart: 15900, // 指定起止端口号，建议使用该值iServicePortEnd: 15901,szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsidcbConnectSuccess: () => {// 创建WebControl实例成功that.oWebControl.JS_StartService("window", {// WebControl实例创建成功后需要启动服务// 值"./VideoPluginConnect.dll"写死dllPath: "./VideoPluginConnect.dll",}).then(function () {// 设置消息回调that.oWebControl.JS_SetWindowControlCallback({cbIntegrationCallBack: that.cbIntegrationCallBack,});//JS_CreateWnd创建视频播放窗口，宽高可设定that.oWebControl.JS_CreateWnd("playWnd", that.playWndWidth, that.playWndHeight, { bEmbed: true })//注：that.playWndWidth, that.playWndHeight这是上边已经获取的父元素的宽高，你们要调整大小可以更改父元素大小，不然初始化插件的时候会有空白闪烁。.then(function () {// 创建播放实例成功后初始化that.init();});},function () {// 启动插件服务失败});},// 创建WebControl实例失败cbConnectError: function () {that.oWebControl = null;console.log(("插件未启动，正在尝试启动，请稍候..."))that.$message.warning("插件未启动，正在尝试启动，请稍候...");// 程序未启动时执行error函数，采用wakeup来启动程序window.WebControl.JS_WakeUp("VideoWebPlugin://");that.initCount++;if (that.initCount < 3) {setTimeout(function () {that.initPlugin();}, 3000);} else {console.log(("插件启动失败，请检查插件是否安装！"))that.$message.warning("插件启动失败，请检查插件是否安装！");}},cbConnectClose: () => {// 异常断开：bNormalClose = false// JS_Disconnect正常断开：bNormalClose = true// console.log("cbConnectClose");that.oWebControl = null;},});},// 初始化init(callback) {console.log("初始化");let that = this;that.getPubKey(() => {let appkey = that.objData.appkey; //综合安防管理平台提供的appkey，必填let secret = that.setEncrypt(that.objData.secret); //综合安防管理平台提供的secret，必填let ip = that.objData.ip; //综合安防管理平台IP地址，必填let playMode = that.objData.playMode; //初始播放模式：0-预览，1-回放let port = that.objData.port; //综合安防管理平台端口，若启用HTTPS协议，默认443let snapDir = "D:\\SnapDir"; //抓图存储路径let videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径let layout = that.objData.layout; //playMode指定模式的布局let enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1let encryptedFields = "secret"; //加密字段，默认加密领域为secretlet showToolbar = that.objData.showToolbar; //是否显示工具栏，0-不显示，非0-显示let showSmart = 1; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示let buttonIDs ="0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮// var toolBarButtonIDs = "2049,2304" // 工具栏上自定义按钮that.oWebControl.JS_RequestInterface({funcName: "init",argument: JSON.stringify({appkey: appkey, //API网关提供的appkeysecret: secret, //API网关提供的secretip: ip, //API网关IP地址playMode: playMode, //播放模式（决定显示预览还是回放界面）port: port, //端口snapDir: snapDir, //抓图存储路径videoDir: videoDir, //紧急录像或录像剪辑存储路径layout: layout, //布局enableHTTPS: enableHTTPS, //是否启用HTTPS协议encryptedFields: encryptedFields, //加密字段showToolbar: showToolbar, //是否显示工具栏showSmart: showSmart, //是否显示智能信息buttonIDs, //自定义工具条按钮}),}).then(function (oData) {that.oWebControl.JS_Resize(that.playWndWidth, that.playWndHeight); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题if (callback) {callback();}// 隐藏// that.oWebControl.JS_HideWnd()// 预览视频that.previewVideo()});});},// 获取公钥getPubKey(callback) {console.log("获取公钥");let that = this;this.oWebControl.JS_RequestInterface({funcName: "getRSAPubKey",argument: JSON.stringify({keyLength: 1024,}),}).then(function (oData) {if (oData.responseMsg.data) {that.pubKey = oData.responseMsg.data;callback();}});},// RSA 加密setEncrypt(value) {let that = this;let encrypt = new window.JSEncrypt();encrypt.setPublicKey(that.pubKey);return encrypt.encrypt(value);},// 回调的消息cbIntegrationCallBack(oData) {let { responseMsg: type } = oData;if (type === "error") {} else {}},// 视频预览功能previewVideo(data) {console.log('预览画面');let that = this;let cameraIndexCode; // 获取输入的监控点编号值，必填if (data == undefined) {cameraIndexCode = that.cameraIndexCode;} else {cameraIndexCode = data;}let streamMode = 0; // 主子码流标识：0-主码流，1-子码流let transMode = 0; // 传输协议：0-UDP，1-TCPlet gpuMode = 0; // 是否启用GPU硬解，0-不启用，1-启用let wndId = -1; // 播放窗口序号（在2x2以上布局下可指定播放窗口）that.oWebControl.JS_RequestInterface({funcName: "startPreview",argument: JSON.stringify({cameraIndexCode: cameraIndexCode.trim(), // 监控点编号streamMode: streamMode, // 主子码流标识transMode: transMode, // 传输协议gpuMode: gpuMode, // 是否开启GPU硬解wndId: wndId, // 可指定播放窗口}),});},// 停止全部预览stopAllPreview() {console.log('停止全部预览');this.oWebControl.JS_RequestInterface({funcName: "stopAllPreview",});},// 格式化时间dateFormat(oDate, fmt) {let o = {"M+": oDate.getMonth() + 1, //月份"d+": oDate.getDate(), //日"h+": oDate.getHours(), //小时"m+": oDate.getMinutes(), //分"s+": oDate.getSeconds(), //秒"q+": Math.floor((oDate.getMonth() + 3) / 3), //季度S: oDate.getMilliseconds(), //毫秒};if (/(y+)/.test(fmt)) {fmt = fmt.replace(RegExp.$1,(oDate.getFullYear() + "").substr(4 - RegExp.$1.length));}for (let k in o) {if (new RegExp("(" + k + ")").test(fmt)) {fmt = fmt.replace(RegExp.$1,RegExp.$1.length == 1? o[k]: ("00" + o[k]).substr(("" + o[k]).length));}}return fmt;},// 设置窗口裁剪，当因滚动条滚动导致窗口需要被遮住的情况下需要JS_CuttingPartWindow部分窗口setWndCover() {var iWidth = $(window).width();var iHeight = $(window).height();var oDivRect = $("#playWnd").get(0).getBoundingClientRect();var iCoverLeft = oDivRect.left < 0 ? Math.abs(oDivRect.left) : 0;var iCoverTop = oDivRect.top < 0 ? Math.abs(oDivRect.top) : 0;var iCoverRight =oDivRect.right - iWidth > 0 ? Math.round(oDivRect.right - iWidth) : 0;var iCoverBottom =oDivRect.bottom - iHeight > 0? Math.round(oDivRect.bottom - iHeight): 0;iCoverLeft = iCoverLeft > 2041 ? 2041 : iCoverLeft;iCoverTop = iCoverTop > 945 ? 945 : iCoverTop;iCoverRight = iCoverRight > 2041 ? 2041 : iCoverRight;iCoverBottom = iCoverBottom > 945 ? 945 : iCoverBottom;this.oWebControl.JS_RepairPartWindow(0, 0, 2041, 946); // 多1个像素点防止还原后边界缺失一个像素条if (iCoverLeft != 0) {this.oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, 946);}if (iCoverTop != 0) {this.oWebControl.JS_CuttingPartWindow(0, 0, 2041, iCoverTop); // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条}if (iCoverRight != 0) {this.oWebControl.JS_CuttingPartWindow(2041 - iCoverRight,0,iCoverRight,946);}if (iCoverBottom != 0) {this.oWebControl.JS_CuttingPartWindow(0,946 - iCoverBottom,2041,iCoverBottom);}},},
};
</script><style>
.videoMain {width: 86vh;height: 55vh;
}
</style>

使用组件

引用组件

<template><div><HikVideo:cameraIndexCode="cameraIndexCode":objData="objData"ref="hikVideo"></HikVideo></div>
</template><script>
import hkVideo from '组件地址';
export default {data() {return {cameraIndexCode: "", //wed插件监控点//海康wed插件初始化数据objData: {appkey: "", //综合安防管理平台提供的appkey，必填ip: "", //综合安防管理平台IP地址，必填secret: "", //综合安防管理平台提供的secret，必填port: 443, //综合安防管理平台端口，若启用HTTPS协议，默认443playMode: 0, // 0 预览 1回放layout: "1x1", //页面展示的模块数【16】showToolbar: 1, //是否显示工具栏，0-不显示，非0-显示},};},
}
</script>

最后就结束了

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/665570.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

修改Vim编辑器的缩进和显示行数

修改Vim编辑器的缩进和显示行数

一、Vim编辑器的缩进和显示行数 1.指令 sudo vi /etc/vim/vimrc2.插入内容 set tabstop4 set shiftwidth4 set nu 注意输入的格式&#xff0c;前后不要留空格 tabstop是输入按下tab缩进4个 shiftwidth是批量缩进4个 nu是显示行数
阅读更多...
革命性的写作：MDX 让你的 Markdown 全面动起来

革命性的写作：MDX 让你的 Markdown 全面动起来

1. MDX MDX 是一种标记语法&#xff0c;它结合了 Markdown&#xff08;一种流行的文本到 HTML 的转换工具&#xff09;和 JSX&#xff08;React 中用于描述 UI 组件的语法扩展&#xff09;。MDX 允许你在 Markdown 文档中直接写入 JSX&#xff0c;这意味着你可以在 Markdown 内…
阅读更多...
IPv6协议讲解

IPv6协议讲解

IPv6协议讲解 IPv6是互联网协议的第六版(Internet Protocol Version 6)&#xff0c;它用于在互联网上路由数据包&#xff0c;旨在替代IPv4&#xff0c;它提供了更多的IP地址和改进的网络功能。IPv6是为了应对互联网快速发展带来的挑战而设计的&#xff0c;它的引入不仅解决了地…
阅读更多...
【教学类-40-08】A4骰子纸模制作8.0（2.97CM嵌套骰子表格相连 一页7个 油墨打印A4铅画纸）

【教学类-40-08】A4骰子纸模制作8.0（2.97CM嵌套骰子表格相连 一页7个 油墨打印A4铅画纸）

作品展示&#xff08;一页7个骰子&#xff0c;表格连在一起&#xff0c;一行一个&#xff08;2嵌套&#xff09;&#xff09; 背景需求&#xff1a; 制作三嵌套盒子并实践后&#xff0c;感觉套起来很紧&#xff0c;还是用2嵌套的铅画纸做骰子比较好&#xff0c; https://blog…
阅读更多...
代码随想录算法训练营|day24

代码随想录算法训练营|day24

第七章 回溯算法 77.组合代码随想录文章详解总结 77.组合 以n5,k3为例 (1)for循环遍历&#xff0c;递归选择符合要求的值加入path&#xff0c;len(path)k时&#xff0c;返回 statrtIndex保证每次递归取到的值不重复 剪枝&#xff1a;i<n-(k-len(path))1 后续需要k-len(pat…
阅读更多...
政安晨的AI笔记——示例演绎OpenAI的ChatGPT与DALL·E提示词总原则（并融合创作一副敦煌飞天仙女图）

政安晨的AI笔记——示例演绎OpenAI的ChatGPT与DALL·E提示词总原则（并融合创作一副敦煌飞天仙女图）

ChatGPT是由OpenAI开发的一种基于大规模预训练的语言生成模型。它建立在GPT&#xff08;Generative Pre-trained Transformer&#xff09;模型的基础上&#xff0c;通过大量的无监督学习和生成式任务训练来学习语言的概念和模式。 ChatGPT的原理是基于Transformer模型。Transfo…
阅读更多...
shell命令以及运行原理 | 权限

shell命令以及运行原理 | 权限

Shell命令原理剖析 shell命令以及运行原理&#x1f4a6;Linux权限的概念&#x1f4a6;什么是权限❔Linux下有哪些权限身份❔Linux中文件属性解析 shell命令以及运行原理&#x1f4a6; Linux严格意义上说的是一个操作系统&#xff0c;我们称之为 “核心&#xff08;kernel"…
阅读更多...
AS-V1000 视频监控平台产品介绍：客户端功能介绍（一）

AS-V1000 视频监控平台产品介绍：客户端功能介绍（一）

目 录 一、引言 1.1 AS-V1000视频监控平台介绍 1.2平台服务器配置说明 二、软件概述 2.1 客户端软件用途 2.2 客户端功能 三、客户端功能说明 3.1 登陆和主界面 3.1.1登陆界面 3.1.2登陆操作 3.1.3主界面 3.1.4资源树 3.2 视频预览 3.2.1视频预览界面 3.2.…
阅读更多...
京东微前端框架MicroApp简介

京东微前端框架MicroApp简介

一、MicroApp 1.1 MicroApp简介 MicroApp是由京东前端团队推出的一款微前端框架，它从组件化的思维，基于类WebComponent进行微前端的渲染，旨在降低上手难度、提升工作效率。MicroApp无关技术栈，也不和业务绑定，可以用于任何前端框架。 官网链接：https://micro-zoe.gith…
阅读更多...
获取真实 IP 地址（一）：判断是否使用 CDN（附链接）

获取真实 IP 地址（一）：判断是否使用 CDN（附链接）

一、介绍 CDN&#xff0c;全称为内容分发网络&#xff08;Content Delivery Network&#xff09;&#xff0c;是一种网络架构&#xff0c;旨在提高用户对于网络上内容的访问速度和性能。CDN通过在全球各地部署分布式服务器节点来存储和分发静态和动态内容&#xff0c;从而减少…
阅读更多...
【Linux系统化学习】进程替换

【Linux系统化学习】进程替换

目录 进程程序替换 替换原理 ​编辑替换函数 函数解释 命名理解 函数使用 execl execlp execv execvp 调用其它程序 进程程序替换 替换原理 用fork创建子进程后执行的是和父进程相同的程序(但有可能执行不同的代码分支),子进程往往要调用一种exec函数以执行另一个…
阅读更多...
禁止 ios H5 中 bounces 滑动回弹效果

禁止 ios H5 中 bounces 滑动回弹效果

在开发面向 iOS 设备的 HTML5 应用时&#xff0c;控制页面的滚动行为至关重要&#xff0c;特别是禁用在 Safari 中默认的滑动回弹效果。本文旨在提供一个简洁明了的解决方案&#xff0c;帮助开发者在特定的 Web 应用中禁用这一效果。 1. 什么是滑动回弹效果&#xff1f; 在 iO…
阅读更多...
C++输出地址

C++输出地址

下面是一段输出地址的程序。 #include <bits/stdc.h> using namespace std;int main() {int s;cout << &s;//原地址return 0; }假如有一个人&#xff08;的朋友&#xff09;后来了&#xff0c;他也想住进的房间&#xff0c;我们可以这样&#xff1a; #includ…
阅读更多...
【数据结构】链表OJ面试题2(题库+解析)

【数据结构】链表OJ面试题2(题库+解析)

1.前言 前五题在这http://t.csdnimg.cn/UeggB 休息一天&#xff0c;今天继续刷题&#xff01; 2.OJ题目训练 1. 编写代码&#xff0c;以给定值x为基准将链表分割成两部分&#xff0c;所有小于x的结点排在大于或等于x的结点之前 。链表分割_牛客题霸_牛客网 思路 既然涉及…
阅读更多...
gif动图的裁剪实现思路

gif动图的裁剪实现思路

项目需求(对app的轮播,以及banner和咨询的图片进行裁剪):前期实现使用用vue-cropper插件对图片进行插件,----后续需求需要裁剪gif动图(vue-cropper、微信自带的截图工具,以及fastStone截图工具,都只能截取静态图片,打开动图时只显示某一帧的静态图片),所以需要研究为什么vue-cr…
阅读更多...
机器学习——集成学习

机器学习——集成学习

&#x1f4d5;参考&#xff1a;ysu老师课件西瓜书 期末复习笔记 1.集成学习的基本概念 集成学习&#xff08;ensemble learing&#xff09;通过构建并结合多个学习器来完成学习任务。 有时也被称为多分类器系统&#xff08;multi-classifier system&#xff09;、基于委员会的…
阅读更多...
Spring Cloud Stream解密：流式数据在微服务中的魔力

Spring Cloud Stream解密：流式数据在微服务中的魔力

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 Spring Cloud Stream解密&#xff1a;流式数据在微服务中的魔力 前言Spring Cloud Stream基础&#xff1a;微服务中的数据流动Binder概念与使用&#xff1a;连接流的音符消息序列化与反序列化&#xf…
阅读更多...
【消息队列】kafka整理

【消息队列】kafka整理

kafka整理 整理kafka基本知识供回顾。
阅读更多...
Leetcode刷题笔记题解（C++）：99. 恢复二叉搜索树

Leetcode刷题笔记题解（C++）：99. 恢复二叉搜索树

思路&#xff1a; 二叉搜索树的中序遍历是递增序列&#xff0c;可以在中序遍历中记录两个需要交换的节点&#xff0c;直到遍历完毕之后&#xff0c;对两个节点的值进行交换即可得到正确的二叉搜索树 比如中序序列为 1 2 3 7 5 6 4&#xff08;7比5大记录7为x&#xf…
阅读更多...
每日OJ题_算法_模拟③_力扣6. Z 字形变换

每日OJ题_算法_模拟③_力扣6. Z 字形变换

目录 力扣6. Z 字形变换 解析代码 力扣6. Z 字形变换 6. Z 字形变换 难度 中等 将一个给定字符串 s 根据给定的行数 numRows &#xff0c;以从上往下、从左到右进行 Z 字形排列。 比如输入字符串为 "PAYPALISHIRING" 行数为 3 时&#xff0c;排列如下&#xff…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023