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
3.4k
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
1.2k
ANYハッカソン 時間差パズルVRゲーム
shinyoshiaki
0
2.1k
P2P分散型SNS “D-Twi”
shinyoshiaki
0
2.1k
サーバレス な マルチユーザVR システム
shinyoshiaki
0
2k
Other Decks in Programming
See All in Programming
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
15
5.6k
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
440
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
7.3k
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
620
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
730
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
320
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
260
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
620
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.3k
GPUを計算資源として使おう!
primenumber
1
250
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
390
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
200
Featured
See All Featured
The Cult of Friendly URLs
andyhume
79
6.5k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
970
Navigating Team Friction
lara
187
15k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
108
19k
Adopting Sorbet at Scale
ufuk
77
9.5k
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