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
今から始めるWebRTC / How to learn WebRTC
Search
Tomoaki Takamatsu
July 08, 2020
Technology
4
3.1k
今から始めるWebRTC / How to learn WebRTC
2020/7/8 ビデオSaaSのエンジニアリング最前線の登壇資料です。
WebRTCを学ぶための指針についてまとめています。
Tomoaki Takamatsu
July 08, 2020
Tweet
Share
More Decks by Tomoaki Takamatsu
See All by Tomoaki Takamatsu
プロダクトマーケティングの考え方で採用フローをグロースした話 / Growth of hiring process
t14i
0
44
KPI&フレームワークから考える失敗しないアプリ改善 / How to successfully growth app
t14i
7
2k
サービスに機械学習を取り入れるコツ.pdf
t14i
1
220
ユーザーインタビューの基礎の基礎.pdf
t14i
1
250
カウルを支える技術の作り方
t14i
3
3.8k
webエンジニアが機械学習とか難しいアルゴリズムを理解するとっかかり.pdf
t14i
0
63
不動産購入における レコメンドの役割
t14i
0
400
Other Decks in Technology
See All in Technology
エンジニア候補者向け資料2024.03.28.pdf
macloud
0
2.9k
関数型DDDの理論と実践:「決定を遅らせる」を先につくり、 ビジネスの機動力と価値をあげる
knih
2
500
サービスメッシュ環境における OpenTelemetry 活用 / OpenTelemetry in Service Mesh
k6s4i53rx
2
880
#51 “Empowering Azure Storage with RDMA”
cafenero_777
3
220
20240321_生成AI時代のDevOps
kzkmaeda
2
620
どう買う?Azure
kuniteru
1
190
オブジェクトのおしゃべり大失敗 メッセージングアンチパターン集 / messaging anti-pattern collection
ytake
0
340
統計的学習理論読み Chapter 1
kmatsui
4
1k
イチから学ぶdbt / Learn dbt from scratch
shinyaa31
0
160
Azureコストは水道代/The_47th_Tokyo_Jazug
aeonpeople
3
390
Getting started with controlling LEGO using Swift
hcrane
0
140
VSCode上からSlackにメッセージを送る拡張機能を作っている話
ebarakazuhiro
0
130
Featured
See All Featured
Statistics for Hackers
jakevdp
789
220k
GitHub's CSS Performance
jonrohan
1023
450k
In The Pink: A Labor of Love
frogandcode
137
21k
Unsuck your backbone
ammeep
661
56k
Scaling GitHub
holman
456
140k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3k
For a Future-Friendly Web
brad_frost
170
8.9k
It's Worth the Effort
3n
180
27k
The Cult of Friendly URLs
andyhume
73
5.6k
The Cost Of JavaScript in 2023
addyosmani
13
3.7k
How to train your dragon (web standard)
notwaldorf
71
5.1k
Stop Working from a Prison Cell
hatefulcrawdad
265
19k
Transcript
©2020 Worky inc. 2020/7/8 ビデオSaaSのエンジニアリング最前線 高松 智明 Worky Inc. Co-founder
CEO 1 今からはじめるWebRTC
©2020 Worky inc. 2 • Worky Inc. Co-founder CEO (5ヶ月目)
◦ Workyspace ◦ 技術 x 経営 ◦ ビッグデータ / 機械学習 / サーバサイド / 最近はフロントも • 経歴 ◦ 不動産テック企業で取締役兼 CTO (4年) ◦ 楽天でエンジニア(4年) 高松 智明 (@t14i_) 自己紹介
©2020 Worky inc. • Remote work with fun! • リモートチームワークを楽しくする
ビデ オチャットツール • 動作が軽い&UIが邪魔にならないので 繋ぎながら作業しやすい • 誰と誰がどこで話しているかわかる • 部屋に入ると通知が来て会話が始まる Workyspace サービス紹介
©2020 Worky inc. 4 Workyspace サービス紹介 2019/9 2020/2 2020/5 2020/7
プロトタイプ 会社設立 開発 スタート β版 リリース ビデオSaaSの エンジニアリング 最前線 • 将来海外移住しても仲間と楽しく働きたい!と思い立つ • プロトタイプ後のヒアリングでニーズなさそう … • 2020/2 ごろにリモートワークの流れが来る • 3ヶ月で作ってβ版公開 • 100社+のお問い合わせをいただく • フィードバックを受けながら改善中 βユーザさん募集中です!!! ↓↓↓ https://worky.co
©2020 Worky inc. 5 • Electron (macos / Windows /
Linux 向けデスクトップアプリ ) • Vue.js x Nuxt • Typescript • firebase (firestore / cloud function / storage) • WebRTC • Vercel (webのホスティングサービス ) • STUDIO • サーバレス! 使っている技術 Workyspace
©2020 Worky inc. 6 今日の発表の目的: よし!WebRTCやるぞ!となった時の 技術理解の指針になること
©2020 Worky inc. 7 こんな人が • Web開発経験はわりとある • WebRTC全然わからない こうなる
• WebRTC使った実装を始められる • 学習しながら深められる
©2020 Worky inc. 8 • 試しに動かすのは簡単、本番で提供するのは難しい ◦ 全部を抑えようとするとめちゃくちゃ幅広い技術領域 ◦ 特定のサービスを使うだけなら簡単
◦ チューニング/拡張/運用にはそれなりの知識が必要 ◦ どの順番でどこまで学ぶかが難しい WebRTC学習の難しさ Workyspace 本格的に始めるための “ちょうど良い” 情報が欲しい!
©2020 Worky inc. 9 WebRTC 習得フロー • WebRTCとは? • どうやって動くの?
• どのサービスを使えばいい? • 実装してみる • 運用〜改善 ※実際にわりと経験のあるエンジニアはこれですんな り実装を始められるレベルになってます
©2020 Worky inc. 10 • とりあえずはざっくり概要を抑えましょう • 誰でもリアルタイムで画像とか音声をやりとり出来るようになるありがたい技術 • P2P
/ SFU / MCU ◦ P2Pは4人以上とかで繋ぐとローカルの CPU辛い ◦ SFUはほぼデータフォワードのみだから軽い • シグナリング / ICE / STUN / TURN ◦ 確実に繋がるように色々工夫してる(くらいの緩い理解) • DTLS / SRTP ◦ リアルタイム性のために UDPベースでやるための技術 WebRTCとは?① WebRTC 習得フロー
©2020 Worky inc. 11 • コーデック ◦ データ圧縮して送る技術 ◦ ブラウザによって対応状況違う
◦ 送信側と受信側でコーデック合わないと見れない • 参考資料 ◦ 時雨堂さんの資料がオススメです ◦ WebRTC コトハジメ - https://gist.github.com/voluntas/67e5a26915751226fdcf ◦ WebRTC SFU コトハジメ - https://gist.github.com/voluntas/4d2bd3e878965bdd747a WebRTCとは?② WebRTC 習得フロー
©2020 Worky inc. 12 どうやって動くの?(システム全体) WebRTC 習得フロー • SFUだとこんな感じ •
全部コネクション貼ると CPUやばい • マルチストリームという仕組みがある • 受信ストリーム数が増えた時は? ◦ 間引く(ex: 直近で話した人のみ ) ◦ データサイズを小さくする ◦ 他にも方法ありそう
©2020 Worky inc. 13 どうやって動くの?(クライアント) WebRTC 習得フロー デバイスからのストリーム取得 ネットワーク DOMへのバインディング
• getUserMedia でデバイスからストリーム取得 • MediaStreamTrack (音声 or 画像) => MediaStream (Trackを束ねたもの) • Constraints で条件指定できる • サーバ or クライアントとのシグナリング • RTCPeerConnection(通信まわりまるっとま とめたAPI) • 使うサービスによって実装まちまち • MediaStreamをvideoタグにバインディング 取得した ストリームを送る 受 け 取 っ た ス トリー ム を 表 示 す る
©2020 Worky inc. 14 • 全体感を掴むなら「ハイパフォーマンスブラウザネットワーキング」 ◦ WebRTC の章を読むのがオススメ ◦
https://www.oreilly.co.jp/books/9784873116761/ • 実装のお供は MDN の WebRTC API ◦ Mozillaが公開している ◦ Web技術全般をわかりやすく解説しているありがたいサイト ◦ https://developer.mozilla.org/ja/docs/Web/API/WebRTC_API どうやって動くの?(参考資料) WebRTC 習得フロー
©2020 Worky inc. 15 基礎はおさえた! さらっと概要をつかんで 必要に応じてまた戻ってくればOK
©2020 Worky inc. 16 • PaaSから始めるのが簡単で良い ◦ Skyway / Twilio
/ Daily.co ◦ ほぼコストゼロで始められる • がっつりやるなら自前ホスティングも視野に ◦ OSS - Jitsi / mediasoup ◦ パッケージ製品 - 時雨堂 Sora ◦ 観点 ▪ 利用コスト ▪ メンテナンスコスト ▪ 安定性 ▪ SDK / API (抽象化のレベルがサービスによってだいぶ違う ) どのサービスを使えばいい? WebRTC 習得フロー
©2020 Worky inc. 17 • 実装は使うサービスによって全然違う ◦ たいていはチュートリアルがあるのでサクッと行けます ◦ サービスのドキュメントをしっかり読みましょう
• ヒント ◦ デバイス側のインターフェースは提供してないサービスもある => その場合は MDN を参照 ◦ シグナリング側はサービス依存なので必ずドキュメントあります ◦ 基礎を抑えておけば困った時も(だいたい)大丈夫 実装してみる WebRTC 習得フロー ※まず動かしたい!という人はここからやっても全然良いです。
©2020 Worky inc. 18 とりあえず動いた! あとは運用しながら改善
©2020 Worky inc. 19 • ここから先はぶつかってから調べるで OK • その知見をチームで溜めていくのが大事 •
Worky チームもまだまだこれからです 運用〜改善 WebRTC 習得フロー
©2020 Worky inc. 20 • アプリのCPU使用率を改善したい • データ送受信量を減らす = CPU使用率が下がる
↔ クオリティの低下 • 送信側の転送量を減らしたい ◦ getUserMedia の constraints で指定できる • 受信側を減らしたい ◦ 送信側のそもそもの転送量を減らす ◦ サーバ側での調整 => これは使ってるサービス次第 ケース①)CPU使用率の改善 WebRTC 習得フロー
©2020 Worky inc. 21 • 話している間こういうやつ出したい • MDN の Web
Audio API ◦ https://developer.mozilla.org/ja/doc s/Web/API/Web_Audio_API • AudioContext にスクリプトを定義すると取れ る ケース②)マイクの音量を知りたい WebRTC 習得フロー
©2020 Worky inc. 22 WebRTC 習得フロー • WebRTCとは? • どうやって動くの?
• どのサービスを使えばいい? • 実装してみる • 運用〜改善
©2020 Worky inc. 23 Remote work with fun!!! βユーザさん募集中です!!! ↓↓↓
https://worky.co