参考文档:海康开放平台

本码用的是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.效果图

GitHub 加速计划 / vu / vue
85
16
下载
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 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐