TypeScriptとNode.jsでWebRTCを実装してみた

 TypeScriptとNode.jsでWebRTCを実装してみた

WebRTC Meetup Online #1

開発リポジトリ
https://github.com/shinyoshiaki/rainy-webrtc

0ca0c0ec6efe3a7f5220332a910e6da0?s=128

shinyoshiaki

July 16, 2020
Tweet

Transcript

  1. TypeScriptと Node.jsで WebRTCを 実装してみた WebRTC Meetup Online #1 2020/07/16 shinyoshiaki

  2. 自己紹介 • Yoshiaki Shin • 3月に大学を卒業 • NTTコミュニケーションズ株式会社 ◦ SkyWayの中の人

    大変な年に社会人になってしまった まだオフィスに1度しか出社できてない。リモート飽きた(笑) @ShinYoshiaki
  3. 目次 • WebRTC実装とは • WebRTCの実装方法 • プロトコル実装 ◦ ICE ◦

    DTLS ◦ SCTP ◦ DCEP , DataChannel ◦ PeerConnection • DEMO • 感想など
  4. WebRTC実装とは

  5. ここでいうWebRTC実装 → WebRTCのフルスクラッチ実装 WebRTCをフルスクラッチで実装するには 右図のプロトコルを全部実装しないといけない 図出典 https://www.oreilly.com/library/view/high-performance- browser/9781449344757/ch18.html

  6. 実装範囲 まだすべてを実装できたわけではない できたのはここ ChromeとDataChannelが疎通する段階 タイトルは正確には TypeScriptとNode.jsでWebRTC(DataChannel)を実装してみた

  7. WebRTCの実装方法

  8. RFCやdraftなどの標準化文章はもちろん読むが、 RFCの文面のみから実装していくのは至難の業 既存のWebRTC , プロトコル実装のコード を参考に実装していく RFC5245(8445) , RFC5389(8489) ,

    RFC6347 RFC4960 , RFC6083 , RFC6255 , RFC8261 , draft-ietf-rtcweb-data-channel-13 draft-ietf-rtcweb-data-protocol-09 webrtc-pc など
  9. 既存のWebRTC実装 主に aiortc のコードを参考にTypeScriptで実装を行った 理由:この中だとPythonが一番 TypeScriptのパラダイムに近いから libwebrtc C++ aiortc Python

    pion Go など
  10. 実装の流れ ・RFCなどの資料を読む ・既存実装のコードを読む ・TypeScriptで実装 ・テストを書く ・動作確認 この繰り返し

  11. プロトコル実装

  12. 各プロトコル毎に別のプロジェクトとして実装を行った 各プロトコルは独立して機能するように実装した PeerConnection,DataChannel https://github.com/shinyoshiaki/rainy-webrtc SCTP https://github.com/shinyoshiaki/rainy-sctp DTLS https://github.com/shinyoshiaki/rainy-dtls ICE https://github.com/shinyoshiaki/rainy-ice

  13. ICE  TURNは実装していない ・実装方法  aioice , RFCなどを参考に実装した ・動作確認  aioiceとの通信疎通を確認 P2P通信を司る NAT越えなんかをするプロトコル

    https://github.com/shinyoshiaki/rainy-ice
  14. DTLS aiortcはDTLSを実装していない(OpenSSL) DTLSはTLSの亜種。TLSは日本語の資料も豊富 ・実装方法  関連RFC, TLSの資料, 既存のDTLS実装などを参考に実装 ・動作確認  OpenSSLとの通信疎通を確認  

    openssl s_client -dtls1_2 -connect 127.0.0.1:xxxx    openssl s_server -dtls1_2 -accept 127.0.0.1:xxxx -cert ./xxxx -key ./xxxx DatagramのためのTLS的なやつ 通信の暗号化 https://github.com/shinyoshiaki/rainy-dtls
  15. SCTP (user land)  IPの上で動く本来のSCTPではない ・実装方法  RFC , aiortc , pion

    などを参考に実装  transportを抽象化している (ICE , DTLS , etc…..) ・動作確認  pion/sctpをSCTP over UDPとして通信疎通を確認 Streamの輻輳制御、順序制御 https://github.com/shinyoshiaki/rainy-sctp
  16. DCEP , DataChannel ・実装方法 draft文章 , aiortc などを参考に実装 ・動作確認 aiortc

    のテストコードを参考にテスト DCEP : SCTPの上でDataChannelを開くプロトコル https://github.com/shinyoshiaki/rainy-webrtc
  17. PeerConnection ・実装方法 webrtc-pc , aiortc などを参考に実装 ・動作確認 ChromeとシグナリングしてDataChannelで通信 これまで実装したプロトコルを束ねて制御するコンポーネント https://github.com/shinyoshiaki/rainy-webrtc

  18. Demo

  19. リポジトリにDemoを置いてます https://github.com/shinyoshiaki/rainy-webrtc

  20. 感想など

  21. TypeScript (Node.js) で実装した感想 • たいへん ◦ Node.jsは標準の暗号化周りが貧弱 ▪ ライブラリを探さないといけない ▪

    Goが羨ましい • 型の強弱をコントロールできて開発者体験が良い • VsCodeでbreakpoint置いて変数の中が見れる(他言語もできる....) 既存の実装と通信疎通した時の達成感は凄い
  22. 今後 • リファクタリング • MediaChannel ◦ RTP/RTCP ◦ SRTP/SRTCP ◦

    DTLS-SRTP ◦ MediaChannel ◦ コーデック周り
  23. 質問など @ShinYoshiaki