Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
WebRTCの歴史とこれから
yuki_uchida
March 04, 2022
Programming
0
280
WebRTCの歴史とこれから
こちらのイベントにて発表した資料です
https://camphor.connpass.com/event/234434/
yuki_uchida
March 04, 2022
Tweet
Share
More Decks by yuki_uchida
See All by yuki_uchida
WebTransportのまとめと今後
yuki_uchida
5
870
Other Decks in Programming
See All in Programming
設計の学び方:自分流のススメ
masuda220
PRO
10
6.9k
競プロのすすめ
uya116
0
670
Android Compose Component - mapping.
taehwandev
0
140
Managing Error Messages with your Oracle Database REST APIs
thatjeffsmith
0
140
Angular‘s Future without NgModules: Architectures with Standalone Components @enterJS
manfredsteyer
PRO
0
240
Chart実装が楽になりました。
keisukeyamagishi
0
120
Angular-basierte Micro Frontends mit Module Federation @API Summit
manfredsteyer
PRO
0
110
Jetpack Compose, 어디까지 알고 있을까?
jisungbin
0
120
Oracle REST Data Service: APEX Office Hours
thatjeffsmith
0
770
io22 extended What's new in app performance
veronikapj
0
340
I/O Extended 2022 in Android ~ Whats new in Android development tools
pluu
0
560
「混ぜるな危険」を推進する設計
minodriven
7
1.8k
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
113
15k
Embracing the Ebb and Flow
colly
73
3.4k
Why Our Code Smells
bkeepers
PRO
324
55k
Fantastic passwords and where to find them - at NoRuKo
philnash
27
1.5k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
105
16k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
100
5.9k
Docker and Python
trallard
27
1.6k
Documentation Writing (for coders)
carmenhchung
48
2.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
349
27k
In The Pink: A Labor of Love
frogandcode
131
21k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
237
19k
Large-scale JavaScript Application Architecture
addyosmani
499
110k
Transcript
© NTT Communications Corporation All Rights Reserved. WebRTCの歴史とこれから 2022年01⽉15⽇ NTTコミュニケーションズ株式会社
© NTT Communications Corporation All Rights Reserved. 2 ⾃⼰紹介 内⽥
裕貴 24歳 (@yuki_wtz) ⼈間科学部 2019年卒業(3年⽬) NTT コミュニケーションズ⼊社 SkyWay DevOps WebRTC Researchチームを⽴ち上げ 最新技術のリサーチ・PoC開発 - 通話品質分析 - 機械学習・深層学習 - WebRTC2.0(WebTransport, WebCodecs) 2019/4 2020/9 好きなもの - NWプロトコル - 機械学習(NLP/時系列予測) - ⾳声・映像系の技術も触りたくなってきた - コーヒー☕ - League of Legends 🎮
© NTT Communications Corporation All Rights Reserved. 3 このセッションの⽬的 -
WebRTCという技術と歴史を理解してもらう - SkyWayやリアルタイムコミュニケーションに興味を持ってもらう
© NTT Communications Corporation All Rights Reserved. 4 Web RealTime
Communication WebRTCとは︖
© NTT Communications Corporation All Rights Reserved. 5 Web RealTime
Communication WebRTCとは︖ ウェブブラウザで
© NTT Communications Corporation All Rights Reserved. 6 Web RealTime
Communication WebRTCとは︖ 超低遅延に 200ms~
© NTT Communications Corporation All Rights Reserved. 7 Web RealTime
Communication WebRTCとは︖ 双⽅向通信
© NTT Communications Corporation All Rights Reserved. 8 Web RealTime
Communication WebRTCとは︖ ウェブブラウザで 超低遅延に 200ms~ 双⽅向通信
© NTT Communications Corporation All Rights Reserved. 9 WebRTCを使っているサービス 2019年前後で爆発的に伸びた
© NTT Communications Corporation All Rights Reserved. 10 WebRTC普及前 (2011年以前)
© NTT Communications Corporation All Rights Reserved. 11 WebRTC普及前 (2011年以前)
VoIP/VoLTEという技術を使って映像・⾳声通話を⾏なっていた Voice over Internet Protocol Voice over LTE
© NTT Communications Corporation All Rights Reserved. 12 WebRTC と
VoIP/VoLTE 何が違う︖ WebRTC VoIP/VoLTE
© NTT Communications Corporation All Rights Reserved. 13 WebRTC と
VoIP/VoLTE 何が違う︖ WebRTC VoIP/VoLTE Webブラウザさえあれば プラグインやアプリケーションを 必要とせず映像・⾳声通話が可能
© NTT Communications Corporation All Rights Reserved. 14 WebRTC と
VoIP/VoLTE 何が違う︖ WebRTC VoIP/VoLTE Webブラウザさえあれば プラグインやアプリケーションを 必要とせず映像・⾳声通話が可能 アプリケーションのインストールを必要とする
© NTT Communications Corporation All Rights Reserved. 15 WebRTC と
VoIP/VoLTE 何が違う︖ WebRTC VoIP/VoLTE Webブラウザさえあれば プラグインやアプリケーションを 必要とせず映像・⾳声通話が可能 アプリケーションのインストールを必要とする 2016年ごろWebRTCに対応したのでウェブでも使えるようになった
© NTT Communications Corporation All Rights Reserved. 16 WebRTC と
VoIP/VoLTE 開発者⽬線では… WebRTC VoIP/VoLTE WebRTC技術はブラウザが実装 そのWebRTCの機能をAPIを通して叩くだけ VoIPに沿った仕様を実装する必要がある為、 敷居が⾼い
© NTT Communications Corporation All Rights Reserved. 17 WebRTC と
VoIP/VoLTE 開発者⽬線では… WebRTC VoIP/VoLTE WebRTC技術はブラウザが実装 そのWebRTCの機能をAPIを通して叩くだけ VoIPに沿った仕様を実装する必要がある為、 敷居が⾼い VoIPに精通したエンジニアが必要 映像⾳声通話機能を実現するだけで膨⼤なコスト
© NTT Communications Corporation All Rights Reserved. 18 WebRTC と
VoIP/VoLTE 開発者⽬線では… WebRTC VoIP/VoLTE WebRTC技術はブラウザが実装 そのWebRTCの機能をAPIを通して叩くだけ VoIPに沿った仕様を実装する必要がある為、 敷居が⾼い VoIPに精通したエンジニアが必要 映像⾳声通話機能を実現するだけで膨⼤なコスト 2強
© NTT Communications Corporation All Rights Reserved. 19 WebRTC と
VoIP/VoLTE 開発者⽬線では… WebRTC VoIP/VoLTE WebRTC技術はブラウザが実装 そのWebRTCの機能をAPIを通して叩くだけ VoIPに沿った仕様を実装する必要がある為、 敷居が⾼い VoIPに精通したエンジニアが必要 映像⾳声通話機能を実現するだけで膨⼤なコスト WebRTCに精通している必要はない スモールスタートしやすい 2強
© NTT Communications Corporation All Rights Reserved. 20 WebRTC と
VoIP/VoLTE 開発者⽬線では… WebRTC VoIP/VoLTE WebRTC技術はブラウザが実装 そのWebRTCの機能をAPIを通して叩くだけ VoIPに沿った仕様を実装する必要がある為、 敷居が⾼い VoIPに精通したエンジニアが必要 映像⾳声通話機能を実現するだけで膨⼤なコスト WebRTCに精通している必要はない スモールスタートしやすい 2強
© NTT Communications Corporation All Rights Reserved. 21 SkyWayとは︖ 映像・⾳声通話の機能をアプリケーションに簡単に実装できる、
マルチプラットフォームなSDK & フルマネージドなAPIサービス 導⼊事例
© NTT Communications Corporation All Rights Reserved. 22 SkyWayとは︖ WebRTCの登場により、映像⾳声通話技術に対する敷居が下がったが
⾮常に複雑な技術であり、運⽤コストはまだまだ⾼い WebRTC/ブラウザ/OSの仕様変更への追従・バグ調査 各種サーバの保守運⽤コスト - シグナリングサーバ - TURNサーバ - SFUサーバ
© NTT Communications Corporation All Rights Reserved. 23 SkyWayとは︖ WebRTCの登場により、映像⾳声通話技術に対する敷居が下がったが
⾮常に複雑な技術であり、運⽤コストはまだまだ⾼い WebRTC/ブラウザ/OSの仕様変更への追従・バグ調査 各種サーバの保守運⽤コスト - シグナリングサーバ - TURNサーバ - SFUサーバ プラットフォームとしてのSkyWayを提供
© NTT Communications Corporation All Rights Reserved. 24 WebRTCの歴史
© NTT Communications Corporation All Rights Reserved. 25 2000年頃 VoIPのフレームワークであるSIPを
牽引してきたエンジニアである Jonathan Rosenberg⽒ がIETFでSIPの成功と失敗について発表 2011 VoIP時代
© NTT Communications Corporation All Rights Reserved. 26 2000年頃 VoIPのフレームワークであるSIPを
牽引してきたエンジニアである Jonathan Rosenberg⽒ がIETFでSIPの成功と失敗について発表 2011 VoIP時代 0 5 10 15 20 25 30 1998 2000 2002 2004 2006 2008 2010 2012 RFC Count RFC Count 10年以上⾊々な仕様(RFC)が策定 されてきたが失敗点も多かった。 - 仕様が複雑すぎる - 標準化に時間がかかり過ぎた - セッション設定が柔軟でない
© NTT Communications Corporation All Rights Reserved. 27 WebRTC時代 2000年頃
VoIPのフレームワークであるSIPを 牽引してきたエンジニアである Jonathan Rosenberg⽒ がIETFでSIPの成功と失敗について発表 SIPで踏んだ失敗を活かして WebRTCのInternet Draftが提出された 2011 2011 VoIP時代 0 5 10 15 20 25 30 1998 2000 2002 2004 2006 2008 2010 2012 RFC Count RFC Count 黎明期
© NTT Communications Corporation All Rights Reserved. 28 WebRTCの歴史 2011
InternetDraftが提出 黎明期
© NTT Communications Corporation All Rights Reserved. 29 WebRTCの歴史 2011
InternetDraftが提出 黎明期 それぞれ違う仕様で 実装されていた。 SDP plan-b unified-plan WebRTCではなく ORTCを推したい
© NTT Communications Corporation All Rights Reserved. 30 WebRTCの歴史 2011
2012 InternetDraftが提出 peer.js の登場により 開発が加速 黎明期 それぞれ違う仕様で 実装されていた。 SDP plan-b unified-plan WebRTCではなく ORTCを推したい 多くのサービスが peer.jsを利⽤
© NTT Communications Corporation All Rights Reserved. 31 WebRTCの歴史 2011
2012 InternetDraftが提出 peer.js の登場により 開発が加速 黎明期 2016 VP8のみのサポート だったが、H264 サポートされた それぞれ違う仕様で 実装されていた。 SDP plan-b unified-plan WebRTCではなく ORTCを推したい 常に変化し続ける時期 ブラウザ実装の変化に追従 するだけで⼤変 VP8 vs H264 多くのサービスが peer.jsを利⽤
© NTT Communications Corporation All Rights Reserved. 32 WebRTCの歴史 2011
2012 2017 InternetDraftが提出 peer.js の登場により 開発が加速 Safari/EdgeがWebRTCに対 応し、主要なブラウザ全てで 利⽤可能に🎉 黎明期 2016 VP8のみのサポート だったが、H264 サポートされた それぞれ違う仕様で 実装されていた。 SDP plan-b unified-plan WebRTCではなく ORTCを推したい 常に変化し続ける時期 ブラウザ実装の変化に追従 するだけで⼤変 VP8 vs H264 多くのサービスが peer.jsを利⽤ ブラウザさえあれば使える 技術を⽬指していたが、 ブラウザがきちんと対応でき るまでに時間がかかった…
© NTT Communications Corporation All Rights Reserved. 33 WebRTCの歴史 2011
2012 2017 2019 InternetDraftが提出 peer.js の登場により 開発が加速 Safari/EdgeがWebRTCに対 応し、主要なブラウザ全てで 利⽤可能に🎉 黎明期 2016 VP8のみのサポート だったが、H264 サポートされた それぞれ違う仕様で 実装されていた。 SDP plan-b unified-plan WebRTCではなく ORTCを推したい ⼀般に普及し始めた時期 再度活発化 常に変化し続ける時期 ブラウザ実装の変化に追従 するだけで⼤変 VP8 vs H264 多くのサービスが peer.jsを利⽤ ブラウザさえあれば使える 技術を⽬指していたが、 ブラウザがきちんと対応でき るまでに時間がかかった…
© NTT Communications Corporation All Rights Reserved. 34 WebRTCの歴史 2011
2012 2017 2019 InternetDraftが提出 コロナが⼤流⾏ WebRTCに注⽬が集まる ブラウザベンダも注⼒ peer.js の登場により 開発が加速 Safari/EdgeがWebRTCに対 応し、主要なブラウザ全てで 利⽤可能に🎉 黎明期 2016 VP8のみのサポート だったが、H264 サポートされた それぞれ違う仕様で 実装されていた。 SDP plan-b unified-plan WebRTCではなく ORTCを推したい ⼀般に普及し始めた時期 再度活発化 常に変化し続ける時期 ブラウザ実装の変化に追従 するだけで⼤変 VP8 vs H264 多くのサービスが peer.jsを利⽤ ブラウザさえあれば使える 技術を⽬指していたが、 ブラウザがきちんと対応でき るまでに時間がかかった…
© NTT Communications Corporation All Rights Reserved. 35 WebRTCの歴史 2011
2021 2012 2017 2019 InternetDraftが提出 W3C 勧告 RFCに コロナが⼤流⾏ WebRTCに注⽬が集まる ブラウザベンダも注⼒ peer.js の登場により 開発が加速 Safari/EdgeがWebRTCに対 応し、主要なブラウザ全てで 利⽤可能に🎉 黎明期 2016 VP8のみのサポート だったが、H264 サポートされた それぞれ違う仕様で 実装されていた。 SDP plan-b unified-plan WebRTCではなく ORTCを推したい ⼀般に普及し始めた時期 再度活発化 常に変化し続ける時期 10周年&標準化︕ 🎉 🎉 🎉 ブラウザ実装の変化に追従 するだけで⼤変 VP8 vs H264 多くのサービスが peer.jsを利⽤ ブラウザさえあれば使える 技術を⽬指していたが、 ブラウザがきちんと対応でき るまでに時間がかかった…
© NTT Communications Corporation All Rights Reserved. 36 WebRTCのこれから
© NTT Communications Corporation All Rights Reserved. 37 2021 標準化🎉
標準化が済み仕様がfixされたため、 技術としては枯れた技術となっていく。
© NTT Communications Corporation All Rights Reserved. 38 2021 標準化🎉
標準化が済み仕様がfixされたため、 技術としては枯れた技術となっていく。 パフォーマンス向上 他の技術と組み合わせ UX向上 WebRTC2.0に向けて 低レベル化
© NTT Communications Corporation All Rights Reserved. 39 2021 標準化🎉
標準化が済み仕様がfixされたため、 技術としては枯れた技術となっていく。 Offscreencanvas Web worker WASM WebGL2 dcsctp SDN/SD-WAN Satin/Lyra VP9/AV1 RTX/DTX/RED パフォーマンス向上 他の技術と組み合わせ UX向上 WebRTC2.0に向けて 低レベル化 Web技術を駆使 WebRTCのコード最適化 WebRTCにあったインフラ構築 圧縮効率の⾼いコーデック パケット送信の最適化
© NTT Communications Corporation All Rights Reserved. 40 2021 標準化🎉
標準化が済み仕様がfixされたため、 技術としては枯れた技術となっていく。 仮想背景 ノイズ除去 空間オーディオ ジェスチャー認識 マルチプラットフォーム AR/VR/メタバース(?) ロボット/ドローン パフォーマンス向上 他の技術と組み合わせ UX向上 WebRTC2.0に向けて 低レベル化 深層学習 in browser 複数プラットフォームに対応できるアーキテクチャ Offscreencanvas Web worker WASM WebGL2 dcsctp SDN/SD-WAN Satin/Lyra VP9/AV1 RTX/DTX/RED Web技術を駆使 WebRTCのコード最適化 WebRTCにあったインフラ構築 圧縮効率の⾼いコーデック パケット送信の最適化
© NTT Communications Corporation All Rights Reserved. 41 2021 標準化🎉
標準化が済み仕様がfixされたため、 技術としては枯れた技術となっていく。 WebRTC MediaStreamTrack InsertableStreams(breakout box) WebRTC Encoded Transform WebTransport(Media over QUIC) WebCodecs 仮想背景 ノイズ除去 空間オーディオ ジェスチャー認識 マルチプラットフォーム AR/VR/メタバース(?) ロボット/ドローン パフォーマンス向上 他の技術と組み合わせ UX向上 WebRTC2.0に向けて 低レベル化 深層学習 in browser 複数プラットフォームに対応できるアーキテクチャ さまざまなユースケースに対応できるようにするため、 ブラックボックスとなっていたWebRTCを分解・再構築 Offscreencanvas Web worker WASM WebGL2 dcsctp SDN/SD-WAN Satin/Lyra VP9/AV1 RTX/DTX/RED Web技術を駆使 WebRTCのコード最適化 WebRTCにあったインフラ構築 圧縮効率の⾼いコーデック パケット送信の最適化
© NTT Communications Corporation All Rights Reserved. 42