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的目的是可以多画面预览,这样比较简单,延迟加载,如果不延迟加载只会显示一个画面

Vue3 中集成海康威视摄像头,主要涉及的是如何通过前端技术调用海康提供的 SDK 或 API 接口来实现视频流的播放与控制。以下是实现方式及步骤概述: ### 1. 获取海康威视开放平台资源 首先,需要前往海康威视开放平台(如引用中提到的下载页面)获取相应的开发包和文档[^1]。通常包括: - 海康威视 Web 插件或 ActiveX 控件(适用于 IE 及其兼容模式) - H5 视频播放方案(支持现代浏览器) - 设备接入所需的 IP、端口、用户名、密码等信息 ### 2. 使用 iframe 或插件方式嵌入视频流 对于某些旧版本的设备或平台接口,可能需要使用 iframe 或者直接插入 HTML 的方式引入海康提供的播放器控件。 #### 示例代码:iframe 方式 ```html <template> <div> <iframe :src="cameraUrl" width="100%" height="600px" frameborder="0"></iframe> </div> </template> <script setup> const cameraUrl = &#39;http://your-camera-ip:port/preview&#39;; // 替换为实际地址 </script> ``` ### 3. 使用 H5 播放器方案 海康提供基于 WebRTC 或 HLS 协议的 H5 播放器,适用于主流浏览器环境。可以通过引入官方 JS SDK 并调用相关方法实现视频流播放。 #### 示例代码:H5 播放器初始化 ```html <template> <div id="hik-player-container"></div> </template> <script setup> import HIKPlayer from &#39;path-to-hik-sdk&#39;; // 引入 SDK 文件 const player = new HIKPlayer({ containerId: &#39;hik-player-container&#39;, url: &#39;rtmp://your-camera-stream-url&#39;, // 替换为实际 RTMP 地址 accessToken: &#39;your-access-token&#39; // 若需鉴权 }); player.start(); // 开始播放 </script> ``` ### 4. 调用 RESTful API 实现设备管理 通过调用海康提供的 RESTful 接口实现设备注册、通道绑定、实时预览等功能。例如获取设备实时流地址时,可发送如下请求: #### 示例请求 ```javascript fetch(&#39;https://api.hik-cloud.com/access/v1/cameras/realtime-stream&#39;, { method: &#39;POST&#39;, headers: { &#39;Content-Type&#39;: &#39;application/json&#39;, &#39;Authorization&#39;: &#39;Bearer your_token&#39; }, body: JSON.stringify({ cameraIndexCode: &#39;device_unique_code&#39;, protocol: &#39;rtmp&#39; }) }) .then(res => res.json()) .then(data => { console.log(&#39;Stream URL:&#39;, data.streamUrl); }); ``` ### 5. 安全性考虑 - 所有通信应使用 HTTPS 加密传输。 - 视频流访问应限制权限,避免暴露给非授权用户。 - 避免将敏感信息(如账号密码)硬编码在前端代码中,建议通过后端服务代理。 ### 6. 跨域问题处理 若前端应用与摄像头服务不在同一域名下,需配置 CORS 策略或通过后端代理解决跨域限制。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值