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

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を置いてます https://github.com/shinyoshiaki/rainy-webrtc

感想など

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

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

質問など @ShinYoshiaki

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

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

shinyoshiaki

More Decks by shinyoshiaki

Other Decks in Programming

Featured

Transcript