Vue+TS 开发 海康威视 Web3.0控件
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Vue+TS 开发 海康威视 Web3.0控件，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4928字，纯文字阅读大概需要8分钟。
内容图文
最近在给公司平台写视频监控的页面需求，于是接触到了海康威视的视频控件，网上查阅一番资料后，发现有很多大佬们给出了简易的海康视频控件的上手方法，但是发现仍然有很多地方没有总结到，于是在这里对我个人对海康控件开发的经验做出一点总结。话不多说现在开始。
1|0运行环境与设备支持
海康控件开发包链接：
32位浏览器：https://pan.baidu.com/s/160ia40-hlFd1MynbxSBI2Q 密码：d3pf
64位浏览器：https://pan.baidu.com/s/1TbNHqfZSw9PPS4Z-xYvcoQ 密码：38qq
浏览器等相关环境看开发包内的官方文档，主流浏览器基本不支持
（ps：经过测试，win10下64位浏览器安装64位插件基本都有问题，只在IE11(win10 64自带应该是64位，但插件需要32位)和360(32位)切换至IE11内核 安装32位插件的情况可以使用；
但是IE有另一个问题，本地开发环境正常，测试环境会卡死，360测试环境正常）
2|0Demo测试
建议先使用demo进行本地测试显示是否正常，一般情况下浏览器支持就可以正常显示图像了，如果登录成功但点击预览没有图像，则可能是摄像头的端口未开放或码率设置不正确，demo测试正常后就可以搬运到Vue+TS项目了
3|0迁移
- 官方demo功能比较复杂，实际项目需要的只是在网页显示实时监控，所以很多代码进行简化
1.将官方js文件放至Public文件夹（编译的出口文件），在index.html，将官方的webVideoCtrl.js文件导入页面（PS:记得要jsPlugin-1.0.0.min.js和webVideoCtrl.js两个文件都放入文件夹，webVideoCtrl.js会引用jsPlugin-1.0.0.min.js）
<body> <div id="app"></div> <!-- built files will be auto injected --> <script src="./static/webVideoCtrl.js"></script> </body>
2.在vue新建webVideo.ts视频配置文件作为类导出，
// 初始化插件
export default class WebVideo {
g_iWndIndex: number = 0;
szDeviceIdentify: string = '';
deviceport: string = '';
channels: any;
ip: string = '192.168.1.1';
port: string = '80';
username: string = 'admin';
password: string = 'G123456';
init() {
// 检查插件是否已经安装过
let iRet = WebVideoCtrl.I_CheckPluginInstall();
console.log(iRet);
if (-1 == iRet) {
alert('您还未安装过插件，双击开发包目录里的WebComponentsKit.exe安装！');
return;
}
// 初始化插件参数及插入插件
WebVideoCtrl.I_InitPlugin('100%', '100%', {
bWndFull: true,
iPackageType: 2,
iWndowType: 1,
cbInitPluginComplete() {
WebVideoCtrl.I_InsertOBJECTPlugin('divPlugin');
}
});
}
// 登录
clickLogin() {
if ('' == this.ip || '' == this.port) {
return;
}
this.szDeviceIdentify = this.ip + '_' + this.port;
WebVideoCtrl.I_Login(this.ip, 1, this.port, this.username, this.password, {
success: (xmlDoc: any) => {
setTimeout(() => {
this.getChannelInfo();
this.getDevicePort();
}, 10);
setTimeout(() => {
this.clickStartRealPlay();
}, 500);
console.log('登录成功');
},
error: function(status: any, xmlDoc: any) {
console.log('登录失败', status, xmlDoc);
}
});
}
// 退出
clickLogout() {
if (null == this.szDeviceIdentify) {
return;
}
let iRet = WebVideoCtrl.I_Logout(this.szDeviceIdentify);
if (0 == iRet) {
this.getChannelInfo();
this.getDevicePort();
}
}
// 获取通道
getChannelInfo() {
this.channels = [];
if (null == this.szDeviceIdentify) {
return;
}
// 模拟通道
WebVideoCtrl.I_GetAnalogChannelInfo(this.szDeviceIdentify, {
async: false,
success: (xmlDoc: any) => {
let oChannels = xmlDoc.getElementsByTagName('VideoInputChannel');
console.log('获取模拟通道成功', xmlDoc);
for (let i = 0; i < oChannels.length; i++) {
let id = oChannels[i].querySelector('id').firstChild.nodeValue;
let name = oChannels[i].querySelector('name').firstChild.nodeValue;
if ('' == name) {
name = 'Camera ' + (i < 9 ? '0' + (i + 1) : i + 1);
}
this.channels.push({
id: id,
name: name
});
}
},
error: function(status: any, xmlDoc: any) {
console.log('获取模拟通道失败', status);
}
});
}
// 获取端口
getDevicePort() {
if (null === this.szDeviceIdentify) {
return;
}
let oPort = WebVideoCtrl.I_GetDevicePort(this.szDeviceIdentify);
if (oPort != null) {
this.deviceport = oPort.iDevicePort;
this.deviceport = oPort.iRtspPort;
}
console.log('端口:', oPort);
}
// 开始预览
clickStartRealPlay() {
let oWndInfo = WebVideoCtrl.I_GetWindowStatus(this.g_iWndIndex),
iChannelID = +this.channels[0].id;
if (null == this.szDeviceIdentify) {
return;
}
const startRealPlay = () => {
WebVideoCtrl.I_StartRealPlay(this.szDeviceIdentify, {
iRtspPort: this.deviceport,
iStreamType: 1,
iChannelID: iChannelID,
bZeroChannel: false,
success: (status: any) => {
console.log('预览成功', status);
},
error: (status: any, xmlDoc: any) => {
console.log('预览失败', status);
if (403 === status) {
} else {
}
}
});
};
if (oWndInfo != null) {
// 已经在播放了，先停止
WebVideoCtrl.I_Stop({
success: function() {
startRealPlay();
}
});
} else {
startRealPlay();
}
}
// 停止预览
clickStopRealPlay() {
let oWndInfo = WebVideoCtrl.I_GetWindowStatus(this.g_iWndIndex);
if (oWndInfo != null) {
WebVideoCtrl.I_Stop({
success: function() {
console.log('停止播放成功');
},
error: function() {
console.log('停止播放失败');
}
});
}
}
}
可能会出现WebVideoCtrl 报错提示不存在此模块，需要在shims-vue.d.ts（Vue-cli3以上创建TS的Vue项目会在src下自动生成此文件）文件内定义WebVideoCtrl 模块
declare var WebVideoCtrl: any;
3.做完以上操作后，只需要在.vue页面导入自定义配置的webVideo.ts文件并进行初始化即可
import WebVideo from "@/config/webVideo";
let webVideo: any;
mounted() {
webVideo = new WebVideo();
}
// 在要进行播放的函数进行初始化并登陆预览
webVideo.init();
webVideo.clickLogin();
内容总结
以上是互联网集市为您收集整理的Vue+TS 开发 海康威视 Web3.0控件全部内容，希望文章能够帮你解决Vue+TS 开发 海康威视 Web3.0控件所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。