vue如何实时展示海康威视摄像头多画面？
cnblogs 2024-06-26 08:11:00 阅读 58
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
关于大屏视频监控有三种解决方案：
1.海康威视 优点：实时性强。多画面运行流畅，缺点：会覆盖在DOM最上方无法选中可能会导致样式挤压变形等样式问题
2.[flv视频流]+[nodeServer] 优点：可配置性强 缺点：服务端大流量稳定性不确定
3.rtsp视频流(默认带声音播放) 优点：插件稳定，可网页调试视频流； 缺点：需向后端发送rtsp地址
一.下载海康威视演示示例
下载解压后有使用说明和SDK使用文档非常详细，这里不做赘述。请仔细阅读。
安装插件后注意打开进程管理器查看如果未运行画面一片黑，需要到安装目录手动运行
输入用户名和密码端口号 然后登录=》开始预览即可打开监控查看了；是不是很简单
这里有很多小伙伴可能找不到IP地址，可下载局域网设备网络搜索神器
【知识储备和驱动安装】
[HCWebSDK3.3.0编程指南] (open.hikvision.com/fileserver/…)
海康威视官方的RTSP最新取流格式如下:
rtsp://用户名:密码@IP:554/Streaming/Channels/101 用户名和密码
IP就是登陆摄像头时候的IP 在浏览器直接输入192.168.1.212回车可打开该摄像头的登录页
可进行对应的设置
rtsp流地址就是rtsp://用户名:密码@192.168.1.212:554/Streaming/Channels/101
二. 测试rtsp流是否可以播放 1.实现RTSP协议推流需要做的配置 1.1关闭萤石云的接入 1.2调整视频编码为H.264 2.安装VLC播放器 在此下载 video mediaplay官网 即（VLC）
安装完成之后 打开VLC播放器
在VLC播放器中打开网络串流 输入rtsp地址
成功的话可以看到所显示的摄像头画面
RTSP流地址正确且取流成功，VLC的界面会显示监控画面。否则会报错，报错信息写在了日志里，在[工具]>[消息]里可以看到
三.函数的调用顺序
现在根据RTSP视频流 和 函数调用顺序来写代码进行实操：
1.在public中引用demo中的3个文件
这里要注意引用顺序，
2.父组件
<template>
<hkVideo :props-data="hkList.camera01" />
<hkVideo :props-data="hkList.camera02" />
</template>
import hkVideo from "../hkvideo.vue";
export default {
name: "videoBox",
components: {
hkVideo
},
data() {
return {
// 方案1
hkList: {
camera01: {
szIP: "192.168.1.218", //IP地址
szPort: "80", //端口号
szUsername: "admin",
szPassword: "123456",
iChannelID: 5,//通道ID
loadingTime: "1000",// 多视频窗口睡眠加载时长。同时多个加载会卡死或不显示
width: "420",
height: "350",
type: "camera01",
id:"divPlugin1"
},
camera02: {
szIP: "192.168.1.218", //IP地址
szPort: "80", //端口号
szUsername: "admin",
szPassword: "123456",
iChannelID: 1,
loadingTime: "5000",
width: "420",
height: "350",
type: "camera02",
id:"divPlugin2"
},
}
}
},
}
以上hkList配置中 注意 loadingTime 和 id；其中loadingTime 建议和上一个时间间隔4S以上，id是动态加载生成填充的DOM树结构； 如果间隔时间不够 或DOM的ID一样 可能出现画面加载不出来、画面覆盖重叠等情况；通过配置这2个参数可以避免 这样多个摄像头只需要 增加 hkList的配置项即可；
3.子组件：新建hkvideo.vue，并在父组件引入；
<template>
<div >
<div : ></div>
</div>
</template>
<script>
export default {
name:'hkVideo',
inheritAttrs: false,
props:{
propsData:{
type: Object || Array,
require:true
}
},
watch:{
propsData: {
deep: true,
immediate: true,
handler(newVal, oldVal) {
if(newVal){
this.camera152 = newVal
this.newId = newVal.id;
let t = newVal.loadingTime || 1000
setTimeout(() => {
this.initS();
},t)
}else{
this.camera152 = {
szIP: "192.168.1.218", //IP地址
szPort: "80", //端口号
szUsername: "admin", //用户名
szPassword: "123456", //管理员密码
iChannelID: 5,
loadingTime: "3000",
width: "800",
height: "360",
type: "camera01",
id:"divPlugin1"
}
this.initS();
}
}
}
},
data() {
return {
camera152:{},
newId:null
};
},
mounted() {
console.log('插件下载地址：https://open.hikvision.com/download/5cda567cf47ae80dd41a54b3?type=10&id=4c945d18fa5f49638ce517ec32e24e24');
// this.initS();
},
methods: {
// 销毁插件 解决窗口在其他页面显示可以在切换页面时销毁 回到当前页时重新加载
destruction() {
WebVideoCtrl.I_DestroyPlugin();
console.log("播放窗口插件销毁");
},
async initS() {
let that = this;
// 初始化
await WebVideoCtrl.I_InitPlugin({
bWndFull: true, //是否支持单窗口双击全屏，默认支持 true:支持 false:不支持
iWndowType: 1,// 画面分割数 1 就是1*1 2就是2*2
cbSelWnd: function (xmlDoc) {
//此属性是窗口分割切换窗口时触发
// that.clickStartRealPlay();
// console.log("当前选择的窗口编号是1");
},
cbInitPluginComplete: function () {
WebVideoCtrl.I_InsertOBJECTPlugin(that.newId).then(
() => {
// 检查插件是否最新
WebVideoCtrl.I_CheckPluginVersion().then((bFlag) => {
if (bFlag) {
let str = "检测到新的插件版本，双击开发包目录里的HCWebSDKPlugin.exe升级！";
that.$message.error(str);
console.log(str);
}
});
},
() => {
let str1 = "插件初始化失败，请确认是否已安装插件；如果未安装，请双击开发包目录里的HCWebSDKPlugin.exe安装！";
that.$message.error(str1);
console.log(str1);
}
);
},
});
setTimeout(() => {
let cw = Math.round(document.body.clientWidth/1920);
let ch = Math.round(document.body.clientHeight/1080);
let width = parseInt((this.camera152.width*cw),10);
let height = parseInt((this.camera152.height*ch),10);
if(height <= 200){ height = 200; }
if(height <= 200){ height = 200; }
let w1 = (window.innerWidth - document.getElementById(that.newId).offsetLeft) - 1500;
let w2 = document.getElementById(that.newId).clientHeight;
console.log('00000===>',width,height);
// 对窗口大小重新规划
WebVideoCtrl.I_Resize(
width,
height
);
this.setVideoWindowResize(that.newId,width,height);
this.clickLogin();
}, 2000);
},
// 根据设备宽高和windowchange设置窗口大小
setVideoWindowResize(pid,width,height){
document.getElementById(pid).style.width = width + 'px';
document.getElementById(pid).style.height = height + 'px';
},
// 登录
clickLogin() {
let that = this;
var szIP = this.camera152.szIP,
szPort = this.camera152.szPort,
szUsername = this.camera152.szUsername,
szPassword = this.camera152.szPassword;
const iRet = WebVideoCtrl.I_Login(szIP, 1, szPort, szUsername, szPassword, {
timeout: 3000,
success: function (xmlDoc) {
setTimeout(function () {
setTimeout(function() {
that.getChannelInfo();
}, 1000);
that.getDevicePort();
}, 10);
},
error: function (err) {
console.log("登录-err===>",err);
},
});
if (iRet === -1) {
console.log(this.szDeviceIdentify + " 已登录过！");
// 登录过直接进行预览
this.clickStartRealPlay();
}
},
// 获取端口
getDevicePort() {
var szDeviceIdentify = this.camera152.szIP;
if (null == szDeviceIdentify) {
return;
}
WebVideoCtrl.I_GetDevicePort(szDeviceIdentify).then((oPort) => {
console.log("152获取端口",oPort);
});
},
// 获取通道
async getChannelInfo() {
let that = this;
var szDeviceIdentify = this.camera152.szIP+'_'+this.camera152.szPort;
if (null == szDeviceIdentify) {
return;
}
console.log('szDeviceIdentify==============>',szDeviceIdentify);
// 模拟通道
WebVideoCtrl.I_GetAnalogChannelInfo(szDeviceIdentify, {
success: function (xmlDoc) {
that.clickStartRealPlay();
},
error: function (oError) {
console.log(szDeviceIdentify + "模拟通道", oError.errorCode, oError.errorMsg);
}
});
// 数字通道
WebVideoCtrl.I_GetDigitalChannelInfo(szDeviceIdentify, {
success: function (xmlDoc) {
that.clickStartRealPlay();
},
error: function (oError) {
console.log(szDeviceIdentify + " 数字通道", oError.errorCode, oError.errorMsg);
}
});
},
// 开始预览
clickStartRealPlay(iStreamType) {
let that = this;
var g_iWndIndex = 0;
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex) || null;
var szDeviceIdentify = this.camera152.szIP+'_'+this.camera152.szPort,
iChannelID = this.camera152.iChannelID,// 5=>4楼测试电子 2=>4楼前台 1=>4楼后门
bZeroChannel = false;
if ("undefined" === typeof iStreamType) {
iStreamType = 1;
}
if (null == szDeviceIdentify) {
return;
}
var startRealPlay = function () {
WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
iStreamType: iStreamType,
iChannelID: iChannelID,
bZeroChannel: bZeroChannel,
success: function () {
WebVideoCtrl.I_Logout(szDeviceIdentify)
console.log("开始预览成功！");
},
error: function (oError) {
// that.$message.error(szDeviceIdentify+"开始预览失败！");
console.log(szDeviceIdentify+"开始预览失败！");
},
});
};
if (oWndInfo != null) {// 已经在播放了，先停止
WebVideoCtrl.I_Stop({
success: function () {
startRealPlay();
}
});
} else {
startRealPlay();
}
},
// 停止预览
clickStopRealPlay() {
WebVideoCtrl.I_Stop({
success: function () {
console.log("停止预览成功！");
},
error: function (oError) {
console.log(" 停止预览失败！");
},
});
},
loginOut(){
WebVideoCtrl.I_Logout(this.szDeviceIdentify);
},
stopAllPlay(){
WebVideoCtrl.I_StopAllPlay();
},
breakDom(){
WebVideoCtrl.I_DestroyPlugin()
},
viewReload(){
window.location.reload()
},
},
beforeDestroy(){
this.loginOut();
this.stopAllPlay();
window.removeEventListener(this.viewReload);
},
destroyed() {
setTimeout(() => {
this.breakDom();
},100)
},
};
</script>
<style scoped lang="less">
.plugin {
height: 350px;
width: 490px;
margin-top: 10px;
}
</style>
展示正常！功能没问题；gitee源码下载
如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。