Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
WebRTC と Wasm の関係を振り返ってみた
Search
tetter
October 22, 2024
Technology
0
170
WebRTC と Wasm の関係を振り返ってみた
WebRTC Meetup Tokyo #28
登壇資料
[History]
・2024/10/24: tnohoさんから教えていただいたWasmのメリットを追記しました
tetter
October 22, 2024
Tweet
Share
More Decks by tetter
See All by tetter
MediaStream を利用した画像処理 2つのパターン
tetter27
0
380
WebRTC でスマートカメラを開発するチュートリアルやってみた
tetter27
0
450
TPAC 2023 のトピック厳選紹介
tetter27
0
390
WebRTC の現状と未来
tetter27
1
2k
Other Decks in Technology
See All in Technology
全社を巻き込んだ業務オペレーション改善と、それは事業成長に貢献しているのか?を実感した話
marroooon
0
150
GPSデバイスを使った簡易位置案内システムの構築をしてみた話。/jawsfesta2024
kwada
0
230
太田博三(@usagisan2020)
otanet
0
150
最新のWasm事情
askua
5
2.5k
Vue.js、Nuxtの機能を使い、 大量のコピペコードをリファクタリングする
igayamaguchi
3
1.5k
今日から始める技術的負債の解消
leveragestech
3
460
Azure AI servicesと歯のおはなし/AzureTravelers_Fukuoka2024_baba
nina01
1
110
v-modelの歩みを振り返る
bengo4com
5
2.4k
プログラミング写経のすすめ
natsutan
0
170
Delta Commit…の最近...
akuwano
2
130
Application Signalsで始めるSLO ユーザー満足度を数値化する第一歩
niftycorp
PRO
2
160
Japan AWS Jr. Championsがお届けする、アウトプットのすすめ
hamijay_cloud
0
210
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
53
9k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
92
16k
Visualization
eitanlees
143
15k
Practical Orchestrator
shlominoach
186
10k
How to train your dragon (web standard)
notwaldorf
88
5.6k
Rails Girls Zürich Keynote
gr2m
93
13k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
9
640
A Modern Web Designer's Workflow
chriscoyier
692
190k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
What's new in Ruby 2.0
geeforr
342
31k
Why Our Code Smells
bkeepers
PRO
334
57k
Music & Morning Musume
bryan
46
6.1k
Transcript
WebRTC と Wasm の関係を振り返ってみた tetter WebRTC Meetup Tokyo #28 OCT,
22, 2024 # for Beginners + Intermediates
自己紹介 2 NAME: - tetter (Tetta Maeda) FEATURES: - WebRTC
Meetup 運営 - moq-wasm (MOQTライブラリ) 書いてる - ワイン資格の勉強中 @tttr_mt tetter27 2017 2018 2022 前職 (通信事業会社) Android 〃 EdgeAI NTTコミュニケーションズ株式会社 WebRTC CARRIER:
10周年イベントを振り返ってみて 3 - 思った以上に盛り上がり、最高のイベントでした https://www.youtube.com/watch?v=dyAj05V9ViQ
10周年イベントを振り返ってみて 4 - 今後の WebRTC Meetup に期待すること → https://www.youtube.com/watch?v=dyAj05V9ViQ AI
x WebRTCの新たな 使い方を発表してほしい AI を含めた技術を民主化 できるように標準化貢献 目指してほしい サーバサイドの AI 処理が注目されるかも
10周年イベントを振り返ってみて 5 - 今後の WebRTC Meetup に期待すること → AI との組み合わせ
https://www.youtube.com/watch?v=dyAj05V9ViQ じゃあキーワードは AI ってことで
6
おしながき 7 - 最近の AI x WebRTC 事情 - Wasm
(WebAssembly) って? - WebRTC と Wasm の歴史 - WebRTC x AI (Wasm ベース) の利用方法
最近の AI x WebRTC 事情 8
最近の AI x WebRTC 事情 9 - サーバサイド - クライアントサイド
最近の AI x WebRTC 事情 10 - サーバサイド - クライアントサイド
サーバサイド処理での WebRTC 活用 11 STT (Speech-to-Text) LLM TTS (Text-to-Speech) クライアント
サーバー WebRTC WebRTC 連携 サーバー (Optional) - 処理に利用するデータ・処理済みのデータをリアルタイムに伝送 例) リアルタイム LLM システムの構成
例①) OpenAI GPT-4o で AI との対話 12 - LiveKit とパートナーシップを組んで
Realtime API をリリース https://blog.livekit.io/openai-livekit-partnership-advanced-voice-realtime-api/
https://www.youtube.com/watch?v=a05X3rAfYLs 例②) NVIDIA ACE でアニメーション生成 13 - 自然なリップシンクがされたアバターアニメーションを生成 - UE5
向けの API が公開されており、UE5 pixel streaming (WebRTC) で映像・音声を送信してリアルな NPC と対話できる - オンデバイス処理の対応予定もある https://www.youtube.com/watch?v=psrXGPh80UM
最近の AI x WebRTC 事情 14 - サーバサイド - クライアントサイド
Wasm との組み合わせの代表例 15 - メディア加工 - 仮想背景 - ノイズキャンセリング -
コーデック - Lyra - Opus1.5 etc.
例) 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 =
Wasm (WebAssembly) って? 17
Wasm (WebAssembly) って? 18 - ブラウザ上で動作する第4のフォーマット - 複雑な処理をブラウザ上でも高速に実行できる Web ブラウザ
ソースコード 変換 Webアプリケーション ダウンロード 主にJSから機能を利用
なぜ早い? 19 - JavaScript と違って変数の型が確定している - バイナリ化されるのでファイルが比較的軽量になる - 起動時のダウンロード〜コンパイルを並列処理できる -
SIMD やスレッド処理を活用しやすく作られている
Wasm におけるその他の側面 20 - すでに50以上の言語・フレームワークを Wasm へ変換できる - 安定していて活用例が多いのは C/C++,
Rust, Go あたり - 元の言語のライブラリをブラウザへ持ち込んで動作させられる - C/C++ ライブラリなど豊富な資産をそのまま活用できる - ブラウザ外で動かすためのインタフェース 「WASI」 も標準化中 - コンテナのような立ち位置としても注目度が高い https://github.com/appcypher/awesome-wasm-langs
WebRTC と Wasm の歴史 21
注意事項 22 - 当初どちらにも関わっておらず、ソースはインターネット only です - (資料の最後に参考文献を載せます)
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初提出
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の標準 化が開始される
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などの追加機能が使えるようになり、画像 加工などにも利用しやすくなった
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初提出
WebRTC x AI (Wasm ベース) の利用方法 27
WebRTC x AI (Wasm ベース) の利用方法 28 - WebRTC サイド
- Wasm サイド
WebRTC x AI (Wasm ベース) の利用方法 29 - WebRTC サイド
- Wasm サイド
映像・音声の入出力手段 30 ① Canvas ② MediaStreamTrackGenerator / Processor ③ Encoded
Transform ④ RTP Transport MediaStream (映像 / 音声) 送信 RTPパケタイズ エンコード 暗号化 ① ② ③ ④ WebRTC * 図は送信側のみだが、受信側でも対応する箇所で入出力可能
① Canvas 31 - 全主要ブラウザで利用できる - 一度 Canvas へ出力して処理し、MediaStream へ入力する
- requestAnimationFrame でループすれば全フレーム処理できるが バックグラウンドで停止するのが難点 MediaStream (映像 / 音声) 送信 RTPパケタイズ エンコード 暗号化 WebRTC <canvas> 処理
② MediaStreamTrackGenerator / Processor 32 - Chrome, Edge で利用可能 (Safari
は Processor のみ対応中) - バックグラウンドで停止しない & 全フレーム処理できるのが利点 MediaStream (映像 / 音声) 送信 RTPパケタイズ エンコード 暗号化 WebRTC Stream API TransformStream ( )
③ Encoded Transform 33 - Safari, Firefox では新仕様、Chrome, Edge では旧仕様を利用可能
(新仕様: RTCRtpScriptTransform, 旧仕様: createEncodedStreams) - エンコード後のデータを取り出して処理が可能 MediaStream (映像 / 音声) 送信 RTPパケタイズ エンコード 暗号化 WebRTC Stream API TransformStream ( )
④ RTP Transport 34 任意のエンコード 送信 暗号化 WebRTC RTP Transport
任意のRTPパケタイズ 任意の処理 - 昨年提案されたばかりの WebRTC における全く新しい API - Chrome のみがテスト実装中 - Chromium build >= 129.0.6658.0 - 起動時に`--enable-blink-features=RTCRtpTransport` で利用可能 - 映像処理、エンコード、輻輳制御など何から何まで自由 大・低レイヤ時代の幕開け?
WebRTC x AI (Wasm ベース) の利用方法 35 - WebRTC サイド
- Wasm サイド
Wasm で AI したいなら 36 主な方法3選: 1. C/C++, Rust などで
AI 処理を実装して Wasm 変換する 2. TensorFlow.js や ONNX.js などの AI フレームワークを活用する 3. MediaPipe を活用する
- 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の例
EOF 38
参考文献 39 - WebRTC: - 歴史で振り返るWebRTC - TPAC 2015 WebRTC
WG 最新レポート - ORTC.org - SDP の Unified Plan と Plan B - WebAssembly: - WebAssemblyの歴史について - The History of WebAssembly - design