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

自己紹介 ● Yoshiaki Shin ● 3月に大学を卒業 ● NTTコミュニケーションズ株式会社 ○ SkyWayの中の人 大変な年に社会人になってしまった まだオフィスに1度しか出社できてない。リモート飽きた（笑） @ShinYoshiaki

目次 ● WebRTC実装とは ● WebRTCの実装方法 ● プロトコル実装 ○ ICE ○ DTLS ○ SCTP ○ DCEP , DataChannel ○ PeerConnection ● DEMO ● 感想など

WebRTC実装とは

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

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

WebRTCの実装方法

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 など

既存のWebRTC実装 主に aiortc のコードを参考にTypeScriptで実装を行った 理由：この中だとPythonが一番 TypeScriptのパラダイムに近いから libwebrtc C++ aiortc Python pion Go など

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

プロトコル実装

各プロトコル毎に別のプロジェクトとして実装を行った 各プロトコルは独立して機能するように実装した 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

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

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

SCTP (user land) 　IPの上で動く本来のSCTPではない ・実装方法 　RFC , aiortc , pion などを参考に実装 　transportを抽象化している (ICE , DTLS , etc…..) ・動作確認 　pion/sctpをSCTP over UDPとして通信疎通を確認 Streamの輻輳制御、順序制御 https://github.com/shinyoshiaki/rainy-sctp

DCEP , DataChannel ・実装方法 draft文章 , aiortc などを参考に実装 ・動作確認 aiortc のテストコードを参考にテスト DCEP : SCTPの上でDataChannelを開くプロトコル https://github.com/shinyoshiaki/rainy-webrtc

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

Demo

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

感想など

TypeScript (Node.js) で実装した感想 ● たいへん ○ Node.jsは標準の暗号化周りが貧弱 ■ ライブラリを探さないといけない ■ Goが羨ましい ● 型の強弱をコントロールできて開発者体験が良い ● VsCodeでbreakpoint置いて変数の中が見れる（他言語もできる....） 既存の実装と通信疎通した時の達成感は凄い

今後 ● リファクタリング ● MediaChannel ○ RTP/RTCP ○ SRTP/SRTCP ○ DTLS-SRTP ○ MediaChannel ○ コーデック周り

質問など @ShinYoshiaki