当前位置：首页 > VUE

vue实现rtsp直播视频

2026-01-21 15:49:17VUE

Vue 中实现 RTSP 直播视频

RTSP（Real Time Streaming Protocol）是一种实时流媒体协议，常用于监控摄像头等场景。由于浏览器原生不支持直接播放 RTSP 流，需要通过转码或中间件实现。以下是几种常见方法：

使用 WebSocket + FFmpeg 转码

通过后端将 RTSP 流转码为 WebSocket 支持的格式（如 HLS 或 WebRTC），前端通过视频标签播放。

后端转码
使用 FFmpeg 将 RTSP 流转码为 HLS 或 WebRTC 支持的格式：

ffmpeg -i rtsp://your-stream-url -c:v libx264 -preset ultrafast -tune zerolatency -f hls -hls_time 2 -hls_list_size 3 -hls_flags delete_segments output.m3u8

前端播放
在 Vue 中使用 video.js 或 hls.js 播放 HLS 流：

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

<script>
import videojs from 'video.js';
import 'video.js/dist/video-js.css';

export default {
  mounted() {
    this.player = videojs(this.$refs.videoPlayer, {
      sources: [{
        src: 'http://your-server/output.m3u8',
        type: 'application/x-mpegURL'
      }]
    });
  },
  beforeDestroy() {
    if (this.player) this.player.dispose();
  }
};
</script>

使用 WebRTC 传输

通过 WebRTC 直接传输 RTSP 流，需借助后端服务（如 janus-gateway 或 medooze）。

后端配置
使用 janus-gateway 将 RTSP 流转发为 WebRTC 流。

前端实现
在 Vue 中通过 webrtc-adapter 播放：

<template>
  <video ref="videoPlayer" autoplay playsinline></video>
</template>

<script>
export default {
  mounted() {
    const pc = new RTCPeerConnection();
    pc.addTransceiver('video', { direction: 'recvonly' });
    pc.ontrack = (event) => {
      this.$refs.videoPlayer.srcObject = event.streams[0];
    };
    // 与后端 WebRTC 信令交互
  }
};
</script>

使用第三方库（如 flv.js 或 rtsp-relay）

部分库支持将 RTSP 流转为浏览器兼容格式。

rtsp-relay 方案
通过 Node.js 中间件转发 RTSP 为 WebSocket 流：

const { proxy } = require('rtsp-relay');
const app = require('express')();

app.ws('/api/stream', proxy({ url: 'rtsp://your-stream-url' }));

前端播放
使用 flv.js 播放转发的流：

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

<script>
import flvjs from 'flv.js';

export default {
  mounted() {
    if (flvjs.isSupported()) {
      const player = flvjs.createPlayer({
        type: 'flv',
        url: 'ws://your-server/api/stream'
      });
      player.attachMediaElement(this.$refs.videoPlayer);
      player.load();
    }
  }
};
</script>