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

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前端可直接加载

相关推荐
lypzcgf3 小时前
Coze源码分析-工作空间-项目开发-前端源码
前端·人工智能·typescript·系统架构·开源软件·react·安全架构
yuguo.im4 小时前
Chrome DevTools Performance 是优化前端性能的瑞士军刀
前端·javascript·性能优化·chrome devtools
FSHOW5 小时前
【独立开发日记】MQ端到端类型安全
前端·javascript·后端
老华带你飞6 小时前
社区互助|基于SSM+vue的社区互助平台的设计与实现(源码+数据库+文档)
java·前端·数据库·vue.js·小程序·毕设·社区互助平台
一支鱼6 小时前
前端使用次数最多的工具封装
前端·typescript·编程语言
GIS之路6 小时前
GDAL 简介
前端
前端工作日常6 小时前
单元测试与E2E测试中使用浏览器的原因及区别
前端·单元测试
chxii6 小时前
7.2elementplus的表单布局与模式
javascript·vue.js·elementui
Js_cold7 小时前
Notepad++使用技巧1
前端·javascript·fpga开发·notepad++
接着奏乐接着舞。7 小时前
前端RSA加密遇到Java后端解密失败的问题解决
java·开发语言·前端