前端使用rtsp视频流接入海康威视摄像头

在纯前端（Vue 2）中直接通过 RTSP 协议接入海康威视摄像头是不可行的，因为：

1. 浏览器限制：现代浏览器（Chrome、Firefox等）不支持直接播放 RTSP 流（基于 TCP/UDP 的协议）。
2. 安全策略：浏览器通常禁止直接访问本地网络设备（如摄像头）。

可行的前端解决方案

需要借助中转服务将 RTSP 转成浏览器支持的格式（如 HLS、WebRTC 或 FLV）。以下是具体实现方案：

---

方案 1：RTSP → WebSocket + flv.js（推荐）

使用 FFmpeg 或 Node.js 中转服务 将 RTSP 转成 FLV，前端用 flv.js 播放。

步骤

1. 后端中转服务（Node.js + FFmpeg）

安装 node-rtsp-stream 或自行搭建转流服务：

npm install node-rtsp-stream

示例代码（Node.js 服务端）：

const NodeRTSPStream = require('node-rtsp-stream');
const stream = new NodeRTSPStream({name: '海康摄像头',streamUrl: 'rtsp://admin:password@192.168.1.64:554/Streaming/Channels/101', // 海康 RTSP 地址wsPort: 9999, // WebSocket 端口ffmpegOptions: { // FFmpeg 转码选项'-stats': '','-r': 30,'-f': 'flv',},
});

注意：streamUrl 格式通常为：
rtsp://[用户名]:[密码]@[IP地址]:[端口]/Streaming/Channels/[通道号]
海康默认端口 554，通道号 101 通常代表主码流。

2. 前端 Vue 2 使用 flv.js 播放

安装 flv.js：

npm install flv.js

Vue 组件示例：

<template><div><video ref="videoPlayer" controls autoplay muted width="800"></video></div>
</template><script>
import flvjs from 'flv.js';export default {mounted() {this.initVideo();},methods: {initVideo() {if (flvjs.isSupported()) {const videoElement = this.$refs.videoPlayer;const flvPlayer = flvjs.createPlayer({type: 'flv',url: 'ws://localhost:9999', // 对应 Node.js 服务的 WebSocket});flvPlayer.attachMediaElement(videoElement);flvPlayer.load();flvPlayer.play();}},},beforeDestroy() {if (this.flvPlayer) {this.flvPlayer.destroy();}},
};
</script>

---

方案 2：RTSP → HLS（HTTP Live Streaming）

使用 FFmpeg 将 RTSP 转成 HLS（.m3u8 + .ts），前端用 hls.js 播放。

步骤

1. FFmpeg 转码

ffmpeg -i "rtsp://admin:password@192.168.1.64:554/Streaming/Channels/101" \-c:v libx264 -c:a aac -f hls \-hls_time 2 -hls_list_size 3 -hls_flags delete_segments \./stream/stream.m3u8

2. 前端 Vue 使用 hls.js

<template><video ref="videoPlayer" controls></video>
</template><script>
import Hls from 'hls.js';export default {mounted() {const video = this.$refs.videoPlayer;const hls = new Hls();hls.loadSource('http://your-server/stream.m3u8');hls.attachMedia(video);hls.on(Hls.Events.MANIFEST_PARSED, () => {video.play();});},
};
</script>

---

方案 3：WebRTC 实时流（更复杂，需后端支持）

使用 WebRTC（如 Janus Gateway 或 Mediasoup）实现低延迟播放，但需要额外搭建信令服务器。

---

海康 RTSP 地址格式

海康威视摄像头的 RTSP URL 通常为：

rtsp://[用户名]:[密码]@[IP地址]:[端口]/Streaming/Channels/[通道号]

• 主码流：/Streaming/Channels/101
• 子码流：/Streaming/Channels/102（低分辨率）
• 默认用户名/密码：admin + 设备背面密码

---

总结

方案	技术	延迟	适用场景
RTSP → WebSocket + flv.js	Node.js + FFmpeg	2-5s	局域网/内网
RTSP → HLS	FFmpeg + hls.js	10-30s	录播/高兼容
WebRTC	Janus/Mediasoup	<1s	超低延迟

推荐：

• 内网/低延迟 → flv.js
• 公网/高兼容 → HLS

如果有后端支持，可进一步优化（如鉴权、CDN 分发）。