哈喽哈！我是小王子这次分享一下使用海康相机中遇到的一坑坑，唉，都是泪在不言中，这次用的vue2+海康插件
一、上来第一步，先不要着急开发，先看看公司的摄像头是否支持websock取流！。
自己看下支不支持，然后这一部分还和那个服务器有关有的服务器不接受海康插件的推流，很奇怪
二、去官网下载海康的web无插件开发包
如果没账号就注册一个，免费下载，不需要在其他地方付费买，这个包一定要会使用nginx，因为必须要使用代理才可以。
三、项目中引入开发包
这是下载的开发包，我们需要的是codebase里边的所有文件以及外侧的jquery-1.7.1.min.js（由于demo里引用的是这个jquery，所以我为了避免一些不必要的版本问题，也引入的该文件）。有时间的可以多研究下cn目录下的demo，对开发有帮助。上一层的文件有nginx的包可以直接使用，具体的nginx配置请查看nginx里面的nginx.conf
在静态资源目录下，引入文件
index.html 中引入
配置nginx的config本机地址和端口，root指向vue的打包文件dist
四、配置自己的webVideo.js和html（该文件参考了很多博友的文档，在此表示感谢）
在src/assets下，新建webVideo.js
文档最后附上了这个文档的全部内容，需要的可以自行复制
vue文件按需配置
注意点：
- 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('停止预览失败')
}
});
}
}
}
- 这是使用nvr录像机时用的，要使用数字通道
// 初始化插件
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.channel = 0;
this.init = function(id, channel, ip, username, password) {
this.ip = ip;
this.channel = Number(channel);
this.g_iWndIndex = Number(channel);
this.username = username;
this.password = password;
// var self = this
// 检查插件是否已经安装过
// var iRet = WebVideoCtrl.I_CheckPluginInstall();
// if (-1 == iRet) {
// alert("您还未安装过插件，双击开发包目录里的WebComponentsKit.exe安装！");
// return;
// }
// 初始化插件参数及插入插件
WebVideoCtrl.I_InitPlugin(653, 272, {
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(id);
}
});
};
// 登录
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();
}, 2000);
},
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_GetDigitalChannelInfo(self.szDeviceIdentify, {
async: false,
success: function(xmlDoc) {
var oChannels = $(xmlDoc).find("InputProxyChannelStatus");
$.each(oChannels, function(i) {
var id = $(this)
.find("id")
.eq(0)
.text(),
name = $(this)
.find("name")
.eq(0)
.text(),
online = $(this)
.find("online")
.eq(0)
.text();
if ("false" == online) {
// 过滤禁用的数字通道
return true;
}
if ("" == name) {
name = "IPCamera " + (i < 9 ? "0" + (i + 1) : i + 1);
}
self.channels.push({
id: id,
name: name,
online: online
});
});
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;
console.log(self);
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex),
iChannelID = self.channels[self.channel].id;
console.log(iChannelID);
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(status, xmlDoc, "预览失败");
}
}
});
};
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("停止预览失败");
}
});
}
};
}
以上就是基本的代码部分，参考blog.csdn.net/LAHM8963/ar…
---------------------------------------------分割线--------------------------------------------
下面讲一些关于Nginx的配置选项的问题
一、进入Nginx官网，点击 download：
nginx.org/en/download… 进去后选择你需要nginx版本进行下载，一般服务器选择中间那个版本下载
Nginx官方提供了三个类型的版本：
- Mainline version：Mainline 是 Nginx 目前主力在做的版本，可以说是开发版
- Stable version：最新稳定版，生产环境上建议使用的版本
- Legacy versions：遗留的老版本的稳定版
我们选择Stable version，点击下载。
下载完成后，将Nginx压缩包移动到Linux的待安装目录中。我这里是 /server/nginx：
这个目录后面也会用到，所以你放哪里都可以只要目录对应就可以
解压安装
1.使用命令：tar -zxvf nginx-1.16.1.tar.gz 解压Nginx：
2.解压完成后，同目录下会生成Nginx的文件夹：
3.依次执行以下下命令：（这里报错的话找后端或者百度错误问题，个人建议百度因为这里问题都不一样）
cd /usr/local/nginx
./configure --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module
make
make install
4.配置nginx.conf 这里根据自己的需要去配置相关的配置，不做过多介绍
- 在以上命令运行完之后你的nginx里面会出现一个sbin文件夹，cd进去
进入 /server/nginx/sbin 目录，执行命令：./nginx 启动Nginx： 然后查看Nginx进程是否启动：
看到Nginx进程已经被启动了。
二、后记之一些简单命令
1.给文件夹加权限 sudo chmod 777 -R /server/nginx 2.停止nginx sudo nginx -s stop 3.保存文件 :wq!
