[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-81189":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":15,"forks30d":15,"starsTrendScore":17,"compositeScore":19,"rankGlobal":10,"rankLanguage":10,"license":10,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":22,"hasPages":20,"topics":23,"createdAt":10,"pushedAt":10,"updatedAt":24,"readmeContent":25,"aiSummary":26,"trendingCount":15,"starSnapshotCount":15,"syncStatus":16,"lastSyncTime":27,"discoverSource":28},81189,"rtsp","flyfish-dev\u002Frtsp","flyfish-dev","Public release artifacts for RTSP Chrome runtime and SDK","https:\u002F\u002Frtsp-roan.vercel.app",null,"JavaScript",34,8,27,0,2,6,7,2.86,false,"main",true,[],"2026-06-12 02:04:12","# RTSP\n\nRTSP 是一个完整的 RTSP 播放方案：Chrome 扩展、通用 Web\u002FReact\u002FVue 组件、Electron\u002FTauri 桌面免插件应用共用同一个 Go 原生网关。\n\n项目同时交付三种接入方式：\n\n1. **Chrome 扩展方案**：扩展 content script 自动挂载 `\u003Crtsp-player>`，适合统一管控的业务页面。\n2. **通用组件方案**：`@rtsp\u002Fplayer` 提供 plain JS\u002FWeb Component、React、Vue 入口，并内置预构建 SDK，适合业务应用显式接入。\n3. **桌面免插件方案**：Electron\u002FTauri 打包 Go sidecar，应用内直接原生播放 RTSP，无需安装 Chrome 扩展。\n\n目标体验：安装扩展和本地 Go Runtime 后，业务网页只需要写：\n\n```html\n\u003Crtsp-player\n  url=\"rtsp:\u002F\u002Fuser:pass@192.168.1.64:554\u002FStreaming\u002FChannels\u002F101\"\n  width=\"640\"\n  height=\"360\"\n  autoplay\n  controls>\n\u003C\u002Frtsp-player>\n```\n\n不使用 FFmpeg。Native 端实现：\n\n- Chrome Native Messaging Host 协议\n- 本地 HTTP API\n- 本地 WebSocket server\n- RTSP over TCP interleaved\n- Basic\u002FDigest RTSP authentication\n- SDP H.264 track selection\n- RTP\u002FH.264 depayload：Single NALU、STAP-A、STAP-B、MTAP16\u002F24、FU-A、FU-B、Annex-B-in-RTP 兼容\n- RTP\u002FH.265 depayload：Single NALU、AP、FU\n- H.264\u002FH.265 SDP track selection\n- H.264\u002FH.265 Annex-B access unit 输出\n- Pion WebRTC RTP passthrough + Annex-B-in-RTP repacketize\n- 多路并发 stream lifecycle：per-stream `streamId`、pending\u002Factive 状态、主动 stop 清理\n- 播放中断自恢复：解码器软重建、WebRTC\u002FWS 停滞检测、指数退避整路重启\n\n浏览器端默认优先 WebRTC，兼容 H.264\u002FH.265；WebRTC 协商失败或 15 秒内没有可渲染视频帧时，自动回退 WebSocket + WebCodecs `VideoDecoder` 硬件优先解码。遇到摄像头把 Annex-B H.264 起始码直接塞进 RTP payload 的非标准流时，WebSocket 路径会容错拆包，WebRTC 路径会重新封装成浏览器可接收的 RTP。\n\n> H.265\u002FHEVC 能力依赖浏览器、Electron Chromium、Tauri 系统 WebView、操作系统 codec 和硬件。生产建议保留 H.264 子码流作为回退。\n\n## 目录\n\n```txt\nnative\u002F       Go Native Host + Gateway + RTSP\u002FWebRTC implementation\nextension\u002F    Chrome MV3 extension, player iframe, content-script component\nweb-sdk\u002F      Optional standalone SDK custom element\npackages\u002F     Universal SDK package: JS\u002FWeb Component, React, Vue\napps\u002F         Electron and Tauri desktop apps\nscripts\u002F      Build and Native Messaging Host install scripts\nsite\u002F         Vercel homepage and documentation site\n```\n\n## 三种方案\n\n### 方案一：Chrome 扩展 Runtime\n\n适合企业内网、NVR 管理台、SaaS 业务页面。页面只写原生标签，扩展自动注入播放器 iframe。\n\n```html\n\u003Crtsp-player\n  url=\"rtsp:\u002F\u002Fuser:pass@192.168.1.64:554\u002FStreaming\u002FChannels\u002F101\"\n  width=\"960\"\n  height=\"540\"\n  autoplay\n  controls>\u003C\u002Frtsp-player>\n```\n\n### 方案二：通用组件 SDK\n\n适合业务前端工程显式依赖 SDK。构建产物在 `packages\u002Frtsp-sdk\u002Fdist\u002F`，免构建脚本同步输出到 `web-sdk\u002Frtsp-player-sdk.js`。\n\nPlain HTML:\n\n```html\n\u003Cscript\n  src=\"\u002Frtsp-player-sdk.js\"\n  data-extension-id=\"你的扩展ID\">\u003C\u002Fscript>\n\n\u003Crtsp-player url=\"rtsp:\u002F\u002Fuser:pass@camera\u002Fstream\" autoplay controls>\u003C\u002Frtsp-player>\n```\n\nReact:\n\n```jsx\nimport { RtspPlayer } from \"@rtsp\u002Fplayer\u002Freact\";\n\n\u003CRtspPlayer\n  extensionId=\"你的扩展ID\"\n  url=\"rtsp:\u002F\u002Fuser:pass@camera\u002Fstream\"\n  autoplay\n  controls\n\u002F>;\n```\n\nVue:\n\n```vue\n\u003Cscript setup>\nimport { RtspPlayer } from \"@rtsp\u002Fplayer\u002Fvue\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CRtspPlayer\n    extension-id=\"你的扩展ID\"\n    url=\"rtsp:\u002F\u002Fuser:pass@camera\u002Fstream\"\n    autoplay\n    controls\n  \u002F>\n\u003C\u002Ftemplate>\n```\n\n### 方案三：Electron \u002F Tauri 免插件桌面应用\n\n适合桌面监控台、内网工具、离线部署。应用内启动 Go sidecar，播放器走 `runtime=\"desktop\"`。\n\n```html\n\u003Crtsp-player\n  runtime=\"desktop\"\n  transport=\"auto\"\n  codec=\"auto\"\n  url=\"rtsp:\u002F\u002Fuser:pass@camera\u002Fstream\"\n  autoplay\n  controls>\n\u003C\u002Frtsp-player>\n```\n\n`transport=\"auto\"` 默认 WebRTC first，失败后回退 `ws-annexb`。\n\n更多文档见 `docs\u002F`：\n\n- `docs\u002Foverview.md`\n- `docs\u002Fchrome-extension.md`\n- `docs\u002Fweb-component-gateway.md`\n- `docs\u002Funiversal-components.md`\n- `docs\u002Fdesktop-native.md`\n- `docs\u002Fmulti-stream-lifecycle.md`\n- `docs\u002Fwebrtc-hevc.md`\n- `docs\u002Fxiaomi-rtsp.md`\n- `docs\u002Fonline-demo.md`\n- `docs\u002Finstallers.md`\n- `docs\u002Fsdk-api.md`\n- `docs\u002Fsecurity.md`\n- `docs\u002Fdeployment.md`\n- `docs\u002Fvalidation.md`\n- `docs\u002Ftroubleshooting.md`\n\n## 全链路\n\n```txt\n业务网页 \u003Crtsp-player url=\"rtsp:\u002F\u002F...\">\n  ↓ content script 挂载组件 \u002F 或 web-sdk 创建 iframe\nChrome extension player iframe\n  ↓ chrome.runtime.sendMessage\nExtension service worker\n  ↓ chrome.runtime.sendNativeMessage(\"com.rtspweb.player\")\nGo Native Host 短进程\n  ↓ 确保本地 Gateway daemon 已启动\nGo Gateway 127.0.0.1:\u003Crandom>\n  ↓ RTSP over TCP interleaved\nCamera \u002F NVR\n  ↓ RTP\u002FH264 depay → Annex-B access unit\nGateway WebRTC \u002F WebSocket fallback\n  ↓ RTP passthrough \u002F RTP repacketize \u002F binary access unit\nPlayer iframe \u002F desktop webview\n  ↓ WebRTC hardware decode or WebCodecs prefer-hardware\nCanvas\n```\n\n## 一键安装包\n\n推荐终端用户直接使用发布包：\n\n```txt\nhttps:\u002F\u002Frtsp.flyfish.dev\u002Fdownloads\u002Frtsp-macos-installer.dmg\nhttps:\u002F\u002Frtsp.flyfish.dev\u002Fdownloads\u002Frtsp-macos-installer.zip\nhttps:\u002F\u002Frtsp.flyfish.dev\u002Fdownloads\u002Frtsp-windows-installer.zip\nhttps:\u002F\u002Frtsp.flyfish.dev\u002Fdownloads\u002Frtsp-linux-installer.tar.gz\nrelease\u002Finstallers\u002Frtsp-macos-installer.dmg\nrelease\u002Finstallers\u002Frtsp-macos-installer.zip\nrelease\u002Finstallers\u002Frtsp-windows-installer.zip\nrelease\u002Finstallers\u002Frtsp-linux-installer.tar.gz\n```\n\n三端安装包都提供图形入口：\n\n- macOS：打开 DMG 后运行 `RTSP Installer.app`。\n- Windows：解压后运行 `RTSP Installer.hta`。\n- Linux：解压后运行 `RTSP Installer.desktop`，或运行 `install-gui.sh`。\n\n图形安装器会根据系统语言显示中文或英文，准备本地 Runtime、复制 Chrome 扩展目录、注册 Native Messaging Host，并打开 Chrome 扩展页。脚本入口保留为备用。\n\n发布包由维护者统一构建，普通用户只需要下载并运行当前系统的安装器。\n\n固定 Chrome 扩展 ID：\n\n```txt\ngiegomfhcmgebjhdiihnjohoinkbcjbh\n```\n\nChrome 仍然要求用户在 `chrome:\u002F\u002Fextensions` 中手动点击 **Load unpacked**。安装器会打开对应页面，并把 extension 目录复制到剪贴板或显示在完成提示中。\n\n## 开发安装\n\n### 1. 构建 Go Native Runtime\n\nLinux\u002FmacOS:\n\n```bash\n.\u002Fscripts\u002Fbuild.sh\n```\n\nWindows PowerShell:\n\n```powershell\n.\u002Fscripts\u002Fbuild.ps1\n```\n\n输出在 `dist\u002F`。\n\n### 桌面应用开发\n\nElectron:\n\n```bash\nnpm run build:sdk\n.\u002Fscripts\u002Fbuild.sh\ncd apps\u002Felectron\nnpm install\nnpm run start\n```\n\nTauri:\n\n```bash\nnpm run build:sdk\n.\u002Fscripts\u002Fbuild.sh\nnpm run build:desktop\ncd apps\u002Ftauri\nnpm install\nnpm run dev\n```\n\n### 2. 加载 Chrome 扩展\n\n打开：\n\n```txt\nchrome:\u002F\u002Fextensions\n```\n\n开启 Developer mode，点击 **Load unpacked**，选择本仓库的 `extension\u002F` 目录。\n\n扩展 ID 已通过 manifest key 固定为：\n\n```txt\ngiegomfhcmgebjhdiihnjohoinkbcjbh\n```\n\n### 3. 注册 Native Messaging Host\n\nmacOS:\n\n```bash\n.\u002Fscripts\u002Finstall-host.sh giegomfhcmgebjhdiihnjohoinkbcjbh .\u002Fdist\u002Frtsp-web-native-darwin-arm64\n```\n\nLinux:\n\n```bash\n.\u002Fscripts\u002Finstall-host.sh giegomfhcmgebjhdiihnjohoinkbcjbh .\u002Fdist\u002Frtsp-web-native-linux-amd64\n```\n\nWindows PowerShell:\n\n```powershell\n.\u002Fscripts\u002Finstall-host.ps1 -ExtensionId giegomfhcmgebjhdiihnjohoinkbcjbh -BinaryPath .\\dist\\rtsp-web-native-windows-amd64.exe\n```\n\n### 4. 检测\n\n点击 Chrome 扩展图标，看到：\n\n```txt\nNative Runtime 正常，Gateway 端口：xxxxx\n```\n\n如果客户现场 VLC 正常但网页无法播放，打开同一个弹窗里的 **日志与诊断**：\n\n- **刷新日志**：读取扩展日志、Native Gateway 日志、PID、端口和版本。\n- **复制日志**：生成可直接发给技术支持的诊断文本。\n- **重启 Native**：清理当前记录的旧 Gateway 进程并拉起已安装的新版本。\n\n日志会记录 RTSP OPTIONS \u002F DESCRIBE \u002F SETUP \u002F PLAY、WebRTC 协商、WebSocket 回退和浏览器解码错误，并自动遮蔽 RTSP 账号密码。\n\n如果 VLC\u002FFFmpeg 能播放但浏览器无画面，重点看日志里的 `webrtc backend: vdk|pion`、`vdk rtsp codec update received`、`vdk webrtc write packet failed`、`h264 annexb-in-rtp`、`h264 fu-a annexb-fragment`、`h264 runtime parameter sync`、`webrtc repacketize soft-starting h264 after parameters`、`h264 sps oversized dropped`、`h264 sps salvaged inline nalus`、`webrtc answer profile-level-id upgraded`、`webrtc rtcp browser PLI\u002FFIR forwarded`。从 `0.1.14` 开始，Native 会兼容 Annex-B-in-RTP 这类非标准 H.264 RTP；`0.1.15` 继续补齐运行中才出现 PPS、长期等不到标准 IDR 标识的摄像头流，WebSocket\u002FWebCodecs 路径会同步参数集并尽快出首帧，WebRTC 路径会在不转码的前提下软启动和重新封装 RTP；`0.1.16` 会丢弃部分国产摄像头在 SPS NAL 中夹带的厂商私有元数据（一般 >80KB），避免每个关键帧被放大数十倍而导致周期性卡顿、帧回退以及 WebRTC 解码失败；`0.1.17` 重做了 native host 的启动互斥锁——加快路径、记录持有者 PID、修复 Windows 上的进程存活探测——消除频繁出现的 `gateway startup lock timeout`；`0.1.18` 在丢弃超大 vendor SPS 的同时，从其内部 Annex-B 数据中抢救出真实的 SPS\u002FPPS\u002FIDR——某些 RTSP 透传链路（如 natapp）会把真关键帧夹在 vendor SPS 的 FU-A 分片中间，0.1.17 一并丢掉造成完全无画面，0.1.18 恢复正常播放；`0.1.19` 让 WebRTC 真正能播 baseline 4.x 等高 level 码流：SDP answer 中的 H.264 `profile-level-id` 升级为 `42c033`（baseline level 5.1）让 Chrome 解码器按高 level 配置接受 4.x SPS，浏览器侧的 RTCP PLI\u002FFIR 反馈会被 `drainRTCP` 解析并通过新的 `Client.RequestKeyframe()` 转发为 RTSP RTCP keyframe 请求形成完整的端到端反馈回路，关键帧前的 SPS\u002FPPS\u002FSEI 用单个 STAP-A 聚合下发让首帧更快、对包丢失更鲁棒，WebRTC 首帧超时从 5 秒延长到 8 秒；`0.1.20` 把 WebRTC 路径切到 `deepch\u002Fvdk`（与 `deepch\u002FRTSPtoWeb` 同源的成熟 Go 流媒体库），不再追着每一个怪摄像头打手写补丁——vdk 的 RTSP demuxer 把干净 SPS\u002FPPS 单独抽到 CodecData、muxer 在每个 IDR 前重新注入，Pion 的 `TrackLocalStaticSample` 接管 RTP 重打包，从根本上解决\"VLC 能播浏览器不能播\"的兼容性问题，需要回退到旧路径可通过 `RTSP_WEBRTC_BACKEND=pion` 环境变量切换。\n\n### 5. 授权业务页面 origin\n\n扩展弹窗里添加页面来源，例如：\n\n```txt\nhttp:\u002F\u002Flocalhost:5173\nhttps:\u002F\u002Fyour-app.example.com\n```\n\n也可以只在内网调试时使用 `*`，正式环境不要这样做。\n\n### 6. 网页使用组件\n\n如果扩展 content script 已覆盖你的站点，直接写：\n\n```html\n\u003Crtsp-player\n  url=\"rtsp:\u002F\u002Fuser:pass@192.168.1.64:554\u002FStreaming\u002FChannels\u002F101\"\n  width=\"960\"\n  height=\"540\"\n  autoplay\n  controls>\n\u003C\u002Frtsp-player>\n```\n\n可监听事件：\n\n```js\nconst p = document.querySelector('rtsp-player');\np.addEventListener('ready', () => console.log('ready'));\np.addEventListener('error', (e) => console.error(e.detail.error));\n```\n\n如果你不想依赖 content script，也可以使用 `web-sdk\u002Frtsp-player-sdk.js`：\n\n```html\n\u003Cscript\n  type=\"module\"\n  src=\"\u002Frtsp-player-sdk.js\"\n  data-extension-id=\"你的扩展ID\">\u003C\u002Fscript>\n\n\u003Crtsp-player url=\"rtsp:\u002F\u002F...\">\u003C\u002Frtsp-player>\n```\n\n## 生产化建议\n\n1. 把 `extension\u002Fmanifest.json` 的 content script matches 限定为你的业务域名，避免所有网页都能创建 RTSP 组件。\n2. 当前 unpacked 扩展已固定 ID；后续发布到 Chrome Web Store 后建议把安装助手切到 Web Store 页面。\n3. 用安装器一次性安装：Chrome 扩展目录、本地 Go 二进制、Native Messaging manifest。\n4. 本地 Gateway 已经只监听 `127.0.0.1`，并使用 Native Host secret + 单次 stream token。\n5. RTSP URL 不放在 iframe query string，避免账号密码泄漏到日志、历史记录或 Referer。\n6. 摄像头建议同时准备 H.264 子码流和 H.265\u002FH.264 主码流；默认 WebRTC first，必要时切 H.264 回退。\n\n## 协议说明\n\nGateway → Browser WebSocket：\n\n1. 文本帧：\n\n```json\n{\"type\":\"config\",\"codec\":\"avc1.64001F\",\"format\":\"annexb\",\"mediaTransport\":\"ws-annexb\"}\n```\n\n2. 二进制帧：\n\n```txt\nbyte 0      message type = 1\nbyte 1      key frame flag: 1 key, 0 delta\nbyte 2..3   reserved\nbyte 4..11  uint64 little-endian timestamp_us\nbyte 12..15 uint32 little-endian payload length\nbyte 16..   H.264 Annex-B access unit\n```\n\nWebCodecs H.264\u002FH.265 使用 Annex-B 模式，因此 `VideoDecoderConfig.description` 不设置。WebRTC 路径优先直接转发摄像头 RTP；遇到 Annex-B-in-RTP 或非标准 FU-A\u002FFU-B 外壳时，会在 Native 内重新封装为浏览器可接收的 H.264 RTP，不做编码转码。\n\n## 限制\n\n- 当前只实现 RTSP over TCP interleaved；这是摄像头\u002FNVR 最稳定的浏览器转流路径。\n- 当前只传视频，不传音频。\n- 不做转码和软件解码；浏览器不支持当前 H.264\u002FH.265 profile\u002Flevel 时，需要调整摄像头编码参数。\n- WebRTC\u002FH.265 取决于浏览器、系统 WebView、操作系统和硬件能力。\n- 真实播放流畅度仍取决于摄像头 GOP、码率、网络、WebRTC\u002FWebCodecs 支持和硬件解码能力。\n\n## 联系与支持\n\n如需定制集成、企业部署或问题反馈，可以通过下方方式联系。觉得项目有帮助，也欢迎支持维护。\n\n| 客服联系 | 微信打赏 | 支付宝打赏 | 公众号 |\n| --- | --- | --- | --- |\n| ![客服联系](https:\u002F\u002Frtsp.flyfish.dev\u002Fimages\u002Fcontact.jpg) | ![微信打赏](https:\u002F\u002Frtsp.flyfish.dev\u002Fimages\u002Fdonate-wx.jpg) | ![支付宝打赏](https:\u002F\u002Frtsp.flyfish.dev\u002Fimages\u002Fdonate-alipay.jpg) | ![公众号](https:\u002F\u002Frtsp.flyfish.dev\u002Fimages\u002Fmp.png) |\n","RTSP 是一个全面的 RTSP 播放解决方案，支持 Chrome 扩展、Web\u002FReact\u002FVue 组件以及 Electron\u002FTauri 桌面应用。项目核心功能包括通过 Go 语言实现的原生网关来处理 RTSP 流，并提供了多种接入方式：Chrome 扩展自动挂载播放器组件、通用 Web 组件显式集成和桌面免插件应用。技术特点上，它利用了 Chrome Native Messaging Host 协议、本地 HTTP API 和 WebSocket server 等技术，支持 RTSP over TCP interleaved 和多种 H.264\u002FH.265 编解码格式。适用于需要在网页或桌面环境中播放 RTSP 流的企业内网管理、SaaS 业务页面及离线部署场景。","2026-06-11 04:03:50","CREATED_QUERY"]