如何结合GStreamer在Node.js+Electron环境的Vue应用中播放RTSP流

方案1：GStreamer转WebRTC（低延迟首选，延迟<200ms） #

WebRTC是浏览器原生支持的实时通信协议，适合对实时性要求高的监控场景，无需额外安装播放器插件。

• GStreamer侧管线参考命令：
  gst-launch-1.0 rtspsrc location="你的RTSP流地址" latency=100 ! rtph264depay ! h264parse ! avdec_h264 ! x264enc tune=zerolatency ! rtph264pay ! webrtcbin stun-server=stun://stun.l.google.com:19302 name=send
• Vue侧核心实现：
  无需引入第三方播放器依赖，直接用原生RTCPeerConnection接口对接：

<template>
  <video ref="videoEl" autoplay muted playsinline></video>
</template>
<script setup>
import { ref, onMounted } from 'vue'
const videoEl = ref(null)

onMounted(() => {
  const peer = new RTCPeerConnection({
    iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
  })
  // 绑定流到video元素
  peer.ontrack = (e) => {
    videoEl.value.srcObject = e.streams[0]
  }
  // 补充和GStreamer的SDP、ICE候选交换逻辑即可完成播放
})
</script>

方案2：GStreamer转HLS（兼容性首选，延迟3~10s） #

HLS是苹果推出的流媒体协议，所有现代浏览器均支持，适合对延迟要求不高的场景，实现成本极低。

• GStreamer侧管线参考命令：
  gst-launch-1.0 rtspsrc location="你的RTSP流地址" ! rtph264depay ! h264parse ! mpegtsmux ! hlssink location="./static/hls/seg_%05d.ts" playlist-location="./static/hls/stream.m3u8" target-duration=2
  生成的m3u8索引文件和ts切片直接放到Vue应用的静态资源目录，或者用Nginx等Web服务托管即可。
• Vue侧核心实现：
  引入hls.js库适配非Safari浏览器：

<template>
  <video ref="videoEl" autoplay muted playsinline></video>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import Hls from 'hls.js'
const videoEl = ref(null)

onMounted(() => {
  const hlsUrl = '你的stream.m3u8访问地址'
  if (Hls.isSupported()) {
    const hls = new Hls()
    hls.loadSource(hlsUrl)
    hls.attachMedia(videoEl.value)
  } else if (videoEl.value.canPlayType('application/vnd.apple.mpegurl')) {
    // Safari原生支持HLS直接播放
    videoEl.value.src = hlsUrl
  }
})
</script>

方案3：GStreamer转WebSocket-FLV（平衡型，延迟1~3s） #

兼顾延迟和兼容性，适合大部分通用监控场景。

• GStreamer侧输出FLV格式流，推送到本地WebSocket中转服务，也可以直接用GStreamer的websocketsink插件直接输出WebSocket流。
• Vue侧引入flv.js库，对接WebSocket地址即可完成播放。

通用注意事项 #

• 不要尝试直接在前端解析RTSP协议，浏览器原生不支持该协议，纯前端软解码方案性能极差，不适合生产环境使用
• 转码时编码格式必须选择浏览器原生支持的类型：视频用H.264，音频用AAC/Opus，禁止使用H.265、PCM等不兼容编码
• 转码后的流资源需要和Vue应用配置同源，或者配置正确的CORS响应头，否则浏览器会拦截播放请求

内容的提问来源于stack exchange，提问作者Vlad