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

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