WebRTC と Wasm の関係を振り返ってみた

WebRTC Meetup Tokyo #28 登壇資料

[History]
・2024/10/24: tnohoさんから教えていただいたWasmのメリットを追記しました

Transcript

1. WebRTC と Wasm の関係を振り返ってみた tetter WebRTC Meetup Tokyo #28 OCT, 22, 2024 # for Beginners + Intermediates
2. 自己紹介 2 NAME: - tetter (Tetta Maeda) FEATURES: - WebRTC Meetup 運営 - moq-wasm (MOQTライブラリ) 書いてる - ワイン資格の勉強中 @tttr_mt tetter27 2017 2018 2022 前職 (通信事業会社) Android 〃 EdgeAI NTTコミュニケーションズ株式会社 WebRTC CARRIER:
3. 10周年イベントを振り返ってみて 3 - 思った以上に盛り上がり、最高のイベントでした https://www.youtube.com/watch?v=dyAj05V9ViQ
4. 10周年イベントを振り返ってみて 4 - 今後の WebRTC Meetup に期待すること → https://www.youtube.com/watch?v=dyAj05V9ViQ AI x WebRTCの新たな 使い方を発表してほしい AI を含めた技術を民主化 できるように標準化貢献 目指してほしい サーバサイドの AI 処理が注目されるかも
5. 10周年イベントを振り返ってみて 5 - 今後の WebRTC Meetup に期待すること → AI との組み合わせ https://www.youtube.com/watch?v=dyAj05V9ViQ じゃあキーワードは AI ってことで
7. おしながき 7 - 最近の AI x WebRTC 事情 - Wasm (WebAssembly) って？ - WebRTC と Wasm の歴史 - WebRTC x AI (Wasm ベース) の利用方法
8. 最近の AI x WebRTC 事情 8
9. 最近の AI x WebRTC 事情 9 - サーバサイド - クライアントサイド
10. 最近の AI x WebRTC 事情 10 - サーバサイド - クライアントサイド
11. サーバサイド処理での WebRTC 活用 11 STT (Speech-to-Text) LLM TTS (Text-to-Speech) クライアント サーバー WebRTC WebRTC 連携 サーバー (Optional) - 処理に利用するデータ・処理済みのデータをリアルタイムに伝送 例) リアルタイム LLM システムの構成
12. 例①) OpenAI GPT-4o で AI との対話 12 - LiveKit とパートナーシップを組んで Realtime API をリリース https://blog.livekit.io/openai-livekit-partnership-advanced-voice-realtime-api/
13. https://www.youtube.com/watch?v=a05X3rAfYLs 例②) NVIDIA ACE でアニメーション生成 13 - 自然なリップシンクがされたアバターアニメーションを生成 - UE5 向けの API が公開されており、UE5 pixel streaming (WebRTC) で映像・音声を送信してリアルな NPC と対話できる - オンデバイス処理の対応予定もある https://www.youtube.com/watch?v=psrXGPh80UM
14. 最近の AI x WebRTC 事情 14 - サーバサイド - クライアントサイド
15. Wasm との組み合わせの代表例 15 - メディア加工 - 仮想背景 - ノイズキャンセリング - コーデック - Lyra - Opus1.5 etc.
16. 例) Opus 1.5 (Deep REDundancy) 16 - パケロスが多い環境でも音声品質を保てる技術 - 元の技術 DRED は mlcodec WG で標準化中 (i-d は現在 01) https://opus-codec.org/demo/opus-1.5/ PLC MOS Packet Loss Concealment MOS =
17. Wasm (WebAssembly) って？ 17
18. Wasm (WebAssembly) って？ 18 - ブラウザ上で動作する第4のフォーマット - 複雑な処理をブラウザ上でも高速に実行できる Web ブラウザ ソースコード 変換 Webアプリケーション ダウンロード 主にJSから機能を利用
19. なぜ早い？ 19 - JavaScript と違って変数の型が確定している - バイナリ化されるのでファイルが比較的軽量になる - 起動時のダウンロード〜コンパイルを並列処理できる - SIMD やスレッド処理を活用しやすく作られている
20. Wasm におけるその他の側面 20 - すでに50以上の言語・フレームワークを Wasm へ変換できる - 安定していて活用例が多いのは C/C++, Rust, Go あたり - 元の言語のライブラリをブラウザへ持ち込んで動作させられる - C/C++ ライブラリなど豊富な資産をそのまま活用できる - ブラウザ外で動かすためのインタフェース 「WASI」 も標準化中 - コンテナのような立ち位置としても注目度が高い https://github.com/appcypher/awesome-wasm-langs
21. WebRTC と Wasm の歴史 21
22. 注意事項 22 - 当初どちらにも関わっておらず、ソースはインターネット only です - (資料の最後に参考文献を載せます)
23. 2010 WebRTC と Wasm の歴史 23 現在 JITコンパイラが登場し、ブラウザ高速化時代スタート 2011 SIPの課題が報告される・ WebRTCのI-D初提出 2017 主要4ブラウザがWebRTCに対応 主要4ブラウザがWasmに対応 2020 2021 WebRTC 1.0の標準化が完了 Google MeetがWasmで仮想背景機能を提供 WebRTC NVに向けた標準化が進行中 Wasm2.0・WASIの標準化が進行中 2013 ORCA CGがORTCのI-Dを提出 Wasm 1.0 (MVP) の標準化が完了・WASI仕様策定開始 Google MeetがWasmで仮想背景機能を提供 NativeClient (NaCl) プロジェクトが登場 Emscriptenが登場 asm.jsが登場 2008 2019 2012 2015 Wasmとして標準化を目指すことが宣言される 2022 Wasm2.0のdraft初提出
24. 2010 WebRTC と Wasm の歴史 (黎明期) 24 JITコンパイラが登場し、ブラウザ高速化時代スタート 2011 SIPの課題が報告される・ WebRTCのI-D初提出 2013 Wasmとして標準化を目指すことが宣言される NativeClient (NaCl) プロジェクトが登場 Emscriptenが登場 asm.jsが登場 2008 2012 2015 - IP上での通話はSIPが覇権を握っていた - ただし、SIPにはいくつかの課題があった - 独自実装が多くなり互換性が乏しい - 関連仕様が多すぎる - HW依存でイノベーションサイクルが遅い - SIPの祖を中心にWebベースで作り直しを計画 - 早くもChromeとFirefoxが対応 - Chrome, Firefox, SafariがそれぞれJITコンパイラを提供し てからJavaScriptの実行速度が急激に加速 - ただし、JavaScriptは動的型付け言語なので高速動作を意図 して設計されていなかった - 様々な高速化手法が生み出され、それらを元に Wasmの標準 化が開始される
25. WebRTC と Wasm の歴史 (標準化期) 25 2017 主要4ブラウザがWebRTCに対応 主要4ブラウザがWasmに対応 2020 2021 WebRTC 1.0 の標準化が完了 2013 ORCA CG がORTCのI-Dを提出 Wasm 1.0 (MVP) の標準化が完了・WASI仕様策定開始 Google MeetがWasmで仮想背景機能を提供 2019 Google MeetがWasmで仮想背景機能を提供 - 標準化開始以前から GoogleとMozillaが月次MTGを実施し、 コードを共有しながら開発していた - C/C++でasm.js同等の機能を実現することを MVPとし、まずは そこを目指した - ChromeとFirefoxのSDP実装が異なり、2018年まで続く 互換性の問題の発端となった - (Chrome: Plan B, Firefox: Unified Plan) - Extensible Web (拡張可能なWeb) の考え方にも繋がる ORTCが登場し、Microsoftが賛同 - 仕様策定に時間がかかり過ぎていたため、まずは基本的な ユースケースを満たせる範囲を 1.0として一旦標準化するこ とに *1 *1 後にORTC CGへと名称変更 *2 現在の仕様からは'1.0'表記は削除されている *2 - 2020年にはSIMDなどの追加機能が使えるようになり、画像 加工などにも利用しやすくなった
26. WebRTC と Wasm の歴史 (現在) 26 現在 WebRTC NV に向けた標準化が進行中 - Wasmを便利に使用するためのあらゆる機能が 2.0仕様として 提案されており、機能毎にフェーズを設定しながら標準化・実装 が進められている - WASIはPreview 2が安定化したのでPreview 3を目指す - 標準化時点で間に合わなかった様々なユースケースへの対 応に向けて新機能の提案・標準化・実装が進められている - 低レイヤ化においてWasmが重要な位置づけとされている - MoQが出てきたこともあり、 WebRTC側でどこまで対応して いくのかはとても気になる * * 現在は'WebRTC Extended Usecases'という名前に変更されている Wasm2.0・WASIの標準化が進行中 2022 Wasm2.0のdraft初提出
27. WebRTC x AI (Wasm ベース) の利用方法 27
28. WebRTC x AI (Wasm ベース) の利用方法 28 - WebRTC サイド - Wasm サイド
29. WebRTC x AI (Wasm ベース) の利用方法 29 - WebRTC サイド - Wasm サイド
30. 映像・音声の入出力手段 30 ① Canvas ② MediaStreamTrackGenerator / Processor ③ Encoded Transform ④ RTP Transport MediaStream (映像 / 音声) 送信 RTPパケタイズ エンコード 暗号化 ① ② ③ ④ WebRTC * 図は送信側のみだが、受信側でも対応する箇所で入出力可能
31. ① Canvas 31 - 全主要ブラウザで利用できる - 一度 Canvas へ出力して処理し、MediaStream へ入力する - requestAnimationFrame でループすれば全フレーム処理できるが バックグラウンドで停止するのが難点 MediaStream (映像 / 音声) 送信 RTPパケタイズ エンコード 暗号化 WebRTC <canvas> 処理
32. ② MediaStreamTrackGenerator / Processor 32 - Chrome, Edge で利用可能 (Safari は Processor のみ対応中) - バックグラウンドで停止しない & 全フレーム処理できるのが利点 MediaStream (映像 / 音声) 送信 RTPパケタイズ エンコード 暗号化 WebRTC Stream API TransformStream ( )
33. ③ Encoded Transform 33 - Safari, Firefox では新仕様、Chrome, Edge では旧仕様を利用可能 (新仕様: RTCRtpScriptTransform, 旧仕様: createEncodedStreams) - エンコード後のデータを取り出して処理が可能 MediaStream (映像 / 音声) 送信 RTPパケタイズ エンコード 暗号化 WebRTC Stream API TransformStream ( )
34. ④ RTP Transport 34 任意のエンコード 送信 暗号化 WebRTC RTP Transport 任意のRTPパケタイズ 任意の処理 - 昨年提案されたばかりの WebRTC における全く新しい API - Chrome のみがテスト実装中 - Chromium build >= 129.0.6658.0 - 起動時に`--enable-blink-features=RTCRtpTransport` で利用可能 - 映像処理、エンコード、輻輳制御など何から何まで自由 大・低レイヤ時代の幕開け？
35. WebRTC x AI (Wasm ベース) の利用方法 35 - WebRTC サイド - Wasm サイド
36. Wasm で AI したいなら 36 主な方法3選: 1. C/C++, Rust などで AI 処理を実装して Wasm 変換する 2. TensorFlow.js や ONNX.js などの AI フレームワークを活用する 3. MediaPipe を活用する
37. - Web アプリから利用できるバックエンドが提供されている - モデルファイルを用意することで AI 処理を実行可能 - 選択可能なエンジン: JavaScript, Wasm, WebGL 補足: AI フレームワークの活用 37 https://opensource.microsoft.com/blog/2021/09/02/onnx-runtime-web-running-your-machine-learning-model-in-browser/ onnx.jsの例
38. EOF 38
39. 参考文献 39 - WebRTC: - 歴史で振り返るWebRTC - TPAC 2015 WebRTC WG 最新レポート - ORTC.org - SDP の Unified Plan と Plan B - WebAssembly: - WebAssemblyの歴史について - The History of WebAssembly - design