関連スライド
各ページのテキスト
TS-Live! Wasm+ffmpeg(not ffmpeg.wasm)を使って MPEG2-TSのMPEG2Videoをブラウザで再生する！ こーのいけ @ 新宿御苑.wasm #2024.12.11
Who am I こーのいけ 色々やってるフリーランスエンジニア 画像処理・映像処理・リアルタイムコミュニケーション・IoT X: ko_noike GitHub/Zenn etc. : kounoike
おことわり • 個人の趣味としてのプロダクトです • 企業が事業として行うとAACデコードの特許だとか、アレのアレとかが 問題になるかもしれません • そういうわけでスライドではぼかして書いてるところがあります • 公衆再送信ダメ絶対!
MPEG2-TS • MPEG2 Transport Stream形式 • 188バイトのパケットで映像・音声などを格納するエレメンタリストリームを伝送する ための規格 • HLS(HTTP Live Streaming)とかでも使われる • ここにも、そこにも、あそこにも…どこにでもある（？）
Chinachu/mirakurun, mirakc /mirakc • チューナーからの出力をいい感じ（？）に処理して、MPEG2-TSをhttp ストリームに載せて送ってくれるサーバ • ビデオストリームはMPEG-2でエンコードされている • オーディオストリームはAACでエンコードされている
もやもや… MPEG2Videoって ブラウザで再生出来ないんだ よなあ… WebCodecsにもないし ffmpeg.wasmってコマンド ラインffmpegのwasm化で あって、何でも出来るわけじゃ ないんだよなあ… でもffmpeg自体はWasmで ビルド出来るのか…
思いつき ffmpegをライブラリとして使う (libavcodecとか)と、ブラウザで MPEG2Videoが再生できるじゃん!
作った https://github.com/ts-live/ts-live https://ts-live.pages.dev/ ファイルに落としたTS再生はシークとか難しいので とりあえずライブ視聴専用
全体構成 Next.js app WebAssembly(emscripten) MPEG-TS Over http(s) stream mirakurun /mirakc fetch(JS) Video Stream wasm call MPEG2 decode Video Buffer WebGPU CANVAS 同期 TS Buffer Audio Stream AAC decode Audio Buffer WebAudio Subtitle Stream 字幕のこと Cloudflare pagesでサーブ
細かい話 • 正確には入力をffmpegにかける前にxtne6f/tsreadexで安定化 • PID一定にしたり、デュアルモノ対応したり • デュアルモノは対応出来たけど、6.1chサラウンドを別で対応したり… • 表示にWebGPUを通しているのはインターレース解除のため • Ffmpegのソース読んで理解したYadifをWebGPUに移植 • 同期（リップシンク）で色々面倒なことを頑張ってる • ざっくり言うと映像のコマを捨てたりして、音が再生されるタイミングちょうどの映像を 表示する • 音が再生されるタイミングを知る＝システム全体のバッファのサイズを知る • emscriptenのSDL2だとこれが上手くいかなかった
細かい話（２） • demux/video decode/audio decodeなどをスレッドに分ける • SharedArrayBufferが必要になりSecure Context(localhost or https) 必須 • CORS対応が必要 →mirakurun/mirakcをnginxでproxyしてtailscaleでhttps化/VPN でアクセス制御（公衆送信は絶対NG!）
性能とか • 今どきのPCならMPEG-2デコードをCPU処理でやってもほとんど問題ない • Yadifかけるのはつらかったので頑張ってWebGPU化した • スマホでもPixel 8では動いた • どこまでスペック下げても大丈夫かは不明
動作環境 • メインターゲットはChrome(desktop)を想定 • Android ChromeにもWebGPUが来たので試したら動いた • iOS/iPadOS SafariがそろそろWebGPU来そうで、そのまま動くかも？ • Mac Safariでやった結果、ちょっと調整が必要そうだったような記憶 • Firefox？ ごめんなさい。手が回りません
作ってみて • これまでの常識を覆す画期的技術として界隈に知られる（？） • でも多分、日常的にこれ使って見てる人は私一人 • WebでWasm! というと最近肩身が狭い（なぜ？）けど、Webでの Wasm利用の王道という感じの使い方が出来て楽しかった • ×速いから！ • ×安全だから！ • 〇既存のC++資産が活用できるから！ • 6.1chのバグが分かりやすいのが特定時期限定のものなのでその期間内 に解決しようと集中して頑張った