Vue在PC端接入海康威视摄像头

参考文档：海康开放平台

本码用的是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 = th