看到开发包之后我还是很开心的,但是没想到,从此开始踏上了踩坑之路.(坑真的是太多了!!!ToT)
文件列表
首先,codebase/transform下面有一个WebComponentsKit.exe,把它安装到电脑上.打开demo.html,登录/预览. 第一个坑来了 ,有可能会提示什么什么…我记不住了,反正就是不好用,然后呢,打开web3.0 32位的包,把这里面的WebComponentsKit.exe安装上就可以了.
准备工作Ok了! 其他的demo我就不介绍了.直接进入正题吧!
先放代码吧.新建videoTab.vue
<div class="video-center">
<div id="divPlugin" class="plugin"></div>
</div>
<script>
import {WebVideoCtrl} from '../../public/js/webVideoCtrl'
export default {
components: {},
data() {
return {
value: 1,
g_iWndIndex: 0,//当前选中的窗口
g_bPTZAuto: false,
pumpRoomName: "",
cameraArray: [],
webVideo: {},
iWidth: 800,
iHeight: 600,
iProtocol: 1,
szIP: "10.0.3.187",
szPort: "80",
szUsername: "admin",
szPassword: "1111",
iStreamType: 1,
bZeroChannel: false,
maskData: {
maskShow: false,
title: '提示',
content: '失败',
cancel: false
},
}
},
created: function () {
},
mounted: function () {
this.videoInitPlugin();
},
destroyed: function () {
for (var i = 0; i < this.cameraArray.length; i++) {
WebVideoCtrl.I_Stop({iWndIndex: i});
}
var iRet = WebVideoCtrl.I_Logout(this.szIP);
if (iRet !== 0) {
console.log("WebVideoCtrl I_Logout failed");
} else {
console.log("WebVideoCtrl I_Logout success");
}
},
methods: {
//全屏
clickFullScreen: function () {
WebVideoCtrl.I_FullScreen(true);
},
//切换
changeWndNum: function (iType) {
console.log(iType);
var iType = parseInt(iType, 10);
WebVideoCtrl.I_ChangeWndNum(iType);
},
downLoadPlugin: function () {
if (confirm(`是否下载该插件?`)) {
window.location.href = process.env.BASE_API + `/dashboard/downloadPlug`;
}
},
videoInitPlugin: function () {
// var _this = this;
var iRet = WebVideoCtrl.I_CheckPluginInstall();
if (iRet === -1) {
alert("您还未安装过插件，双击开发包目录里的WebComponentsKit.exe安装！");
this.downLoadPlugin();
return;
}
this.initPlugin()
},
initPlugin: function () {
var that = this;
WebVideoCtrl.I_InitPlugin(this.iWidth, this.iHeight, {
bWndFull: true,//是否支持单窗口双击全屏，默I_CheckPluginInstall
iWndowType: 2,
// cbSelWnd: function (xmlDoc) {
// var giWndIndex = parseInt($(xmlDoc).find("SelectWnd").eq(0).text(), 10);
// var szInfo = "当前选择的窗口编号：" + giWndIndex;
//
// console.log(szInfo);
// },
cbInitPluginComplete: function () {
WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
// 检查插件是否最新
if (WebVideoCtrl.I_CheckPluginVersion() === -1) {
alert("检测到新的插件版本，双击开发包目录里的WebComponentsKit.exe升级！");
return;
}
console.log("cameraArray length:", that.cameraArray);
for (var i = 0; i < that.cameraArray.length; i++) {
var szIP = that.cameraArray[i].ipAddr;
var cameraId = that.cameraArray[i].channelId;
WebVideoCtrl.I_Login(szIP, that.iProtocol, that.szPort, that.szUsername, that.szPassword, {
async: false,
success: function (xmlDoc) {
console.log(xmlDoc);//不能删除
// 开始预览
var szDeviceIdentify = szIP + "_" + that.szPort;
setTimeout(that.startRealPlay(szDeviceIdentify, i, 1), 500); //1为通道号, i 为窗口
},
error: function () {
console.log("login error");
}
});
}
}
});
},
startRealPlay: function (szDeviceIdentify, iWndIndex, iChannelID) {
console.log("startRealPlay: ", szDeviceIdentify, iWndIndex, iChannelID);
WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
iWndIndex: iWndIndex,
iStreamType: 1,
iChannelID: iChannelID,
bZeroChannel: false,
success: function () {
console.log("开始预览成功 ");
},
error: function (status, xmlDoc2) {
console.log(xmlDoc2)//不能删除
if (status === 403) {
console.log("szInfo 设备不支持Websocket取流！");
} else {
console.log("开始预览失败 ");
}
}
});
},
mouseDownPTZControl: function (iPTZIndex) {
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(0);
if (oWndInfo !== null) {
if (iPTZIndex === 9 && this.g_bPTZAuto) {
iPTZSpeed = 0;
} else {
this.g_bPTZAuto = false;
}
WebVideoCtrl.I_PTZControl(iPTZIndex, false, {
iPTZSpeed: 4,
success: function (xmlDoc) {
console.log(xmlDoc);
if (iPTZIndex === 9 && this.g_bPTZAuto) {
console.log(oWndInfo.szDeviceIdentify + " 停止云台成功！");
} else {
console.log(oWndInfo.szDeviceIdentify + " 开启云台成功！");
}
if (iPTZIndex === 9) {
this.g_bPTZAuto = !this.g_bPTZAuto;
}
},
error: function (status, xmlDoc) {
console.log(oWndInfo.szDeviceIdentify + " 开启云台失败！", status, xmlDoc);
}
});
}
},
mouseUpPTZControl: function () {
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(this.g_iWndIndex);
if (oWndInfo !== null) {
WebVideoCtrl.I_PTZControl(1, true, {
success: function (xmlDoc) {
console.log(oWndInfo.szDeviceIdentify + " 停止云台成功！", xmlDoc)
},
error: function (status, xmlDoc) {
console.log(oWndInfo.szDeviceIdentify + " 停止云台失败！", status, xmlDoc);
}
});
}
}
}
}
</script>
然后就发现,会报错! 因为要在index.html中引入webVideoCtrl.js文件,但是海康威视web3.0的webVideoCtrl.js直接引入会报错,里面的内容需要做更改.然后发现还会报错
然后发现文件要在body后面引入…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>my-project</title>
</head>
<body>
<noscript>
<strong>We're sorry but my-project doesn't work properly without JavaScript enabled. Please enable it to
continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
<script type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="./js/webVideoCtrl.js"></script>
</html>
对了,还有个错误
这些报错弄得我是一脸蒙蔽啊.后来终于找到方法,在 babel.config.js文件也需要改,
module.exports = {
"presets": [
"@vue/app"
],
"ignore": [
"public/js/webVideoCtrl.js"
]
}
现在就差不多了 监控就可以显示出来了,监控截图就不晒出来,公司不允许…
因为项目已经做完有一段时间,能想起来的也就这么多了,如果有问题,可以问我.我知道的一定告诉O
还有最后的一句忠告,多看看官方文档…很有用 参数一定要弄明白…
运行环境需要了解一下
操作系统：
Windows XP、Windows7、Windows8、Windows8.1
浏览器：
IE8~ IE11、Chrome31+、Firefox35+，32 位浏览器
IE8~ IE11、Chrome31~ Chrome44、Firefox35~ Firefox51，64 位浏览器
就这么些吧,以后再补充…
最近好多人都私信评论问我一些问题,因为最近在做其他项目 时间很紧张,这是你们问的最多的webVideoCtrl.js文件,我放上来了 希望会帮你到你们!
webVideoCtrl.js
webVideoCtrl.js