vue实现rtsp视频功能

实现RTSP视频流在Vue中的播放方案

方案一：使用WebRTC转流（推荐） RTSP协议无法直接在浏览器中播放，需通过转流服务转换为WebRTC或HLS格式。FFmpeg+Node.js转流方案：

// 后端转流服务示例（Node.js）
const ffmpeg = require('fluent-ffmpeg');
const WebSocket = require('ws');

const streamRTSPToWebRTC = (rtspUrl, ws) => {
  ffmpeg(rtspUrl)
    .inputOptions('-rtsp_transport', 'tcp')
    .outputOptions('-f', 'mpegts')
    .on('error', err => console.error(err))
    .pipe(ws, { end: true });
};

前端使用video.js播放：

<template>
  <video ref="videoPlayer" class="video-js"></video>
</template>

<script>
import videojs from 'video.js';
export default {
  mounted() {
    this.player = videojs(this.$refs.videoPlayer, {
      techOrder: ['html5'],
      sources: [{
        src: 'ws://your-websocket-stream-url',
        type: 'application/x-mpegURL'
      }]
    });
  }
}
</script>

方案二：HLS转流方案 使用FFmpeg将RTSP转为HLS：

ffmpeg -i rtsp://your-stream -c:v libx264 -hls_time 4 -hls_list_size 6 -hls_flags delete_segments -f hls ./stream.m3u8

前端使用hls.js播放：

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

<script>
import Hls from 'hls.js';
export default {
  mounted() {
    const video = this.$refs.videoPlayer;
    if (Hls.isSupported()) {
      const hls = new Hls();
      hls.loadSource('http://your-server/stream.m3u8');
      hls.attachMedia(video);
    }
  }
}
</script>

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

1. 使用ZLM（ZLMediaKit）等开源媒体服务器
2. 配置RTSP转WebRTC：

   ./MediaServer -d -s ./ssl.pem -m 3 -r rtsp://your-stream

注意事项

• 跨域问题需配置CORS
• HTTPS环境下才能使用WebRTC
• 转流服务器需靠近视频源以减少延迟
• 硬件加速推荐使用NVIDIA GPU的FFmpeg转码

性能优化建议

• 降低分辨率：ffmpeg -i rtsp://src -vf scale=1280:720
• 控制码率：-b:v 1500k
• 关键帧间隔：-g 50
• 使用硬件加速：-c:v h264_nvenc（NVIDIA）或-c:v h264_qsv（Intel）