red5pro/moq-playa

# Red5 Playa – 用于可扩展实时流媒体的模块化 MOQ 播放器框架 基于 TypeScript 的 **Media over QUIC Transport (MoQT)** 参考实现——这是构建在 WebTransport 之上的下一代实时媒体流协议。 涵盖从 WebTransport 到 viewport 的全栈实现，提供两种集成路径： - **`@moqt/*`** — 参考实现工具包：协议、播放、浏览器适配器 - **`@playa/player`** — 基于 `@moqt/*` 构建的功能完备、开箱即用的播放器 ## 快速开始 ### `@playa/player` — 开箱即用的播放器 ``` import { Player } from '@playa/player'; const player = new Player(document.getElementById('container')!, { url: 'https://relay.example.com/moq', namespace: 'live/broadcast', }); await player.load(); player.play(); ``` ### React / 自定义 DOM ``` const canvasRef = useRef(null); const videoRef = useRef(null); const player = new Player(null, { url: 'https://relay.example.com/moq', namespace: 'live/broadcast', canvas: canvasRef.current!, // WebCodecs path video: videoRef.current!, // MSE/CMAF fallback path }); await player.load(); player.play(); ``` 当直接提供元素时，播放器绝不会触碰 DOM——没有 `appendChild`，没有 `hidden` 切换，也不会修改样式。 ### `@moqt/player` — 协议级 API ``` import { MoqtPlayer } from '@moqt/player'; import { MoqtConnection } from '@moqt/webtransport'; import { createWebTransport, WebCodecsVideoDecoder, CanvasRenderer, WebCodecsAudioDecoder, WebAudioOutput, } from '@moqt/browser'; const player = new MoqtPlayer({ url: 'https://relay.example.com/moq', namespace: 'live/broadcast', draftVersion: 16, createTransport: createWebTransport(), createConnection: () => new MoqtConnection(16), createVideoDecoder: () => new WebCodecsVideoDecoder(), createRenderer: () => new CanvasRenderer(canvas), createAudioDecoder: () => new WebCodecsAudioDecoder(), createAudioOutput: () => new WebAudioOutput(), }); player.on('catalog_received', ({ catalog }) => { /* inspect tracks */ }); player.on('first_frame', () => { /* start your UI */ }); player.on('error', ({ error }) => { /* structured error with severity + code */ }); await player.load(); player.play(); ``` ## 浏览器与编解码器支持 | 浏览器 | H.264 | HEVC | AV1 | MSE/CMAF | |---------|-------|------|-----|----------| | Chrome 120+ | ✅ | ✅ (硬件) | ✅ | ✅ | | Firefox 120+ | ✅ | ❌ | ✅ | ✅ | | Safari 26.4+ | ✅ | ✅ | ❌ | ✅ | | Edge 120+ | ✅ | ✅ | ✅ | ✅ | 在配置每种编解码器之前，都会检查 `VideoDecoder.isConfigSupported()`。当编解码器不受支持时，解码器会正常关闭——不会出现解码错误循环，也不会出现画面卡帧。 **解码路径：** - **LOC (Low Overhead Container)** — WebCodecs 直接路径，延迟最低。支持 H.264、HEVC、AV1。 - **CMAF (分片 MP4)** — MSE + `

标签：MOQT, QUIC, TypeScript, WebCodecs, WebTransport, 安全插件, 流媒体, 自动化攻击, 音视频播放器