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.5k
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
AIと私たちの学習の変化を考える - Claude Codeの学習モードを例に
azukiazusa1
11
4.4k
print("Hello, World")
eddie
2
530
The Past, Present, and Future of Enterprise Java with ASF in the Middle
ivargrimstad
0
170
Rancher と Terraform
fufuhu
2
550
GitHubとGitLabとAWS CodePipelineでCI/CDを組み比べてみた
satoshi256kbyte
4
250
はじめてのMaterial3 Expressive
ym223
2
900
スケールする組織の実現に向けた インナーソース育成術 - ISGT2025
teamlab
PRO
1
160
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
tetta_pdnt
0
3.3k
複雑なドメインに挑む.pdf
yukisakai1225
5
1.2k
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
2
770
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
230
アセットのコンパイルについて
ojun9
0
130
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
The Language of Interfaces
destraynor
161
25k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
The Art of Programming - Codeland 2020
erikaheidi
56
13k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
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