vue项目集成海康监控摄像头和总结下遇到的坑（不导入jquery）
文章目录引用情况一、首先要使用js处理方法1. 安装2. 处理js文件二、如何使用1.vue页面引入2.项目的运行入口index.html导入组件3.页面例子遇到的坑总结引用情况项目要集成海康摄像头插件，经过公司的人协助整理，把海康摄像头集成进了vue项目，特此记录一、首先要使用js处理方法1. 安装我把我获取的的文件（或者说是插件）进入bin文件安装好插件，这是一定要安装的东西安装一次就可以一直
·
引用情况
项目要集成海康摄像头插件，经过公司的人协助整理，把海康摄像头集成进了vue项目，特此记录
一、首先要使用js处理方法
1. 安装
我把我获取的的文件（或者说是插件）
进入bin文件安装好插件，这是一定要安装的东西
安装一次就可以一直使用了，然后打开demo，有这些东西
2. 处理js文件
有三个最要的js文件，如果你的项目导入了jquery，就万事大吉，不导入的话，可以参考下我的这个方法
其中jsWebControl-1.0.0.min.js是海康摄像头的处理方法，是一定要的，然后jsencrypt.min.js是一个加密的方法，是可以npm的，附上npm语句
npm install jsencrypt -s
为什么要npm，是因为公司大佬觉得npm方式比较好，但是也是可以导入文件夹里的js文件，毕竟这东西离我现在写博客的时间，已经有3年没更新了
二、如何使用
1.vue页面引入
import JSEncrypt from 'jsencrypt'//我使用的是npm方式，所以加密要这样子使用
2.项目的运行入口index.html导入组件
至于如何找到index.html就不说了
截个图
<script src="导入你的jsWebControl的地址"></script>//
3.页面例子
<template>
<section>
<!--预览界面-->
<div id="operate" class="operate">
<div class="module">
<div class="item"><span class="label">监控点编号：</span><input v-model="cameraIndexCode" type="text" value=""></div>
<div class="item" style="margin-top: 20px;margin-left: -20px;">
<button style="width:20px;padding:0;margin:0;" id="startPreview" @click="startClickFn" class="btn">预览</button>
<button style="width:90px;padding:0;margin:0;" @click="stopClickFn" class="btn">停止全部预览</button>
</div>
</div>
</div>
<!--视频窗口展示-->
<div id="playWnd" class="playWnd" style="left: 109px; top: 133px;"></div>
</section>
</template>
<script>
import JSEncrypt from 'jsencrypt'
export default {
name: 'PlayBackPage',
data() {
return {
oWebControl: undefined,
initCount: 0,
pubKey: '',
cameraIndexCode: undefined
}
},
methods: {
// 推送消息
cbIntegrationCallBack(oData) {
console.log(oData);
// showCBInfo(JSON.stringify(oData.responseMsg));
},
initPlugin () {
let that = this
this.oWebControl = new WebControl({
szPluginContainer: "playWnd", // 指定容器id
iServicePortStart: 15900, // 指定起止端口号，建议使用该值
iServicePortEnd: 15909,
szClassId:"23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
cbConnectSuccess: function () { // 创建WebControl实例成功
that.oWebControl.JS_StartService("window", { // WebControl实例创建成功后需要启动服务
dllPath: "./VideoPluginConnect.dll" // 值"./VideoPluginConnect.dll"写死
}).then(function () { // 启动插件服务成功
console.log('成功')
that.oWebControl.JS_SetWindowControlCallback({ // 设置消息回调
cbIntegrationCallBack: that.cbIntegrationCallBack
});
that.oWebControl.JS_CreateWnd("playWnd", 1000, 600).then(function () { //JS_CreateWnd创建视频播放窗口，宽高可设定
console.log('成功222',that)
that.init(); // 创建播放实例成功后初始化
});
}, function () { // 启动插件服务失败
console.log('失败')
});
},
cbConnectError: function () { // 创建WebControl实例失败
console.log(that,'that');
that.oWebControl = null;
that.$message.error("插件未启动，正在尝试启动，请稍候...")
WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序
that.initCount ++;
if (that.initCount < 3) {
setTimeout(function () {
that.initPlugin();
}, 3000)
} else {
that.$message.error("插件启动失败，请检查插件是否安装！")
}
},
cbConnectClose: function (bNormalClose) {
// 异常断开：bNormalClose = false
// JS_Disconnect正常断开：bNormalClose = true
console.log("cbConnectClose");
that.oWebControl = null;
}
});
},
//初始化
init()
{
let that = this
this.getPubKey(function () {
// 请自行修改以下变量值
var appkey = ""; //提供的appkey，必填
var secret = that.setEncrypt(""); //提供的secret，必填
var ip = ""; //IP地址，必填
var playMode = 0; //初始播放模式：0-预览，1-回放
var port = 443; //综合安防管理平台端口，若启用HTTPS协议，默认443
var snapDir = "D:\\SnapDir"; //抓图存储路径
var videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
var layout = "1x1"; //playMode指定模式的布局
var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
var encryptedFields = 'secret'; //加密字段，默认加密领域为secret
var showToolbar = 1; //是否显示工具栏，0-不显示，非0-显示
var showSmart = 1; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
var buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮
// 请自行修改以上变量值
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: buttonIDs //自定义工具条按钮
})
}).then(function (oData) {
//that.oWebControl.JS_Resize(1000, 600); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
});
});
},
//获取公钥
getPubKey (callback) {
let that = this
this.oWebControl.JS_RequestInterface({
funcName: "getRSAPubKey",
argument: JSON.stringify({
keyLength: 1024
})
}).then(function (oData) {
console.log(oData);
if (oData.responseMsg.data) {
that.pubKey = oData.responseMsg.data;
callback()
}
})
},
//RSA加密
setEncrypt (value) {
var encrypt = new JSEncrypt();
encrypt.setPublicKey(this.pubKey);
console.log(encrypt.encrypt(value),加密后返回的值)
return encrypt.encrypt(value);
},
//视频预览功能
startClickFn() {
var cameraIndexCode = this.cameraIndexCode //获取输入的监控点编号值，必填
var streamMode = 0; //主子码流标识：0-主码流，1-子码流
var transMode = 1; //传输协议：0-UDP，1-TCP
var gpuMode = 0; //是否启用GPU硬解，0-不启用，1-启用
var wndId = -1; //播放窗口序号（在2x2以上布局下可指定播放窗口）
this.oWebControl.JS_RequestInterface({
funcName: "startPreview",
argument: JSON.stringify({
cameraIndexCode:cameraIndexCode, //监控点编号
streamMode: streamMode, //主子码流标识
transMode: transMode, //传输协议
gpuMode: gpuMode, //是否开启GPU硬解
wndId:wndId //可指定播放窗口
})
})
},
//停止全部预览
stopClickFn() {
if (this.oWebControl && this.oWebControl.JS_RequestInterface) {
this.oWebControl.JS_RequestInterface({
funcName: "stopAllPreview"
})
}
}
},
mounted() {
this.initPlugin()
},
destroyed() {
if (this.oWebControl != null){
this.oWebControl.JS_HideWnd(); // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
this.oWebControl.JS_Disconnect().then(function(){ // 断开与插件服务连接成功
},
function() { // 断开与插件服务连接失败
});
}
}
}
</script>
<style scoped>
.playWnd {
margin: 30px 0 0 400px;
width: 1000px; /*播放容器的宽和高设定*/
height: 600px;
border: 1px solid red;
}
.operate {
margin-top: 24px;
}
.operate::after {
content: '';
display: block;
clear: both;
}
.module {
float: left;
width: 340px;
/*min-height: 320px;*/
margin-left: 16px;
padding: 16px 8px;
box-sizing: border-box;
border: 1px solid #e5e5e5;
}
.module .item {
margin-bottom: 4px;
}
.module input[type="text"] {
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: 100px;
margin-left: 80px;
}
</style>
遇到的坑总结
这个海康的插件呢，在html上是找不到的，css也控制不了，而且有这种情况
最后呢，我也只能做到不完全实现（仍然有可能留下边框，但是整个插件不缩小的时候不会超出游览器），首先，页面不能滚动。。。
其次，宽高动态获取，使其永远不超出游览器
可供参考，有更好的方法可以在下面跟我说说，谢谢
//div设置一个属性
<div id="playWnd" class="playWnd video-content" :style="{height: videoPlugInHeight}"></div>
//script
export default {
data() {
return {
videoPlugInWidth:undefined,
videoPlugInHeight:undefined,
}
},
mounted() {
let _this = this;//赋值vue的this
this.endTime = this.dateFormat(new Date(), "yyyy-MM-dd 23:59:59");
this.startTime = this.dateFormat(new Date(), "yyyy-MM-dd 00:00:00");
//初始化的时候给宽高
_this.videoPlugInWidth = window.innerWidth-560//动态获取监控组件能获取的宽度
_this.videoPlugInHeight = window.innerHeight-465//动态获取监控组件能获取的高度
window.onresize = ()=>{//当游览器宽高变化时
//设置录像回放时间的默认值
_this.videoPlugInWidth = window.innerWidth-560//动态获取监控组件能获取的宽度
_this.videoPlugInHeight = window.innerHeight-465//动态获取监控组件能获取的高度
//调用methods中的事件
_this.videoPlugInReSize();
}
},
destroyed() {
window.onresize = null;
},
methods:{
//当页面有这些方法时（JS_CreateWnd）赋予值
that.oWebControl.JS_CreateWnd("playWnd", that.videoPlugInWidth , that.videoPlugInHeight)
this.oWebControl.JS_Resize(this.videoPlugInWidth , this.videoPlugInHeight);
//调用方法改变
videoPlugInReSize(){
console.log(this.videoPlugInWidth , this.videoPlugInHeight);//调试显示宽高
this.oWebControl.JS_Resize(this.videoPlugInWidth , this.videoPlugInHeight);
}
}
}
前往低代码交流专区
更多推荐
5
0- 0
已为社区贡献3条内容
所有评论(0)