前端vue对接海康摄像头流程

jojo是只猫2025-07-15 8:03

1、拆包摄像头、插电源

2、下载SADP（设备网络搜索），连接设备，获取ip地址

下载地址：https://partners.hikvision.com/tools

找到自己的设备类型DS开头

3、摄像头链接wifi、网线

登录设备预览配置网页-配置网络-可预览等

4、查看预览视频流取消下载浏览器插件安装（LocalServiceComponents好像是）

5、获取前端视频流（地址: https://knowbot.hikvision.com/webchatbot-pc/#/sharingPath?params=369061\&sysNum=1693447044565\&flowItemId=5085\&type=0）

6、获取rtsp地址方法：

https://knowbot.hikvision.com/webchatbot-pc/#/sharingPath?params=369061\&sysNum=1693447044565\&flowItemId=5085\&type=0

示例：rtsp://admin:hik12345@10.16.4.25:554/Streaming/Channels/101

7、后端将rtsp地址转成hls格式，前端才能加载

交给后端

8、前端加载hls视频

（1）如果后端给的是m3u8需要使用插件hls才能加载

yarn add hls.js

js 复制代码

<video class="video-box" muted ref="videoPlayer"></video>
 
const video: any = videoPlayer.value;
  let url: string = "";
  if (Hls.isSupported()) {
    // 检查浏览器是否支持HLS
    try {
      hls.loadSource(http:XXX.m3u8); // 加载m3u8源文件
      hls.attachMedia(video); // 将HLS与<video>元素关联起来
      hls.on(Hls.Events.MANIFEST_PARSED, () => {
        // 监听manifest解析完成事件，可以开始播放了
        video.play(); // 开始播放视频
      });
    } catch (error) {
      // 捕获并处理错误，例如网络问题等。
      console.error(error);
    }
  } else if (video.canPlayType("application/vnd.apple.mpegurl")) {
    // 对于不支持HLS的浏览器，尝试使用原生HTML5播放M3U8（不推荐，因为没有HLS优化）
    video.src = "/api/hls/wtg.m3u8"; // 直接设置视频源，但不推荐，因为不支持HLS的特性。
  } else {
    // 对于不支持HLS的浏览器，提供一个备选方案或提示信息。
    console.error("Your browser does not support HLS"); // 打印错误信息或显示错误提示。
  }

（2）如果是mp3前端可直接加载