vue3实现海康威视无插件方式实时预览

首先启动插件包里的nginx进行测试，可以播放说明设备支持，直接上代码。
（nginx修改了配置以后保险起见把任务全部关闭再重启nginx，tmd改了俩小时才发现配置没生效）
nginx如果不用暴力带的只需要这几部分

		location ~ /ISAPI|SDK/ {
             if ($http_cookie ~ "webVideoCtrlProxy=(.+)") {
         	proxy_pass http://$cookie_webVideoCtrlProxy;
         	break;
             }
         }
         location ^~ /webSocketVideoCtrlProxy {
             #web socket
             proxy_http_version 1.1;
             proxy_set_header Upgrade $http_upgrade;
             proxy_set_header Connection "upgrade";
             proxy_set_header Host $host;
             if ($http_cookie ~ "webVideoCtrlProxyWs=(.+)") {
         	proxy_pass http://$cookie_webVideoCtrlProxyWs/$cookie_webVideoCtrlProxyWsChannel?$args;
         	break;
             }
             if ($http_cookie ~ "webVideoCtrlProxyWss=(.+)") {
         	proxy_pass http://$cookie_webVideoCtrlProxyWss/$cookie_webVideoCtrlProxyWsChannel?$args;
         	break;
             }
         }
        location / {
            # root   html/pc2;
            root   放自己的前端包路径;
            try_files $uri $uri/ /index.html;
        }

完整代码

<template>
  <div class="hello">
    <div class="left">
      <div :id="'divPlugin_' + index" class="plugin"></div>
    </div>
  </div>
</template>

<script setup>
import {nextTick, onMounted} from 'vue';

const props = defineProps({
  szIP: {
    type: String, // 摄像头对应ip
  },
  szPort: {
    type: String, // 对应端口
  },
  szUsername: {
    type: String, // 用户名
  },
  szPassword: {
    type: String, // 密码
  },
  index: {
    type: Number, // 调用顺序（后面单独说这个参数的用处）
  },
});
onMounted(() => {
  nextTick(() => {
    window.WebVideoCtrl.I_InitPlugin(1000, 500, {
      bWndFull: true, // 是否支持单窗口双击全屏，默认支持 true:支持 false:不支持
      iPackageType: 2,
      // szColorProperty:"plugin-background:0000ff; sub-background:0000ff; sub-border:00ffff; sub-border-select:0000ff",   //2:PS 11:MP4
      iWndowType: 1,
      bNoPlugin: true,
      cbInitPluginComplete() {
        window.WebVideoCtrl.I_InsertOBJECTPlugin(`divPlugin_${props.index}`);
        // 检查插件是否最新
        if (window.WebVideoCtrl.I_CheckPluginVersion() == -1) {
          alert('检测到新的插件版本，双击开发包目录里的WebComponentsKit.exe升级！');
        }
      },
    });
    login();
  });
});

const login = () => {
  if (props.szIP == '' || props.szPort == '') {
    return;
  }
  const iRet = window.WebVideoCtrl.I_Login(props.szIP, 1, props.szPort, props.szUsername, props.szPassword, {
    success() {
      console.log('登录成功！', props.index);
      // preView();
      setTimeout(() => {
        preView();
      }, props.index * 500);
    },
    error() {
      console.log('登录失败！');
    },
  });
  if (iRet == -1) {
    console.log('已登录过！');
    preView();
    // setTimeout(() => {
    //   preView();
    // }, props.index * 500);
  }
};
const preView = () => {
  const szDeviceIdentify = `${props.szIP}_${props.szPort}`;
  console.log('szDeviceIdentify', szDeviceIdentify);
  // iWndIndex		播放窗口，如果不传，则默认使用当前选择窗口播放（默认选中窗口0）
  // iStreamType		码流类型1-主码流，2-子码流，默认使用主码流预览
  // iChannelID			播放通道号，默认通道1
  // bZeroChannel	是否播放零通道，默认为false
  // iPort	RTSP端口号，可以选择传入，如果不传，开发包会自动判断设备的RTSP端口
  // success			成功回调函数
  // error		失败回调函数
  WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
    iStreamType: 2,//码流类型，2为子码流
    success: function () {
      //   that.$notify({
      //     title: "成功",
      //     message: "开始预览通道" + iChannelID + "成功",
      //     type: "success",
      //   });
    },
    error(status, xmlDoc2) {
      console.log(xmlDoc2); //不能删除
      // that.$notify({
      //   title: "失败",
      //   message: "开始预览通道" + iChannelID + "失败",
      //   type: "error",
      // });
      if (status === 403) {
        console.log("szInfo 设备不支持Websocket取流！");
      } else {
        console.log("开始预览失败 ", status, xmlDoc2);
      }
    },
  });
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.plugin {
  width: 1000px;
  height: 500px;
}
</style>

调用

<haikang
             szIP="设备IP"
            szPort="端口80"
            szUsername="账号admin"
            szPassword="密码xxxx"
            :index="0"
            />

增加index的目的是可以多画面预览，这样比较简单，延迟加载，如果不延迟加载只会显示一个画面