記錄---vue播放海康視頻.首屏加載多個窗口
????? 寫在開頭
點贊 + 收藏 === 學會??????
最近vue接入海康監控畫面,需要首屏展示9個窗口,于是就去下載官方demo,經過兩天半的努力,也是成功完成!
**首先:下載開發包open.hikvision.com/download/5c…
我用的是3.3
然后里面自帶demo文件,先安裝這個插件,雙擊即可,一路next
然后demo文件里面的index.html文件打開,輸入自己的ip,賬號密碼端口就能直接使用 言歸正傳,我們這里主要是如何加載多個窗口
1:引入js文件
在剛才下載的demo文件中,找到這三個js文件,copy出來,jq可以不用,但是需要把一些jq代碼語法改成vue,其他兩個必須要
2.新建一個html,做好準備
由于這個模塊是單獨的,我就沒在vue項目里面引入,直接弄一個單文件來部署的,引入這幾個js文件,vue等等
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<title>監控畫面</title>
<script src="./js/jquery-1.7.1.min.js"></script>
<script src="./js/jsVideoPlugin-1.0.0.min.js"></script>
<script id="videonode" src="./js/webVideoCtrl.js"></script>
<link rel="stylesheet" />
<script src="http://unpkg.com/vue@3"></script>
<script src="http://unpkg.com/element-plus"></script>
</head>
3.準備需要的變量,初始化控件
<style>
* {
padding: 0;
margin: 0;
}
body {
width: 100vw;
height: 100vh;
}
#app {
width: 100%;
height: 100%;
}
#divPlugin {
width: 100%;
height: 100%;
}
</style>
<body>
<div id="app">
<div id="divPlugin" class="plugin"></div>
</div>
</body>
createApp({
setup() {
let ip = ref('自己的ip')
let port = ref('端口')
let username = ref('用戶名')
let password = ref('密碼')
let rtsp = ref('rtsp協議端口') //不知道的在demo文件登錄可以拿到,或者去海康后臺登錄獲取
}
}).mount('#app')
初始化控件
就最后幾行有用,demo文件直接cv過來就行了
//初始化插件
const Init = () => {
// 初始化插件參數及插入插件
WebVideoCtrl.I_InitPlugin({
bWndFull: true, //是否支持單窗口雙擊全屏，默認支持 true:支持 false:不支持
iWndowType: 1,
// aIframe: ["test"],
cbSelWnd: function (xmlDoc) {
g_iWndIndex = parseInt($(xmlDoc).find("SelectWnd").eq(0).text(), 10);
var szInfo = "當前選擇的窗口編號：" + g_iWndIndex;
// ElMessage.success(szInfo);
chooseNum.value = g_iWndIndex
},
cbDoubleClickWnd: function (iWndIndex, bFullScreen) {
var szInfo = "當前放大的窗口編號：" + iWndIndex;
if (!bFullScreen) {
szInfo = "當前還原的窗口編號：" + iWndIndex;
}
// ElMessage.success(szInfo);
},
cbEvent: function (iEventType, iParam1, iParam2) {
if (2 == iEventType) {// 回放正常結束
// ElMessage.success("窗口" + iParam1 + "回放結束！");
} else if (-1 == iEventType) {
// ElMessage.error("設備" + iParam1 + "網絡錯誤！");
} else if (3001 == iEventType) {
clickStopRecord(g_szRecordType, iParam1);
}
},
cbInitPluginComplete: function () {
WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin").then(() => {
// 檢查插件是否最新
WebVideoCtrl.I_CheckPluginVersion().then((bFlag) => {
if (bFlag) {
alert("檢測到新的插件版本，雙擊開發包目錄里的HCWebSDKPlugin.exe升級！");
} else {
let iType = parseInt('3x3', 10);//這里就是你要分屏的窗口
WebVideoCtrl.I_ChangeWndNum(iType).then(() => {
}, (oError) => {
});
clickLogin()
}
});
}, (error) => {
console.log(error);
alert("插件初始化失敗，請確認是否已安裝插件；如果未安裝，請前往https://open.hikvision.com/download/5c67f1e2f05948198c909700?type=20下載");
});
}
});
// 窗口事件綁定
$(window).bind({
resize: function () {
WebVideoCtrl.I_Resize($("body").width(), $("body").height());
}
});
//初始化日期時間
var szCurTime = dateFormat(new Date(), "yyyy-MM-dd");
$("#starttime").val(szCurTime + " 00:00:00");
$("#endtime").val(szCurTime + " 23:59:59");
$("#downloadstarttime").val(szCurTime + " 00:00:00");
$("#downloadendtime").val(szCurTime + " 23:59:59");
}
然后開始登錄
const clickLogin = () => {
var szIP = ip.value,
szPort = port.value,
szUsername = username.value,
szPassword = password.value;
var szDeviceIdentify = szIP + "_" + szPort;
WebVideoCtrl.I_Login(szIP, 1, szPort, szUsername, szPassword, {
timeout: 3000,
success: function (xmlDoc) {
setTimeout(function () {
setTimeout(function () {
getChannelInfo();
}, 1000);
}, 10);
},
error: function (oError) {
if (ERROR_CODE_LOGIN_REPEATLOGIN === status) {
// ElMessage.error(szDeviceIdentify + " 已登錄過！");
} else {
// ElMessage.error(szDeviceIdentify + " 登錄失敗！", oError.errorCode, oError.errorMsg);
}
}
});
}
獲取通道
//獲取通道
const getChannelInfo = () => {
var szDeviceIdentify = ip.value
if (null == szDeviceIdentify) {
return;
}
// 數字通道
WebVideoCtrl.I_GetDigitalChannelInfo(szDeviceIdentify, {
success: function (xmlDoc) {
let arr = []
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));
}
arr.push({
id,
name
})
});
console.log(arr, '數字通道');
thoroughList.value = arr
start()
// ElMessage.success(szDeviceIdentify + " 獲取數字通道成功！");
},
error: function (oError) {
// ElMessage.error(szDeviceIdentify + " 獲取數字通道失敗！", oError.errorCode, oError.errorMsg);
}
});
}
最后就是播放啦
const start = () => {
//這個list是你通道的id,在上面獲取通道可以拿到,選擇要播放的通道.我這里寫定時器是因為循環的時候偶爾會卡頓..
let list = [1, 4, 6, 9, 11, 12, 18, 19, 27]
setTimeout(() => {
clickStartRealPlay(27, 0)
}, 1000);
setTimeout(() => {
clickStartRealPlay(4, 1)
}, 2000);
setTimeout(() => {
clickStartRealPlay(6, 2)
}, 3000);
setTimeout(() => {
clickStartRealPlay(9, 3)
}, 4000);
setTimeout(() => {
clickStartRealPlay(28, 4)
}, 5000);
setTimeout(() => {
clickStartRealPlay(12, 5)
}, 6000);
setTimeout(() => {
clickStartRealPlay(18, 6)
}, 7000);
setTimeout(() => {
clickStartRealPlay(19, 7)
}, 8000);
setTimeout(() => {
clickStartRealPlay(14, 8)
}, 9000);
}
播放代碼
const clickStartRealPlay = (type, index) => {
var startRealPlay = function () {
WebVideoCtrl.I_StartRealPlay(ip.value, {
iWndIndex: index, //某個窗口
iStreamType: 2,//1主碼流 2子碼流
iChannelID: type, //通道
bZeroChannel: false,
iPort: parseInt(rstp.value, 10),
success: function (info) {
console.log(info, ';;;;;;;;;;;;;;;;');
// szInfo = "開始預覽成功！";
// ElMessage.success(szDeviceIdentify + " " + szInfo);
},
error: function (oError) {
console.log(oError, 'jjj');
// ElMessage.error(szDeviceIdentify + " 開始預覽失敗！", oError.errorCode, oError.errorMsg);
}
});
};
startRealPlay()
}
到這就結束啦,效果圖就不展示了,內部監控,這里只是提供一個思路
本文轉載于：https://juejin.cn/post/7476169352586674186
如果對您有所幫助，歡迎您點個關注，我會定時更新技術文檔，大家一起討論學習，一起進步。
浙公網安備 33010602011771號