当前位置：首页 > news >正文

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

news 2025/7/15 14:30:17

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

<video class="video-box" muted ref="videoPlayer"></video>const video: any = videoPlayer.value;let url: string = "";if (Hls.isSupported()) {// 检查浏览器是否支持HLStry {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"); // 打印错误信息或显示错误提示。}