Vue前端展示监控摄像头视频流的实现方案

在Vue前端系统中展示RTSP监控摄像头视频流时，由于浏览器通常仅支持HTTP/HTTPS、HLS、WebRTC等协议，而不直接支持RTSP协议，因此需要通过特定方案进行转换。以下是几种可行的配置和实现方案：

方案一：RTSP → WebSocket → HLS（推荐）

此方案通过服务端将RTSP流转码为HLS格式，再在Vue前端播放，兼容性较好。

1. 服务端转换RTSP为HLS

   • 安装FFmpeg（服务端）：在Ubuntu/Debian系统中，可通过以下命令安装：

   sudo apt-get install ffmpeg
   

   • 启动转码服务：使用FFmpeg将RTSP流转码为HLS格式，命令如下：

   ffmpeg -i "rtsp://admin:password@摄像头IP:554/stream1" \
          -c:v libx264 -preset ultrafast -tune zerolatency \
          -c:a aac -f hls -hls_time 2 -hls_list_size 3 -hls_flags delete_segments \
          /path/to/output/stream.m3u8
   

   各参数含义：

   • -i：输入RTSP地址，需替换为实际的摄像头地址。
   • -c:v libx264：将视频编码为H.264。
   • -f hls：输出为HLS格式。
   • /path/to/output/：指定HLS文件的输出目录，该目录需通过Web服务器暴露。
   • 配置Web服务器（如Nginx）：通过Nginx配置，使HLS文件可被访问，示例配置如下：

   server {
       listen 80;
       location /hls/ {
           alias /path/to/output/;
           add_header Cache-Control no-cache; # 禁用缓存以确保实时性
       }
   }
   

   访问示例：http://your-server-ip/hls/stream.m3u8。

2. Vue前端播放HLS流：借助hls.js库播放HLS流，代码示例如下：

<template>
  <div>
    <video ref="videoPlayer" controls autoplay></video>
  </div>
</template>

<script>
import Hls from 'hls.js';

export default {
  mounted() {
    const videoSrc = "http://your-server-ip/hls/stream.m3u8";
    const videoElement = this.$refs.videoPlayer;

    if (Hls.isSupported()) {
      const hls = new Hls();
      hls.loadSource(videoSrc);
      hls.attachMedia(videoElement);
    } else if (videoElement.canPlayType('application/vnd.apple.mpegurl')) {
      // Safari原生支持HLS
      videoElement.src = videoSrc;
    }
  },
};
</script>

方案二：RTSP → WebSocket + WebRTC（低延迟）

若对延迟要求较低，可采用此方案，需后端支持，如使用Janus Gateway或Mediasoup。

1. 后端WebRTC信令服务：以Node.js + ffmpeg + ws为例，代码如下：

const WebSocket = require('ws');
const { exec } = require('child_process');

const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', (ws) => {
  const ffmpeg = exec('ffmpeg -i rtsp://摄像头地址 -f mpegts -codec:v mpeg1video -');
  ffmpeg.stdout.on('data', (data) => {
    ws.send(data);
  });
});

2. Vue前端通过WebRTC播放：使用jsmpeg库，代码示例如下：

<template>
  <canvas ref="videoCanvas"></canvas>
</template>

<script>
import { JSMpeg } from 'jsmpeg';

export default {
  mounted() {
    const wsUrl = 'ws://your-server:8080';
    const canvas = this.$refs.videoCanvas;
    new JSMpeg.Player(wsUrl, { canvas });
  },
};
</script>

方案三：使用现成转流服务

• 云服务：如阿里云视频直播、腾讯云直播，将RTSP推流到云服务，前端拉取HLS/DASH。
• 开源中间件：如ZLMediaKit，支持RTSP转WebRTC/HLS/FLV。

注意事项

• 摄像头认证：RTSP地址通常格式为rtsp://username:password@ip:port/path，例如海康威视默认路径为/Streaming/Channels/101。
• 跨域问题：要确保HLS/WebSocket服务配置了CORS。
• 延迟优化：HLS默认延迟较高（约5-10秒），可通过缩短hls_time或使用WebRTC来降低延迟。
• 安全性：避免RTSP密码明文传输，建议使用HTTPS/WSS。

各方案对比总结

推荐先从HLS方案开始快速验证，再根据实际需求升级到WebRTC。