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
Claude Code と OpenAI o3 で メタデータ情報を作る
laket
0
110
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
180
React 使いじゃなくても知っておきたい教養としての React
oukayuka
18
5.2k
NEWT Backend Evolution
xpromx
1
170
Quality Gates in the Age of Agentic Coding
helmedeiros
PRO
1
120
MySQL9でベクトルカラム登場!PHP×AWSでのAI/類似検索はこう変わる
suguruooki
1
280
構造化・自動化・ガードレール - Vibe Coding実践記 -
tonegawa07
0
170
ZeroETLで始めるDynamoDBとS3の連携
afooooil
0
150
Comparing decimals in Swift Testing
417_72ki
0
160
CEDEC 2025 『ゲームにおけるリアルタイム通信への QUIC導入事例の紹介』
segadevtech
2
720
GUI操作LLMの最新動向: UI-TARSと関連論文紹介
kfujikawa
0
210
Claude Code で Astro blog を Pages から Workers へ移行してみた
codehex
0
170
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
Faster Mobile Websites
deanohume
308
31k
The Cult of Friendly URLs
andyhume
79
6.5k
Into the Great Unknown - MozCon
thekraken
40
2k
Making Projects Easy
brettharned
117
6.3k
Java REST API Framework Comparison - PWX 2021
mraible
32
8.8k
BBQ
matthewcrist
89
9.8k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
182
54k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
19k
Being A Developer After 40
akosma
90
590k
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