最近项目需要在网页上预览海康的摄像头实时画面，遇到一些问题和踩了一些坑，在这里梳理一下。
我本次前端开发使用的是vue-admin-template。
一、上来第一步，先不要着急开发，先看看公司的摄像头是否支持websock取流！。
这是海康客服发来的图片，可能页面显示不太一样，但是 【启用WebSocket】 这一项必须要有，如果没有，那就放弃使用web无插件开发包吧。
还有一种方法，就是启动开发包的demo，登录自己的摄像头，看看能不能预览
二、去官网下载海康的web无插件开发包
如果没账号就注册一个，免费下载，不需要在其他地方付费买
三、项目中引入开发包
这是下载的开发包，我们需要的是codebase里边的所有文件以及外侧的jquery-1.7.1.min.js（由于demo里引用的是这个jquery，所以我为了避免一些不必要的版本问题，也引入的该文件）。有时间的可以多研究下cn目录下的demo，对开发有帮助。
在public目录下，引入文件
index.html 中引入
由于web无插件开发包使用的是nginx代理服务器，暂未研究node怎么实现，所以用的比较繁琐的方式：将开发包的nginx1.10.2放在自己项目的同级目录下，项目频繁打包调试。
目录结构
配置nginx的config本机地址和端口，root指向vue的打包文件dist
自此可以开始我们的开发了。
四、配置自己的webVideo.js和html（该文件参考了很多博友的文档，在此表示感谢）
在src/assets下，新建webVideo.js
文档最后附上了这个文档的全部内容，需要的可以自行复制
vue文件按需配置
注意点：
1. id="divPlugin" 必须设置，而且要有明确的宽高
2. beforeDestroy() { this.stopVideoPlay() },必须要退出预览，否则页面切换会出问题。
<template> <div class="video-play"> <div id="divPlugin" class="divPlugin" style="width: 454px;height: 315px" /> </div> </template> <script> import { WebVideo } from '@/assets/js/webVideo.js' export default { name: 'VideoPlay', // mixins: [resize], data() { return { webVideo: '', hkvInfo: { ip: '192.168.1.68', username: 'admin', password: '1234QWER' } } }, created() { }, mounted() { this.initVideoPlay() }, beforeDestroy() { this.stopVideoPlay() }, methods: { initVideoPlay() { this.webVideo = new WebVideo() this.$nextTick(() => { this.webVideo.init(this.hkvInfo.ip, this.hkvInfo.username, this.hkvInfo.password) this.webVideo.clickLogin() }) }, stopVideoPlay() { this.webVideo.clickStopRealPlay() this.webVideo.clickLogout() } } } </script> <style lang="scss" scope> @import "~@/styles/variables.scss"; .video-play{ width: 100%; height: 55%; background: url("~@/assets/img/videoBorder.png") no-repeat 0 0; background-size: 100% 100%; position: relative; margin-bottom: 20px; padding: 0 10px; } </style>
最终看到摄像头画面了！
附：webVideo.js
// 初始化插件
export function WebVideo() {
this.g_iWndIndex = 0
this.szDeviceIdentify = ''
this.deviceport = ''
this.rtspPort = ''
this.channels = []
this.ip = ''
this.port = '80'
this.username = ''
this.password = ''
this.init = function(ip, username, password) {
this.ip = ip
this.username = username
this.password = password
// var self = this
// 检查插件是否已经安装过
// var iRet = WebVideoCtrl.I_CheckPluginInstall();
// if (-1 == iRet) {
// alert("您还未安装过插件，双击开发包目录里的WebComponentsKit.exe安装！");
// return;
// }
// 初始化插件参数及插入插件
WebVideoCtrl.I_InitPlugin(454, 315, {
szColorProperty: 'plugin-background:#102749; sub-background:#102749; sub-border:#18293c; sub-border-select:red',
bWndFull: true, // 全屏
// iPackageType: 2,
iWndowType: 1, //分屏
bNoPlugin: true, // 支持无插件
cbInitPluginComplete: function () {
WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
}
});
}
// 登录
this.clickLogin = function () {
var self = this
if ("" == self.ip || "" == self.port) {
return;
}
self.szDeviceIdentify = self.ip + "_" + self.port;
WebVideoCtrl.I_Login(self.ip, 1, self.port, self.username, self.password, {
success: function (xmlDoc) {
setTimeout(function () {
console.log('登录成功');
self.getChannelInfo();
self.getDevicePort();
}, 10);
setTimeout(function() {
self.clickStartRealPlay()
}, 500)
},
error: function (status, xmlDoc) {
console.log('登录失败');
}
});
}
// 退出
this.clickLogout = function() {
var self = this
self.channels = []
if (null == self.szDeviceIdentify) {
return;
}
var iRet = WebVideoCtrl.I_Logout(self.szDeviceIdentify);
if (0 == iRet) {
self.getChannelInfo();
self.getDevicePort();
}
}
// 获取通道
this.getChannelInfo = function() {
var self = this
self.channels = []
if (null == self.szDeviceIdentify) {
return;
}
// 模拟通道
WebVideoCtrl.I_GetAnalogChannelInfo(self.szDeviceIdentify, {
async: false,
success: function (xmlDoc) {
var oChannels = $(xmlDoc).find("VideoInputChannel");
$.each(oChannels, function (i) {
var id = $(this).find("id").eq(0).text(),
name = $(this).find("name").eq(0).text();
if ("" == name) {
name = "Camera " + (i < 9 ? "0" + (i + 1) : (i + 1));
}
self.channels.push({
id: id,
name: name
})
});
console.log('获取模拟通道号成功')
},
error: function (status, xmlDoc) {
console.log('获取模拟通道号失败')
}
});
}
// 获取端口
this.getDevicePort = function() {
var self = this
if (null == self.szDeviceIdentify) {
return;
}
var oPort = WebVideoCtrl.I_GetDevicePort(self.szDeviceIdentify);
if (oPort != null) {
self.deviceport = oPort.iDevicePort;
self.rtspPort = oPort.iRtspPort;
}
console.log('获取端口号成功')
}
// 开始预览
this.clickStartRealPlay = function() {
var self = this
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex),
iChannelID = self.channels[0].id
if (null == self.szDeviceIdentify) {
return;
}
var startRealPlay = function () {
WebVideoCtrl.I_StartRealPlay(self.szDeviceIdentify, {
iChannelID: iChannelID,
bZeroChannel: false,
iStreamType: 2,
success: function () {
console.log('预览成功')
},
error: function (status, xmlDoc) {
if (403 === status) {
console.log('设备不支持Websocket取流')
} else {
console.log('预览失败')
}
}
});
};
if (oWndInfo != null) {// 已经在播放了，先停止
WebVideoCtrl.I_Stop({
success: function () {
startRealPlay();
}
});
} else {
startRealPlay();
}
}
// 停止预览
this.clickStopRealPlay = function() {
var self = this
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex)
if (oWndInfo != null) {
WebVideoCtrl.I_Stop({
success: function () {
console.log('停止预览成功')
},
error: function () {
console.log('停止预览失败')
}
});
}
}
}版权声明：本文为LAHM8963原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。