WebRTC First + Go Gateway + WebCodecs Fallback

RTSP

面向业务网页和桌面应用的 RTSP 播放方案：默认 WebRTC 低延迟硬解，兼容 H.264/H.265；兼容性不足时自动回退 WebSocket + WebCodecs。

在线体验快速开始查看文档

RTSP player rendering a public H.264 RTSP stream — 公网 RTSP 源全链路验证：WebRTC first · WebCodecs fallback · queue 0

Three Delivery Schemes

三种交付方案

Chrome 扩展 Runtime

适合统一管控的业务页面。安装扩展和 Native Host 后，页面直接写原生标签。

<rtsp-player
  url="rtsp://user:pass@camera/stream"
  width="960"
  height="540"
  autoplay
  controls></rtsp-player>

content script 自动挂载组件
popup 管理 allowed origins、日志与诊断
Native Messaging 只走启动和控制面

通用组件 SDK

适合应用团队显式接入。内置 Web Component、React、Vue 和免构建脚本。

import { RtspPlayer } from "@rtsp/player/react";

<RtspPlayer
  extensionId="YOUR_EXTENSION_ID"
  url="rtsp://camera/stream"
  autoplay
  controls
/>

plain JS / script tag 开箱即用
React 和 Vue 封装保持同一事件语义
预构建 dist 可直接进入业务仓库

Electron / Tauri 免插件

适合桌面监控台和内网工具。应用打包 Go sidecar，无需安装浏览器插件。

<rtsp-player
  runtime="desktop"
  transport="auto"
  codec="auto"
  url="rtsp://camera/stream"
  autoplay
  controls></rtsp-player>

WebRTC first，WebSocket fallback
Electron IPC / Tauri command 启动 runtime
H.265 通过能力探测启用

Online Demo

打开就能试，装好 runtime 就能播真实 RTSP

默认 Demo 使用浏览器 Canvas 模拟低延迟监控画面，适合快速体验布局、状态、控制和响应。真实 RTSP 体验需要先安装 Chrome 扩展与 Native Runtime。播放时优先尝试 WebRTC，兼容性不足时自动切换到 WebSocket/WebCodecs。

FPS: 60
Latency: 48ms
Queue: 0
Dropped: 0

Real Stream Lab

真实 RTSP 体验台

先在扩展 popup 中授权 https://rtsp.flyfish.dev，再启动真实播放。

等待真实 RTSP 输入 安装 runtime 后，这里会挂载扩展播放器 iframe。

Quickstart

四步跑起来

下载并运行当前系统的图形安装器。
安装完成后，按提示打开 Chrome 扩展页。
开启 Developer mode，点击 Load unpacked，选择安装器准备好的 extension 目录。
回到在线 Demo 或业务页面，填入 RTSP 地址开始播放。

npm install
npm run build
cd native && go test ./...

# public validation stream
rtsp://9627b0bf2a7b.entrypoint.cloud.wowza.com:1935/app-p5260J38/66abe4b9_stream1

Universal Components

JS、React、Vue 同一运行时

<script
  src="/rtsp-player-sdk.js"
  data-extension-id="YOUR_EXTENSION_ID"></script>

<rtsp-player
  url="rtsp://camera/stream"
  transport="auto"
  codec="auto"
  width="960"
  height="540"
  autoplay
  controls></rtsp-player>

import { RtspPlayer } from "@rtsp/player/react";

export function Camera() {
  return (
    <RtspPlayer
      extensionId="YOUR_EXTENSION_ID"
      url="rtsp://camera/stream"
      transport="auto"
      codec="auto"
      width="100%"
      height={540}
      autoplay
      controls
    />
  );
}

<script setup>
import { RtspPlayer } from "@rtsp/player/vue";
</script>

<template>
  <RtspPlayer
    extension-id="YOUR_EXTENSION_ID"
    url="rtsp://camera/stream"
    transport="auto"
    codec="auto"
    width="100%"
    :height="540"
    autoplay
    controls
  />
</template>

正在加载文档…

Validated

已用公网 RTSP 源完成真实验证

浏览器 E2E 收到 RTSP_PLAYER_READY，截图像素校验通过。新版默认 WebRTC first，并保留 H.264/H.265 Annex-B 回退。

Codec: H.264/H.265
FPS: 30+
Queue: 0
Transport: WebRTC first