
Vue在PC端接入海康威视摄像头
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue

·
参考文档:海康开放平台
本码用的是WEB3.3控制开发包 V3.3
1.下载插件
链接: 百度网盘 请输入提取码
2.安装插件
3.拷贝文件
在你的项目根目录下创建public文件夹 把下载的三个js文件拷贝进去
4.引入文件
在根目录的index.html文件 引入以下两个js文件
5.封装组件
src/components/MonitorVideo/index.vue
<template>
<div ref="divPlugin" :id="divPlugin" class="plugin" style="width: 100%;height:100%;"></div>
</template>
<script>
import { nextTick } from "vue"
export default {
props: ['sysParams', 'width', 'height'],
data() {
return {
divPlugin: 'video_' + this.generateUUID(),
g_iWndIndex: null,
szDeviceIdentify: ''
};
},
created() {
},
mounted() {
nextTick(() => {
setTimeout(() => {
this.linkVideo();
}, 500);
})
},
beforeDestroy() {
this.hideVideo();
},
methods: {
// 初始化
linkVideo() {
let that = this;
WebVideoCtrl.I_InitPlugin({
bWndFull: true, //是否支持单窗口双击全屏,默认支持 true:支持 false:不支持
iWndowType: 1, //表示视频组件窗口数,默认是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('当前窗口无设备');
}
},
cbDoubleClickWnd: function (iWndIndex, bFullScreen) {
if (!bFullScreen) {
}
},
cbEvent: function (iEventType, iParam1, iParam2) {
if (2 == iEventType) {
// 回放正常结束
showCBInfo('窗口' + iParam1 + '回放结束!');
} else if (-1 == iEventType) {
showCBInfo('设备' + iParam1 + '网络错误!');
} 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);
});
},
() => {
alert("插件初始化失败,请确认是否已安装插件;如果未安装,请双击开发包目录里的HCWebSDKPlugin.exe安装!")
console.log("插件初始化失败,请确认是否已安装插件;如果未安装,请双击开发包目录里的HCWebSDKPlugin.exe安装!");
}
);
}
});
},
// 登录
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) {
//成功的回调函数
that.getVideo();
},
error: function (oError) {
if (oError.errorCode == '2001') {
that.getVideo();
}
//失败的回调函数
}
});
} else {
await WebVideoCtrl.I_Stop(that.g_iWndIndex);
that.getVideo();
}
},
// 打开预览视频
getVideo() {
console.log('渲染第' + this.g_iWndIndex + '窗口');
WebVideoCtrl.I_StartRealPlay(this.szDeviceIdentify, {
iWndIndex: this.g_iWndIndex,
success: function () { },
error: function (oError) { }
});
},
// 关闭销毁
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) {
// 当items数组发生变化时,执行这里的逻辑
console.log('items 数组发生变化:', 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>
.plugin {}
</style>
6.页面调用
<template>
<div class="layout-padding">
<div class="layout-padding-view layout-padding-auto">
<div class="surveillanceVideo">
<MonitorVideo v-if="videoShow" :sysParams="list" ref="monitorVideoRef">
</MonitorVideo>
</div>
</div>
</div>
</template>
<script lang="ts">
import { toRefs, reactive, onMounted, defineComponent, getCurrentInstance, onDeactivated, onActivated, onBeforeUnmount, } from 'vue';
import MonitorVideo from '/@/components/MonitorVideo/index.vue';
export default defineComponent({
components: {
MonitorVideo
},
setup() {
const data = reactive({
videoShow: false,
list: [{
szIP: '192.168.0.15',
szPort: '80',
szUsername: 'admin',
szPassword: ''
}],
});
// 页面加载时
onMounted(async () => {
console.log("onMounted");
initMainDevDetail()
});
onBeforeUnmount(() => {
console.log("onBeforeUnmount");
closeVideoShow()
})
onActivated(() => {
console.log("onActivated");
initMainDevDetail()
})
onDeactivated(() => {
console.log("onDeactivated");
closeVideoShow()
})
const { proxy }: any = getCurrentInstance();
const initMainDevDetail = async () => {
let res = await proxy.apis.v2DevicesGetdetail({
deviceid: "FA6803244",
});
if (res.code === 200) {
data.list[0].szIP = res.data.play_url
data.list[0].szPort = res.data.play_port
data.list[0].szUsername = res.data.product_key
data.list[0].szPassword = res.data.encrypt_pwd
if (res.data.play_url && res.data.play_port && res.data.product_key && res.data.encrypt_pwd) {
openVideoShow()
}
} else {
proxy.$message({
message: res.message,
type: 'error',
});
}
};
const openVideoShow = () => {
data.videoShow = true
}
const closeVideoShow = () => {
proxy.$refs.monitorVideoRef?.hideVideo().catch((err: any) => {
})
data.videoShow = false
}
return {
...toRefs(data),
};
},
});
</script>
<style lang="scss" scoped>
.surveillanceVideo {
width: 600px;
height: 400px;
}
</style>
7.效果图




vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:5 个月前 )
9e887079
[skip ci] 4 个月前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 7 个月前
更多推荐
所有评论(0)