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

相关推荐
jingling5558 分钟前
解决微信小程序真机调试中访问本地接口 localhost:8080 报错
前端·微信小程序·小程序
en-route9 分钟前
使用 Flask 构建 Web 应用:静态页面与动态 API 访问
前端·python·flask
IT_陈寒11 分钟前
Vite 5年迭代揭秘:3个核心优化让你的项目构建速度提升200%
前端·人工智能·后端
怎么吃不饱捏26 分钟前
vue3+vite,引入阿里巴巴svg图标,自定义大小颜色
前端·javascript·vue.js
无敌最俊朗@27 分钟前
MQTT 关键特性详解
java·前端·物联网
JAVA学习通28 分钟前
微服务项目->在线oj系统(Java-Spring)----[前端]
java·开发语言·前端
excel32 分钟前
Vue3 响应式系统核心执行器:Reactive Effect 与依赖调度机制
前端
南玖i2 小时前
vue3 通过 Vue3DraggableResizable实现拖拽弹窗,可修改大小
前端·javascript·vue.js
excel3 小时前
Web发展与Vue.js导读
前端
YAY_tyy3 小时前
Three.js 开发实战教程(五):外部 3D 模型加载与优化实战
前端·javascript·3d·three.js