海康视频播放，包含h5和web插件

自行下载
海康开放平台

demo 都写得很清楚，不多描述
注意，两者需要的数据不一样，web是需要第三方标识，下载安装插件到电脑，要配置海康数据。h5是视频流，只需传接口返回的流地址

1.视频web插件

ps: 逆天插件，层级非常高，打开弹窗都会被挡住，需要做限制

vue2写法，公共vue文件写法，调用文件即可

开始时需要以下配置，不知道的找对接平台数据的人，必须要，否则播不了

getParameterData: {
    port: 443,
    ip: "10.10.2.22",
    appKey: "20224202",
    appSecret: "ndqXXXXXt1jHY2r8Uy",
    enableHTTPS: 1,
}, //海康数据

// 注意版本不一样，加载插件的声明不一样，下面vue3的是最新的，声明实例new WebControl切换下

<!-- 海康插件组件 -->
<template>
    <div class="video-center" ref="videoCenter">
        <div :id="playWnd" class="playWnd"></div>
    </div>
  </template>
  <script>
  const control = require("../video/jsWebControl-1.0.0.min.js");
  const jsencrypt = require("../video/jsencrypt.min.js");
  export default {
     
    data() {
     
        return {
     
            oWebControl: null,
            pubKey: "",
            initCount: 0,
            w: 0,
            h: 0,
            winId: 1,
        };
    },
    props: {
     
        playWnd: {
     
          type: String,
          default: 'playWnd',
        },
        //播放类型  0预览 1回放
        playMode: {
     
            type: Number,
            default: 0,
        },
        //初始化数据
        initData: {
     
            type: Object,
            default() {
     
                return {
     
                    enableHttps: 1,
                    encryptedFields: "secret",
                    layout: "1x1",
                    btIds: "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769",
                    showSmart: 1,
                    showToolbar: 1,
                    snapDir: "D:\\SnapDir",
                    videoDir: "D:\\VideoDir",
                };
            },
        },
    },
    created: function () {
     
        this.initPlugin();
    },
    mounted: function () {
     
        this.$nextTick(()=>{
     
          this.h = this.$refs["videoCenter"].clientHeight;
          this.w = this.$refs["videoCenter"].clientWidth;
        })
        window.addEventListener("resize",() => {
     
            if (this.$refs["videoCenter"]) {
     
                this.h = this.$refs["videoCenter"].clientHeight;
                this.w = this.$refs["videoCenter"].clientWidth;
                this.resetFun();
            }
        });
    },
    computed: {
     },
    methods: {
     
        // 设置窗口裁剪，当因滚动条滚动导致窗口需要被遮住的情况下需要JS_CuttingPartWindow部分窗口
        setWndCover() {
     
            var iWidth = window.width;
            var iHeight = window.height;
            var oDivRect = document
                .querySelector("#"+this.playWnd)
                .getBoundingClientRect();
            var iCoverLeft = oDivRect.left < 0 ? Math.abs(oDivRect.left) : 0;
            var iCoverTop = oDivRect.top < 0 ? Math.abs(oDivRect.top) : 0;
            var iCoverRight =
                oDivRect.right - iWidth > 0
                    ? Math.round(oDivRect.right - iWidth)
                    : 0;
            var iCoverBottom =
                oDivRect.bottom - iHeight > 0
                    ? Math.round(oDivRect.bottom - iHeight)
                    : 0;

            iCoverLeft = iCoverLeft > this.w ? this.w : iCoverLeft;
            iCoverTop = iCoverTop > this.h ? this.h : iCoverTop;
            iCoverRight = iCoverRight > this.w ? this.w : iCoverRight;
            iCoverBottom = iCoverBottom > this.h ? this.h : iCoverBottom;

            this.oWebControl.JS_RepairPartWindow(0, 0, this.w + 1, this.h); // 多1个像素点防止还原后边界缺失一个像素条
            if (iCoverLeft != 0) {
     
                this.oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, this.h);
            }
            if (iCoverTop != 0) {
     
                this.oWebControl.JS_CuttingPartWindow(
                    0,
                    0,
                    this.w + 1,
                    iCoverTop
                ); // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条
            }
            if (iCoverRight != 0) {
     
                this.oWebControl.JS_CuttingPartWindow(
                    this.w - iCoverRight,
                    0,
                    iCoverRight,
                    this.h
                );
            }
            if (iCoverBottom != 0) {
     
                this.oWebControl.JS_CuttingPartWindow(
                    0,
                    this.h - iCoverBottom,
                    this.w,
                    iCoverBottom
                );
            }
        },
        // 初始化
        init() {
     
            this.getPubKey(() => {
     
                let {
      appSecret, ...hkData } = this.$store.state.getParameterData;//海康提供的认证信息
                this.oWebControl.JS_RequestInterface({
     
                        funcName: "init",
                        argument: JSON.