$30 off During Our Annual Pro Sale. View Details »

WebRTCの歴史とこれから

 WebRTCの歴史とこれから

こちらのイベントにて発表した資料です
https://camphor.connpass.com/event/234434/

*) 上記資料の間違いがありましたので修正致します。
LINEとSkypeが同時期にあるような記述になっておりますが、LINEは2011年リリースでしたので、この記述は誤りです。大変申し訳ありません。

yuki_uchida

March 04, 2022
Tweet

More Decks by yuki_uchida

Other Decks in Programming

Transcript

  1. © NTT Communications Corporation All Rights Reserved.
    WebRTCの歴史とこれから
    2022年01⽉15⽇
    NTTコミュニケーションズ株式会社

    View Slide

  2. © 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 🎮

    View Slide

  3. © NTT Communications Corporation All Rights Reserved. 3
    このセッションの⽬的
    - WebRTCという技術と歴史を理解してもらう
    - SkyWayやリアルタイムコミュニケーションに興味を持ってもらう

    View Slide

  4. © NTT Communications Corporation All Rights Reserved. 4
    Web RealTime Communication
    WebRTCとは︖

    View Slide

  5. © NTT Communications Corporation All Rights Reserved. 5
    Web RealTime Communication
    WebRTCとは︖
    ウェブブラウザで

    View Slide

  6. © NTT Communications Corporation All Rights Reserved. 6
    Web RealTime Communication
    WebRTCとは︖
    超低遅延に
    200ms~

    View Slide

  7. © NTT Communications Corporation All Rights Reserved. 7
    Web RealTime Communication
    WebRTCとは︖
    双⽅向通信

    View Slide

  8. © NTT Communications Corporation All Rights Reserved. 8
    Web RealTime Communication
    WebRTCとは︖
    ウェブブラウザで
    超低遅延に
    200ms~
    双⽅向通信

    View Slide

  9. © NTT Communications Corporation All Rights Reserved. 9
    WebRTCを使っているサービス
    2019年前後で爆発的に伸びた

    View Slide

  10. © NTT Communications Corporation All Rights Reserved. 10
    WebRTC普及前 (2011年以前)

    View Slide

  11. © NTT Communications Corporation All Rights Reserved. 11
    WebRTC普及前 (2011年以前)
    VoIP/VoLTEという技術を使って映像・⾳声通話を⾏なっていた
    Voice over Internet Protocol
    Voice over LTE

    View Slide

  12. © NTT Communications Corporation All Rights Reserved. 12
    WebRTC と VoIP/VoLTE
    何が違う︖
    WebRTC VoIP/VoLTE

    View Slide

  13. © NTT Communications Corporation All Rights Reserved. 13
    WebRTC と VoIP/VoLTE
    何が違う︖
    WebRTC VoIP/VoLTE
    Webブラウザさえあれば
    プラグインやアプリケーションを
    必要とせず映像・⾳声通話が可能

    View Slide

  14. © NTT Communications Corporation All Rights Reserved. 14
    WebRTC と VoIP/VoLTE
    何が違う︖
    WebRTC VoIP/VoLTE
    Webブラウザさえあれば
    プラグインやアプリケーションを
    必要とせず映像・⾳声通話が可能
    アプリケーションのインストールを必要とする

    View Slide

  15. © NTT Communications Corporation All Rights Reserved. 15
    WebRTC と VoIP/VoLTE
    何が違う︖
    WebRTC VoIP/VoLTE
    Webブラウザさえあれば
    プラグインやアプリケーションを
    必要とせず映像・⾳声通話が可能
    アプリケーションのインストールを必要とする
    2016年ごろWebRTCに対応したのでウェブでも使えるようになった

    View Slide

  16. © NTT Communications Corporation All Rights Reserved. 16
    WebRTC と VoIP/VoLTE
    開発者⽬線では…
    WebRTC VoIP/VoLTE
    WebRTC技術はブラウザが実装
    そのWebRTCの機能をAPIを通して叩くだけ
    VoIPに沿った仕様を実装する必要がある為、
    敷居が⾼い

    View Slide

  17. © NTT Communications Corporation All Rights Reserved. 17
    WebRTC と VoIP/VoLTE
    開発者⽬線では…
    WebRTC VoIP/VoLTE
    WebRTC技術はブラウザが実装
    そのWebRTCの機能をAPIを通して叩くだけ
    VoIPに沿った仕様を実装する必要がある為、
    敷居が⾼い
    VoIPに精通したエンジニアが必要
    映像⾳声通話機能を実現するだけで膨⼤なコスト

    View Slide

  18. © NTT Communications Corporation All Rights Reserved. 18
    WebRTC と VoIP/VoLTE
    開発者⽬線では…
    WebRTC VoIP/VoLTE
    WebRTC技術はブラウザが実装
    そのWebRTCの機能をAPIを通して叩くだけ
    VoIPに沿った仕様を実装する必要がある為、
    敷居が⾼い
    VoIPに精通したエンジニアが必要
    映像⾳声通話機能を実現するだけで膨⼤なコスト
    2強

    View Slide

  19. © NTT Communications Corporation All Rights Reserved. 19
    WebRTC と VoIP/VoLTE
    開発者⽬線では…
    WebRTC VoIP/VoLTE
    WebRTC技術はブラウザが実装
    そのWebRTCの機能をAPIを通して叩くだけ
    VoIPに沿った仕様を実装する必要がある為、
    敷居が⾼い
    VoIPに精通したエンジニアが必要
    映像⾳声通話機能を実現するだけで膨⼤なコスト
    WebRTCに精通している必要はない
    スモールスタートしやすい
    2強

    View Slide

  20. © NTT Communications Corporation All Rights Reserved. 20
    WebRTC と VoIP/VoLTE
    開発者⽬線では…
    WebRTC VoIP/VoLTE
    WebRTC技術はブラウザが実装
    そのWebRTCの機能をAPIを通して叩くだけ
    VoIPに沿った仕様を実装する必要がある為、
    敷居が⾼い
    VoIPに精通したエンジニアが必要
    映像⾳声通話機能を実現するだけで膨⼤なコスト
    WebRTCに精通している必要はない
    スモールスタートしやすい
    2強

    View Slide

  21. © NTT Communications Corporation All Rights Reserved. 21
    SkyWayとは︖
    映像・⾳声通話の機能をアプリケーションに簡単に実装できる、
    マルチプラットフォームなSDK & フルマネージドなAPIサービス
    導⼊事例

    View Slide

  22. © NTT Communications Corporation All Rights Reserved. 22
    SkyWayとは︖
    WebRTCの登場により、映像⾳声通話技術に対する敷居が下がったが
    ⾮常に複雑な技術であり、運⽤コストはまだまだ⾼い
    WebRTC/ブラウザ/OSの仕様変更への追従・バグ調査
    各種サーバの保守運⽤コスト
    - シグナリングサーバ
    - TURNサーバ
    - SFUサーバ

    View Slide

  23. © NTT Communications Corporation All Rights Reserved. 23
    SkyWayとは︖
    WebRTCの登場により、映像⾳声通話技術に対する敷居が下がったが
    ⾮常に複雑な技術であり、運⽤コストはまだまだ⾼い
    WebRTC/ブラウザ/OSの仕様変更への追従・バグ調査
    各種サーバの保守運⽤コスト
    - シグナリングサーバ
    - TURNサーバ
    - SFUサーバ
    プラットフォームとしてのSkyWayを提供

    View Slide

  24. © NTT Communications Corporation All Rights Reserved. 24
    WebRTCの歴史

    View Slide

  25. © NTT Communications Corporation All Rights Reserved. 25
    2000年頃
    VoIPのフレームワークであるSIPを
    牽引してきたエンジニアである
    Jonathan Rosenberg⽒
    がIETFでSIPの成功と失敗について発表
    2011
    VoIP時代

    View Slide

  26. © 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)が策定
    されてきたが失敗点も多かった。
    - 仕様が複雑すぎる
    - 標準化に時間がかかり過ぎた
    - セッション設定が柔軟でない

    View Slide

  27. © 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
    黎明期

    View Slide

  28. © NTT Communications Corporation All Rights Reserved. 28
    WebRTCの歴史
    2011
    InternetDraftが提出
    黎明期

    View Slide

  29. © NTT Communications Corporation All Rights Reserved. 29
    WebRTCの歴史
    2011
    InternetDraftが提出
    黎明期
    それぞれ違う仕様で
    実装されていた。
    SDP plan-b unified-plan
    WebRTCではなく
    ORTCを推したい

    View Slide

  30. © NTT Communications Corporation All Rights Reserved. 30
    WebRTCの歴史
    2011 2012
    InternetDraftが提出 peer.js の登場により
    開発が加速
    黎明期
    それぞれ違う仕様で
    実装されていた。
    SDP plan-b unified-plan
    WebRTCではなく
    ORTCを推したい
    多くのサービスが
    peer.jsを利⽤

    View Slide

  31. © 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を利⽤

    View Slide

  32. © 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を利⽤
    ブラウザさえあれば使える
    技術を⽬指していたが、
    ブラウザがきちんと対応でき
    るまでに時間がかかった…

    View Slide

  33. © 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を利⽤
    ブラウザさえあれば使える
    技術を⽬指していたが、
    ブラウザがきちんと対応でき
    るまでに時間がかかった…

    View Slide

  34. © 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を利⽤
    ブラウザさえあれば使える
    技術を⽬指していたが、
    ブラウザがきちんと対応でき
    るまでに時間がかかった…

    View Slide

  35. © 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を利⽤
    ブラウザさえあれば使える
    技術を⽬指していたが、
    ブラウザがきちんと対応でき
    るまでに時間がかかった…

    View Slide

  36. © NTT Communications Corporation All Rights Reserved. 36
    WebRTCのこれから

    View Slide

  37. © NTT Communications Corporation All Rights Reserved. 37
    2021
    標準化🎉
    標準化が済み仕様がfixされたため、
    技術としては枯れた技術となっていく。

    View Slide

  38. © NTT Communications Corporation All Rights Reserved. 38
    2021
    標準化🎉
    標準化が済み仕様がfixされたため、
    技術としては枯れた技術となっていく。
    パフォーマンス向上
    他の技術と組み合わせ
    UX向上
    WebRTC2.0に向けて
    低レベル化

    View Slide

  39. © 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にあったインフラ構築
    圧縮効率の⾼いコーデック
    パケット送信の最適化

    View Slide

  40. © 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にあったインフラ構築
    圧縮効率の⾼いコーデック
    パケット送信の最適化

    View Slide

  41. © 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にあったインフラ構築
    圧縮効率の⾼いコーデック
    パケット送信の最適化

    View Slide

  42. © NTT Communications Corporation All Rights Reserved. 42

    View Slide