项目场景：

项目为智慧园区后台管理系统
需求全部摄像头实时监控&&单个监控直播&&单个监控回放
集成海康威视监控 WEB插件
网上有非常多的资源代码实例大多数还需要根据自己的需求改进
实测完美兼容

演示：

页面监控

弹出层监控

准备

海康开放平台
注册个账号=>下载 =>iSecureCenter=> 视频WEB插件V1.5.1
下载后在bin文件夹 VideoWebPlugin.exe 双击安装 (仅支持Windows)

里面的几个demo非常有用挨个测试一下至少知道怎么一回事
最关键是这个开发指南所有你想试下的功能都在里边了

或许能用到的几个网址:
直播地址测试
Vue接入监控视频技术整理
基于vue项目 vue-video-player实现rtmp hls视频流播放
vue cli中播放rtmp&flv/m3u8/rtsp ; 在html原生页面中播放m3u8
vue截图，上传，下载，预览
vue实现播放rtmp直播视频流
阿里云Web端播放器

方案

封装一个海康威视的播放器组件

这里从父组件传入了几个参数以及一些引入的库实际开发因人而异
*index :当前组件所属页面因为由多个页面用到
*type : 回放 || 直播
*code : 监控点编号监控设备页面String || 实时监控 Array
*time 回放时间设定暂时废弃
几点注意 :
监控组件的宽高自适应外层父组件 ;
项目中另外一个监控组件是装在vxe-modal弹出层的,这个modal可以拖拽,拖拽时需要对视频组件进行重新定位,会有卡顿感;
监控视频的显示优先级最高,不知道怎么调整,因此需要确保每次只能初始化一个插件实例;
组件视频采用九宫格3x3展示,超出部分分页实现,我也写过根据监控id总量动态布局,后来默认了;
创建插件实例 initPlugin 这个方法朝父组件发射了个事件通知父组件我这边正在初始化,防止重复加载监控实例;

/*** @author deep1nBlur* @email mailbrcee@gmail.com * @create date 2020-11-05 09:10:05 * @modify date 2020-11-05 09:10:05* @desc [海康监控视频组件]*  */
<template><divclass="root-haikang-video"id="video-frame":style="{width: sizes.width,height: sizes.height}"><divid="playWnd"class="playWnd"v-html="playText":style="{ width: swfWidth + 'px', height: swfHeight + 'px' }"></div><el-button-groupv-if="show"style="margin-top: 5px; display: flex; justify-content: center"><el-buttonsize="mini"type="primary"icon="el-icon-arrow-left"@click="nextPage('left')":disabled="page == 0">上一页</el-button><el-buttonsize="mini"type="primary"@click="nextPage('right')":disabled="page + 1 == pageNum">下一页<i class="el-icon-arrow-right el-icon--right"/></el-button></el-button-group></div>
</template><script>
import request from "@/utils/request";
import { isArray } from "xe-utils/methods";export default {/*** index :当前组件所属页面 设备管理 为空 ||实时监控 realTime* type : 回放 || 直播* code : 监控点编号 监控设备页面String || 实时监控 Array* time 回放时间 暂时废弃*/props: ["index", "type", "code", "time"],data() {return {sizes: {width: "782px",height: "490px"},layoutFmt: {1: "1x1",2: "1x2",3: "1+2",4: "2x2",5: "1+5",6: "3+4",7: "3+4",8: "1+7",9: "3x3"},page: 0,pageNum: 1,show: false,timeRange: "",swfHeight: "",swfWidth: "",//初始化参数initparam: {},//监控点编号pointCode: "",pubKey: "",oWebControl: null,WebControl: null,playText: "插件正在启动，请稍候..."};},methods: {nextPage() {// 实时监控 当code 长度 当大于页面布局  显示 下一页按钮if (arguments[0] == "left") {this.page--;} else {this.page++;}this.startPlay();},getInitParams() {// 获取海康综合安防参数this.initparam = {};request({url: `xxxxxxxxxxxxxxxxxxxxxxxxxxÏ`,method: "get"}).then(res => {if (res && !res.data.hkApiBackend) {this.$message({message: "请完善华为云Roma平台配置!",type: "error"});this.playText = "";return;}this.initparam = res.data;//页面加载时创建播放实例初始化this.initPlugin();}).catch(err => {console.log(err);});},// 创建插件实例initPlugin() {this.$emit("update:pluginIsInit", true);this.oWebControl = new WebControl({szPluginContainer: "playWnd", // 指定容器idiServicePortStart: 15900, // 指定起止端口号，建议使用该值iServicePortEnd: 15909,szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid// 创建WebControl实例成功cbConnectSuccess: () => {this.oWebControl.JS_StartService("window", {// WebControl实例创建成功后 启动插件服务接口 参数固定dllPath: "./VideoPluginConnect.dll" // 值"./VideoPluginConnect.dll"写死}).then(() => {// 启动插件服务成功this.oWebControl.JS_SetWindowControlCallback({// 设置消息回调cbIntegrationCallBack: this.cbIntegrationCallBack});this.oWebControl.JS_CreateWnd("playWnd", this.swfWidth, this.swfHeight).then(() => {//JS_CreateWnd创建视频播放窗口，宽高可设定this.init(); // 创建播放实例成功后初始化});},() => {// 启动插件服务失败});},// 创建WebControl实例失败cbConnectError: () => {this.oWebControl = null;this.playText = "插件未启动，正在尝试启动，请稍候...";this.WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序this.initCount++;if (this.initCount < 3) {setTimeout(() => {this.initPlugin();}, 3000);} else {this.playText ='插件启动失败，请检查插件是否安装！<a target="_blank" style="color: #30a8ff;text-decoration: underline;" href=" ' +this.initparam.hkVideoPlugin +'">windows下载地址(软件大小：67MB)</a>';}},// 异常断开：bNormalClose = falsecbConnectClose: bNormalClose => {// JS_Disconnect正常断开：bNormalClose = trueconsole.log("%c海康插件=>插件正常断开","color:#00e676",bNormalClose);this.oWebControl = null;}});},// 设置窗口控制回调setCallbacks() {this.oWebControl.JS_SetWindowControlCallback({cbIntegrationCallBack: this.cbIntegrationCallBack});},// 推送消息cbIntegrationCallBack(oData) {console.info("%c海康web插件信息推送=>","color:#00e676;",oData.responseMsg);/* showCBInfo(JSON.stringify(oData.responseMsg)); */},//初始化视频播放init() {this.getPubKey(() => {let appkey = this.initparam.hkAppkey; //综合安防管理平台提供的appkey，必填let secret = this.setEncrypt(this.initparam.hkSecret); //综合安防管理平台提供的secret，必填let ip = this.initparam.hkApiBackend.split("//")[1].split(":")[0]; //综合安防管理平台IP地址，必填let port = this.initparam.hkApiBackend.split("//")[1].split(":")[1]; //综合安防管理平台端口，若启用HTTPS协议，默认443port = parseInt(port);let layout = "1x1";let playMode = this.type == "live" ? 0 : 1; //初始播放模式：0-预览，1-回放let snapDir = "D:\\SnapDir"; //抓图存储路径let videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径let enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，是为1，否为0let encryptedFields = "secret"; //加密字段，默认加密领域为secretlet showToolbar = 1; //是否显示工具栏，0-不显示，非0-显示let showSmart = 1; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示let buttonIDs = "256,258,259,260,512,515,516,517,768,769"; //自定义工具条按钮this.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: buttonIDs //自定义工具条按钮})}).then(oData => {this.oWebControl.JS_Resize(this.swfWidth, this.swfHeight); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题this.$emit("update:pluginIsInit", false);this.playText = "";if (this.index == "realTime") {// 实时监控 批量播放 设置布局if (this.code.length && isArray(this.code)) {let basicLayout = "1x1"; //基础布局let totalCode = this.code.length; //实时监控总条数let layoutPage = Math.ceil(totalCode / 9); //超过十条每页显示十条   向上取整// console.log("=====总页数", layoutPage);if (totalCode <= 9) {basicLayout = this.layoutFmt[totalCode];} else {// 大于10 时 按照"2x2" 布局// 显示下一页 总页数this.show = true;this.pageNum = layoutPage;basicLayout = "3x3";}this.oWebControl.JS_RequestInterface({// 设置窗口布局funcName: "setLayout",argument: JSON.stringify({layout: "3x3" // 窗口布局默认9})});}}this.startPlay(); //初始化之后开启预览});});},// 申请 RSA 公钥，用于对敏感信息(如 appkey、secret)加密。getPubKey(callback) {this.oWebControl.JS_RequestInterface({funcName: "getRSAPubKey",argument: JSON.stringify({keyLength: 1024})}).then(oData => {// console.log(oData);if (oData.responseMsg.data) {this.pubKey = oData.responseMsg.data;callback();}});},//RSA加密setEncrypt(value) {let encrypt = new JSEncrypt();encrypt.setPublicKey(this.pubKey);return encrypt.encrypt(value);},// 设置窗口裁剪，当因滚动条滚动导致窗口需要被遮住的情况下需要JS_CuttingPartWindow部分窗口setWndCover() {let iWidth = $(window).width();let iHeight = $(window).height();let oDivRect = $("#playWnd").get(0).getBoundingClientRect();let iCoverLeft = oDivRect.left < 0 ? Math.abs(oDivRect.left) : 0;let iCoverTop = oDivRect.top < 0 ? Math.abs(oDivRect.top) : 0;let iCoverRight =oDivRect.right - iWidth > 0 ? Math.round(oDivRect.right - iWidth) : 0;let iCoverBottom =oDivRect.bottom - iHeight > 0? Math.round(oDivRect.bottom - iHeight): 0;iCoverLeft = iCoverLeft > this.swfWidth ? this.swfWidth : iCoverLeft;iCoverTop = iCoverTop > this.swfHeight ? this.swfHeight : iCoverTop;iCoverRight = iCoverRight > this.swfWidth ? this.swfWidth : iCoverRight;iCoverBottom =iCoverBottom > this.swfHeight ? this.swfHeight : iCoverBottom;this.oWebControl.JS_RepairPartWindow(0,0,this.swfWidth + 1,this.swfHeight); // 多1个像素点防止还原后边界缺失一个像素条if (iCoverLeft != 0) {this.oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, this.swfHeight);}if (iCoverTop != 0) {this.oWebControl.JS_CuttingPartWindow(0,0,this.swfWidth + 1,iCoverTop); // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条}if (iCoverRight != 0) {this.oWebControl.JS_CuttingPartWindow(this.swfWidth - iCoverRight,0,iCoverRight,this.swfHeight);}if (iCoverBottom != 0) {this.oWebControl.JS_CuttingPartWindow(0,this.swfHeight - iCoverBottom,this.swfWidth,iCoverBottom);}},//播放监控视频 预览 || 回放 || 批量startPlay() {let streamMode = 1; //主子码流标识：0-主码流，1-子码流let transMode = 1; //传输协议：0-UDP，1-TCPlet gpuMode = 0; //是否启用GPU硬解，0-不启用，1-启用if (this.index == "realTime") {// 实时监控 批量播放// console.log(//   "这是实时页码================================================",//   this.page// );if (this.code.length && isArray(this.code)) {let temp = [];let arr = [];if (this.code.length > 9) {// 大于9 分页显示arr = this.code.slice(this.page * 9, (this.page + 1) * 9);} else {arr = this.code;}arr.forEach((item, index) => {let obj = {};obj.cameraIndexCode = item.pointInterCode;obj.wndId = index + 1;obj.transMode = transMode;obj.streamMode = streamMode;obj.gpuMode = gpuMode;temp.push(obj);});this.oWebControl.JS_RequestInterface({funcName: "startMultiPreviewByCameraIndexCode",argument: JSON.stringify({list: temp})});}} else {// 监控设备管理 直播 or 回放let cameraIndexCode = this.code; //获取输入的监控点编号值，必填let wndId = -1; //播放窗口序号（在2x2以上布局下可指定播放窗口）cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");if (this.type == "live") {// 视频预览this.oWebControl.JS_RequestInterface({funcName: "startPreview",argument: JSON.stringify({cameraIndexCode: cameraIndexCode, //监控点编号streamMode: streamMode, //主子码流标识transMode: transMode, //传输协议gpuMode: gpuMode, //是否开启GPU硬解wndId: wndId //可指定播放窗口})});} else {//视频回放this.oWebControl.JS_RequestInterface({funcName: "startPlayback",argument: JSON.stringify({cameraIndexCode: cameraIndexCode, //监控点编号startTimeStamp: this.timeRange[0] / 1000, // 录像查询开始时间戳，单位:秒endTimeStamp: this.timeRange[1] / 1000, // 录像查询结束时间戳，单位:秒recordLocation: 1, // 录像存储类型 0-中心存储 1-设备存储transMode: transMode,gpuMode: gpuMode,wndId: wndId})});}}},//停止全部预览功能stopAllPreview() {this.oWebControl.JS_RequestInterface({funcName: "stopAllPreview"});},//关闭视频窗口closeWindow() {console.log("%c海康插件=>", "color:#00e676;", "关闭页面，销毁插件实例！");if (this.oWebControl != null) {this.oWebControl.JS_HideWnd(); // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题this.oWebControl.JS_Disconnect().then(() => {// 断开与插件服务连接成功},() => {// 断开与插件服务连接失败});}}},created() {this.timeRange = this.time;this.WebControl = WebControl; //调用电脑中的插件if (this.index == "realTime") {// 重新计算布局this.sizes = {width: this.$parent.$el.clientWidth - 50 + "px",height: this.$parent.$el.clientHeight - 50 + "px"};}},mounted() {this.closeWindow();this.swfHeight = document.getElementById("video-frame").offsetHeight;this.swfWidth = document.getElementById("video-frame").offsetWidth;// 获取海康威视安防配置参数this.getInitParams();// 监听resize事件，使插件窗口尺寸跟随DIV窗口变化$(window).resize(() => {if (this.oWebControl != null) {this.oWebControl.JS_Resize(this.swfWidth, this.swfHeight);this.setWndCover();}});// 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动$(window).scroll(() => {if (this.oWebControl != null) {this.oWebControl.JS_Resize(this.swfWidth, this.swfHeight);this.setWndCover();}});// 监听vxe-modal 拖拽完成事件 仅在监控设备管理页面if (this.index !== "realTime") {$(window).mouseup($evt => {if ($evt.target.className.indexOf("vxe-modal--header") != -1) {// vxe modal 表头拖拽 动态调整插件位置console.log("%c海康插件=>","color:#00e676;","Modal被拖拽,动态调整插件位置");if (this.oWebControl != null) {this.oWebControl.JS_Resize(this.swfWidth, this.swfHeight);this.setWndCover();}}});}},beforeDestroy() {$(window).off(); //关闭插件之前 移除jquery所有绑定事件this.closeWindow(); //关闭插件},
};
</script><style lang="scss" scoped>
.root-haikang-video {.playWnd {width: 100%;height: 100%;}
}
</style>

组件调用


//展示所有监控时<haikangtype="live"index="realTime":code="codeList":pluginIsInit.sync="pluginIsInit"/>
//单点监控 直播 或者回放<haikang:type="type":index="index":code="params.pointInterCode":time="timeRange"/>

芜湖起飞~

vue-element-admin 集成海康威视监控插件VideoWebPlugin相关推荐

Vue Element Admin 使用mock模块模拟数据
Mock 数据是前端开发过程中必不可少的一环,是分离前后端开发的关键链路.通过预先跟服务器端约定好的接口,模拟请求数据甚至逻辑,能够让前端开发更加独立自主,不会被服务端的开发所阻塞. vue-elem ...
vue+element+admin（初始化项目）
2022.10.17我接触到了vue+element+admin的使用,首先要安装node.jshttps://nodejs.org/zh-cn/download/.和githttps://git-s ...
vue element admin登录方式切换（密码登录或短信登录）
显示结果: 具体代码可以根据vue element admin源码进行更改,下面是页面代码 <el-form ref="loginForm" :model="log ...
Android 集成海康威视监控 SDK，实现监控录像的查看
Android 集成海康威视监控 SDK,实现监控录像的查看配置切换Android studio 到project目录下,分别将jar包与armeabi包复制进去lib文件夹下: 设置app bu ...
vue前端对接Hikvision海康威视监控，pc端对接，插件模式
一.简介 1.运行环境 Win7 32/64 位操作系统:32 位 IE10(兼容 64 位 IE10,64 位 IE10 环境下浏览器会默认启动 32 位 IE).32/64 位 IE11.32/6 ...
后端使用SpringBoot和Jwt工具与Redis数据库+前端Vue Element Admin实现用户携带token的登录功能案例
登录功能描述: 前端输入对应的用户信息 ,在用户输入邮箱后点击发送按钮给邮箱发送验证码,拿取到验证填完之后,点击登录按钮给后端发送请求 ,后端接收到请求之后 ,第一步校验验证码,第二步校验用户名和密 ...
Vue Element Admin 用mock模块模拟数据
步骤简单一在 src/api/charts 中添加接口 , 方法名为 getindexMock import request from '@/utils/request'export func ...
vue element admin中发送请求和设置loading效果
需求:在表格数据加载完成前进入loading显示数据正在加载,数据加载完成后取消loading效果,axios的超时处理和异常的处理之后进行取消loading效果. 小编接下来就根据这个这个需求进行分 ...
Vue Element Admin 添加侧边栏以及他的页面
1. 在 /src/views/ 下添加需要的页面 2. 配置路由器 router 中的路由表 routes,分为 constantRoutes 和 asyncRoutes. 将路由的配置信息添加进路 ...

vue-element-admin 集成海康威视监控插件VideoWebPlugin

项目场景：

演示：

页面监控

弹出层监控

准备

方案

组件调用

vue-element-admin 集成海康威视监控插件VideoWebPlugin相关推荐

最新文章

热门文章