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
3k
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
980
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
Site Reliability Engineering for GMO
pyama86
8
1.1k
Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting
unvalley
6
1.1k
try! Swift Tokyo 2024 参加報告 / try! Swift Tokyo 2024 Report
hironytic
0
220
Sheets API使ってみた
toshi0383
2
160
AppRouter Panel Talk
yosuke_furukawa
PRO
1
450
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
170
『Railsオワコン』と言われる時代に、なぜブルーモ証券はRailsを選ぶのか
free_world21
1
350
Go製Webアプリケーションのエラーとの向き合い方大全、あるいはやっぱりスタックトレース欲しいやん / Kyoto.go #50
utgwkk
6
1.7k
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
380
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
7
970
スクラムガイドのスプリントレトロスペクティブを改めて読みかえしてみた / Re-reading the Sprint Retrospective Section in the Scrum Guide
mackey0225
3
480
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
1
1.3k
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
We Have a Design System, Now What?
morganepeng
44
6.8k
Git: the NoSQL Database
bkeepers
PRO
423
63k
Product Roadmaps are Hard
iamctodd
45
9.7k
Music & Morning Musume
bryan
41
5.6k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Practical Orchestrator
shlominoach
183
9.7k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
65
14k
10 Git Anti Patterns You Should be Aware of
lemiorhan
649
58k
Optimising Largest Contentful Paint
csswizardry
12
2.4k
A Philosophy of Restraint
colly
197
16k
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