Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
TypeScriptとNode.jsでWebRTCを実装してみた
Search
shinyoshiaki
July 16, 2020
Programming
1
2.9k
TypeScriptとNode.jsでWebRTCを実装してみた
WebRTC Meetup Online #1
開発リポジトリ
https://github.com/shinyoshiaki/werift-webrtc
shinyoshiaki
July 16, 2020
Tweet
Share
More Decks by shinyoshiaki
See All by shinyoshiaki
CPaaS「SkyWay」を作るために 必要なスキルの身につけ方
shinyoshiaki
0
950
ANYハッカソン 時間差パズルVRゲーム
shinyoshiaki
0
2k
P2P分散型SNS “D-Twi”
shinyoshiaki
0
1.9k
サーバレス な マルチユーザVR システム
shinyoshiaki
0
1.9k
Other Decks in Programming
See All in Programming
Reckoner の Scala プロジェクトにおける オブザーバビリティの取り組み / Observability Initiatives in Reckoner's Scala Project
nomadblacky
0
820
プログラミングを楽しもう! / Enjoy Programming
chobishiba
1
700
htmx is fun!
codehex
2
170
OpCode目線で眺める PHPコードのカバレッジ
o0h
PRO
2
470
Не учите алгоритмы
hellsquirrel
1
700
PHPerライフをChrome拡張開発でちょっと便利に / PR TIMES x DMM.com
meihei3
0
200
とにかくHTTP3をライトニングに話す / Anyway, I'll talk to Lightning about HTTP3.
seike460
PRO
0
110
Honoとhtmx
yusukebe
6
1.1k
DDD, necessary but insufficient: physical design principles for microservices
cer
PRO
0
160
Cloud RunとCloud PubSubでサーバレスなデータ基盤2024 with Terraform / Cloud Run and PubSub with Terraform
shinyorke
7
1.7k
TokyoR#111_ANOVA
kilometer
1
710
『データ可視化学入門』をPythonからRに翻訳した話(増強版)
bob3bob3
0
280
Featured
See All Featured
Embracing the Ebb and Flow
colly
78
4.1k
Clear Off the Table
cherdarchuk
82
310k
Music & Morning Musume
bryan
39
5.4k
jQuery: Nuts, Bolts and Bling
dougneiner
57
7.1k
RailsConf 2023
tenderlove
0
500
We Have a Design System, Now What?
morganepeng
42
6.7k
Large-scale JavaScript Application Architecture
addyosmani
501
110k
Fireside Chat
paigeccino
19
2.5k
How to name files
jennybc
62
91k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
24
2.2k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
Rails Girls Zürich Keynote
gr2m
91
13k
Transcript
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