vue实现海康实时监控代码详情
第一步:需要先下载 海康 的运行包,并在HTML中引入:
第二步:在相应的页面中开始编写,具体代码如下:
HTML部分
-
-
<template>
-
<el-container>
-
<el-aside width="300px">
-
<el-tree
-
node-key="id"
-
:data="treeData"
-
:props="defaultProps"
-
style="min-height: 580px"
-
@node-click="handleNodeClick"
-
/>
-
</el-aside>
-
<el-main>
-
<div ref="playWndBox">
-
<!-- 视频数据站位 -->
-
<div
-
id="playWnd"
-
class="playWnd"
-
:style="{
-
height: playWndHeight 'px',
-
width: playWndWidth 'px',
-
}"
-
/>
-
</div>
-
</el-main>
-
</el-container>
-
</template>
JS部分
-
<script>
-
import { getVideoRegionTree, getVideoInfo } from "@/api/realTimeInformation";
-
export default {
-
data() {
-
return {
-
treeData: [],
-
defaultProps: {
-
children: "children",
-
label: "name",
-
},
-
// 视频盒子的高度
-
playWndHeight: "",
-
// 视频盒子的宽度
-
playWndWidth: "",
-
oWebControl: null,
-
initCount: 0,
-
pubKey: "",
-
cameraIndexCode: "", // 监控点编号
-
objData: {
-
appkey: "24057559",
-
ip: "172.16.100.77",
-
port: 443,
-
playMode: 0, // 0 预览 1回放
-
layout: "2x2", //页面展示的模块数【16】
-
secret: "wekC84ynkwyvLbNUnr20",
-
},
-
};
-
},
-
mounted() {
-
this.getTreeList();
-
// 首次加载时的到父容器的高度
-
this.playWndHeight = this.$refs.playWndBox.clientHeight;
-
// 首次加载时的到父容器的宽度
-
this.playWndWidth = this.$refs.playWndBox.clientWidth - 140;
-
// 初始化摄像头
-
this.$nextTick(() => {
-
this.initPlugin();
-
});
-
// 监听resize事件,使插件窗口尺寸跟随DIV窗口变化
-
window.addEventListener("resize", () => {
-
console.log(
-
this.$refs.playWndBox.clientHeight,
-
this.$refs.playWndBox.clientWidth
-
);
-
if (this.oWebControl != null) {
-
this.oWebControl.JS_Resize(
-
this.$refs.playWndBox.clientWidth - 140,
-
this.$refs.playWndBox.clientHeight
-
);
-
}
-
});
-
},
-
-
methods: {
-
// 获取左侧树列表
-
getTreeList() {
-
getVideoRegionTree().then((res) => {
-
this.treeData = res.data;
-
});
-
},
-
handleNodeClick(data) {
-
if (!data.children) {
-
getVideoInfo({ videoId: data.id })
-
.then((res) => {
-
this.previewVideo(res.data);
-
})
-
.catch((err) => {
-
console.log(err, "-------");
-
});
-
}
-
},
-
-
// 创建播放实例
-
initPlugin() {
-
let that = this;
-
this.oWebControl = null;
-
that.oWebControl = new WebControl({
-
szPluginContainer: "playWnd", // 指定容器id
-
iServicePortStart: 15900, // 指定起止端口号,建议使用该值
-
iServicePortEnd: 15909,
-
szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
-
cbConnectSuccess: () => {
-
// 创建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", 1000, 600)
-
.then(function () {
-
// 创建播放实例成功后初始化
-
that.init();
-
});
-
},
-
function () {
-
// 启动插件服务失败
-
}
-
);
-
},
-
// 创建WebControl实例失败
-
cbConnectError: function () {
-
that.oWebControl = null;
-
that.$message.warning("插件未启动,正在尝试启动,请稍候...");
-
// 程序未启动时执行error函数,采用wakeup来启动程序
-
window.WebControl.JS_WakeUp("VideoWebPlugin://");
-
that.initCount ;
-
if (that.initCount < 3) {
-
setTimeout(function () {
-
that.initPlugin();
-
}, 3000);
-
} else {
-
that.$message.warning("插件启动失败,请检查插件是否安装!");
-
}
-
},
-
cbConnectClose: () => {
-
// 异常断开:bNormalClose = false
-
// JS_Disconnect正常断开:bNormalClose = true
-
console.log("cbConnectClose");
-
that.oWebControl = null;
-
},
-
});
-
},
-
// 初始化
-
init(callback) {
-
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协议,默认443
-
let snapDir = "D:\\SnapDir"; //抓图存储路径
-
let videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
-
let layout = that.objData.layout; //playMode指定模式的布局
-
let enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互,这里总是填1
-
let encryptedFields = "secret"; //加密字段,默认加密领域为secret
-
let showToolbar = 1; //是否显示工具栏,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网关提供的appkey
-
secret: secret, //API网关提供的secret
-
ip: 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()
-
});
-
});
-
},
-
// 获取公钥
-
getPubKey(callback) {
-
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") {
-
console.log(
-
type,
-
type,
-
this.dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss")
-
);
-
} else {
-
console.log(
-
type,
-
type,
-
this.dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss")
-
);
-
}
-
},
-
// 视频预览功能
-
previewVideo(data) {
-
let that = this;
-
let cameraIndexCode = data.cameraIndexCode; // 获取输入的监控点编号值,必填
-
let streamMode = 0; // 主子码流标识:0-主码流,1-子码流
-
let transMode = 0; // 传输协议:0-UDP,1-TCP
-
let gpuMode = 0; // 是否启用GPU硬解,0-不启用,1-启用
-
let wndId = -1; // 播放窗口序号(在2x2以上布局下可指定播放窗口)
-
console.log(cameraIndexCode, "-------cameraIndexCode-");
-
-
that.oWebControl.JS_RequestInterface({
-
funcName: "startPreview",
-
argument: JSON.stringify({
-
cameraIndexCode: cameraIndexCode.trim(), // 监控点编号
-
streamMode: streamMode, // 主子码流标识
-
transMode: transMode, // 传输协议
-
gpuMode: gpuMode, // 是否开启GPU硬解
-
wndId: wndId, // 可指定播放窗口
-
}),
-
});
-
},
-
// 停止全部预览
-
stopAllPreview() {
-
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;
-
},
-
},
-
// 组件销毁后
-
destroyed() {
-
if (this.oWebControl != null) {
-
// 先让窗口隐藏,规避可能的插件窗口滞后于浏览器消失问题
-
this.oWebControl.JS_HideWnd();
-
// 销毁当前播放的视频
-
this.oWebControl.JS_RequestInterface({ funcName: "destroyWnd" });
-
// 断开与插件服务连接
-
this.oWebControl.JS_Disconnect();
-
}
-
},
-
};
-
</script>
css样式部分如下
-
<style lang="scss" scoped>
-
.playWnd {
-
margin: 30px 0 0 50px;
-
width: 900px;
-
height: 500px;
-
border: 1px solid red;
-
}
-
.cbInfoDiv {
-
float: left;
-
width: 360px;
-
margin-left: 16px;
-
border: 1px solid #7f9db9;
-
}
-
.cbInfo {
-
height: 200px;
-
padding: 5px;
-
border: 1px solid #7f9db9;
-
word-break: break-all;
-
overflow: scroll/auto;
-
}
-
.operate {
-
margin-top: 24px;
-
}
-
.operate::after {
-
content: "";
-
display: block;
-
clear: both;
-
}
-
.operate .btns {
-
height: 32px;
-
}
-
.module {
-
float: left;
-
width: 120px;
-
min-height: 290px;
-
margin-left: 10px;
-
padding: 16px 8px;
-
box-sizing: border-box;
-
border: 1px solid #e5e5e5;
-
}
-
.module .item {
-
margin-bottom: 4px;
-
}
-
.module .label {
-
width: 150px;
-
display: inline-block;
-
vertical-align: middle;
-
margin-right: 8px;
-
text-align: right;
-
}
-
.module input[type="text"],
-
.module select {
-
box-sizing: border-box;
-
display: inline-block;
-
vertical-align: middle;
-
margin-left: 0;
-
width: 150px;
-
min-height: 20px;
-
}
-
.module .btn {
-
min-width: 80px;
-
min-height: 24px;
-
margin-top: 16px;
-
margin-left: 158px;
-
}
-
.el-aside {
-
margin: 0px;
-
height: 84vh;
-
color: #333;
-
background-color: #d3dce6;
-
}
-
.el-main {
-
background-color: #e9eef3;
-
color: #333;
-
text-align: center;
-
}
-
</style>
这里需要下载海康的插件才可以查看
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhggbcjj
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01