1.需要數(shù)據(jù)
{
szIP: '192.168.1.X', //攝像頭ip
szPort: '80', //端口
szUsername: 'admin', //用戶名
szPassword: 'xxxxxx' //密碼
},2.下載內(nèi)容
WEB3.3控件開發(fā)包 V3.3
下載地址：海康開放平臺
?3.安裝插件，引入js文件
（1）雙擊HCWebSDKPlugin.exe，安裝插件
（2）引入文件
把這兩個文件放在public下static目錄下，在public的index.html中引入
<script src="/static/videojs/jquery-1.7.1.min.js"></script>
<script id="videonode" src="/static/videojs/webVideoCtrl.js"></script>4.vue代碼--視頻組件
<template>
<div>
<div class="left">
<div
ref="divPlugin"
:id="divPlugin"
class="plugin"
style="width: 650px; height: 250px; z-index: 1"
></div>
</div>
</div>
</template>
<script>
export default {
props: ['sysParams'],
data() {
return {
divPlugin: 'video_' + this.generateUUID(),
g_iWndIndex: null,
szDeviceIdentify: ''
};
},
created() {},
mounted() {
this.linkVideo();
},
beforeDestroy() {
this.hideVideo();
},
methods: {
// 初始化
linkVideo() {
let that = this;
WebVideoCtrl.I_InitPlugin({
bWndFull: true, //是否支持單窗口雙擊全屏，默認(rèn)支持 true:支持 false:不支持
iWndowType: 2, //表示視頻組件窗口數(shù)，默認(rèn)是1，我這里需要四個窗口改為了2
cbSelWnd: function (xmlDoc) {
that.g_iWndIndex = parseInt(
$(xmlDoc).find('SelectWnd').eq(0).text(),
10
);
console.log('選中窗口');
if (that.sysParams[that.g_iWndIndex]) {
that.clickStartRealPlay();
} else {
that.$message.error('當(dāng)前窗口無設(shè)備');
}
},
cbDoubleClickWnd: function (iWndIndex, bFullScreen) {
if (!bFullScreen) {
}
},
cbEvent: function (iEventType, iParam1, iParam2) {
if (2 == iEventType) {
// 回放正常結(jié)束
showCBInfo('窗口' + iParam1 + '回放結(jié)束！');
} else if (-1 == iEventType) {
showCBInfo('設(shè)備' + iParam1 + '網(wǎng)絡(luò)錯誤！');
} else if (3001 == iEventType) {
clickStopRecord(g_szRecordType, iParam1);
}
},
cbInitPluginComplete: function () {
WebVideoCtrl.I_InsertOBJECTPlugin(that.divPlugin).then(
() => {
that.sysParams.map((item, index) => {
setTimeout(() => {
that.g_iWndIndex = index;
that.clickStartRealPlay();
}, index * 1000);
});
},
() => {}
);
}
});
},
// 登錄
async clickStartRealPlay() {
let that = this;
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(that.g_iWndIndex);
let { szIP, szPort, szUsername, szPassword } =
this.sysParams[that.g_iWndIndex];
that.szDeviceIdentify = szIP + '_' + szPort;
if (oWndInfo == null) {
WebVideoCtrl.I_Login(szIP, 1, szPort, szUsername, szPassword, {
success: function (xmlDoc) {
//成功的回調(diào)函數(shù)
that.getVideo();
},
error: function (oError) {
if (oError.errorCode == '2001') {
that.getVideo();
}
//失敗的回調(diào)函數(shù)
}
});
} else {
await WebVideoCtrl.I_Stop(that.g_iWndIndex);
that.getVideo();
}
},
// 打開預(yù)覽視頻
getVideo() {
console.log('渲染第' + this.g_iWndIndex + '窗口');
WebVideoCtrl.I_StartRealPlay(this.szDeviceIdentify, {
iWndIndex: this.g_iWndIndex,
success: function () {},
error: function (oError) {}
});
},
// 關(guān)閉銷毀
async hideVideo() {
await WebVideoCtrl.I_StopAllPlay();
await WebVideoCtrl.I_Logout(this.szDeviceIdentify);
await WebVideoCtrl.I_DestroyPlugin();
},
// 生成uuid
generateUUID() {
let d = new Date().getTime();
let uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(
/[xy]/g,
(c) => {
let r = (d + Math.random() * 16) % 16 | 0;
d = Math.floor(d / 16);
return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);
}
);
return uuid;
}
},
watch: {
sysParams: {
handler(newVal, oldVal) {
// 當(dāng)items數(shù)組發(fā)生變化時(shí)，執(zhí)行這里的邏輯
console.log('items 數(shù)組發(fā)生變化：', newVal, oldVal);
// this.hideVideo();
WebVideoCtrl.I_StopAllPlay();
// this.linkVideo();
this.sysParams.map((item, index) => {
setTimeout(() => {
this.g_iWndIndex = index;
this.clickStartRealPlay();
}, index * 400);
});
},
deep: true
}
}
};
</script>
<style lang='scss' scoped>
</style>?當(dāng)前script里面的方法只是當(dāng)前開發(fā)所需，其他方法可以看下載的文件中HCWebSDK3.3.pdf文檔，或者運(yùn)行demo--cn--demo.html文件，根據(jù)自己所需查找對應(yīng)方法
5.vue代碼--父組件
#引入
import monitorVideoVue from '@/components/video/monitorVideo.vue';
#html部分
<monitorVideoVue :sysParams="list"></monitorVideoVue>
#js部分
在data中定義
// 視頻列表
sysParams: [
{
szIP: '192.168.1.A',
szPort: '80',
szUsername: 'admin',
szPassword: 'xxxx'
},
{
szIP: '192.168.1.B',
szPort: '80',
szUsername: 'admin',
szPassword: 'xxxx'
},
{
szIP: '192.168.1.C',
szPort: '80',
szUsername: 'admin',
szPassword: 'xxxx'
},
{
szIP: '192.168.1.D',
szPort: '80',
szUsername: 'admin',
szPassword: 'xxxx'
},
{
szIP: '192.168.1.A',
szPort: '80',
szUsername: 'admin',
szPassword: 'xxxx'
},
{
szIP: '192.168.1.B',
szPort: '80',
szUsername: 'admin',
szPassword: 'xxxx'
}
],?6.我的代碼問題
其實(shí)在父組件的sysParams中不需要這樣重復(fù)聲明賬號密碼，他登錄一次后會有已登錄狀態(tài)，這里未作修改，只有通道列表更改一下就可以，只是當(dāng)前代碼還未更改
正確需要格式
loginIp: '192.168.90.xxx',//ip地址，后面拼接的是通道列表iChannelIDIndexList
port: '80',//端口
username:'admin',//用戶名
password: 'a123xxxxxxxxxxxx',//密碼
iChannelIDIndexList: [1, 4, 6, 7], // 選擇的通道列表這樣的一個格式基本上可以實(shí)現(xiàn)多窗口的播放了，但項(xiàng)目后續(xù)沒有用這個方法來實(shí)現(xiàn)，就沒有繼續(xù)完善代碼
7.缺點(diǎn)
（1）必須安裝HCWebSDKPlugin.exe插件，沒有安裝插件的電腦無法觀看
（2）有時(shí)候會有一點(diǎn)卡頓文章來源：http://www.zghlxwxcb.cn/news/detail-861088.html
（3）如果不銷毀播放器，他會出現(xiàn)在所有頁面的上面，銷毀的話再重新加載會慢一點(diǎn)文章來源地址http://www.zghlxwxcb.cn/news/detail-861088.html
到了這里，關(guān)于vue2中使用WebSDK_V3.3.0(231027)展示監(jiān)控視頻的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
