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.5k
今から始める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
59
KPI&フレームワークから考える失敗しないアプリ改善 / How to successfully growth app
t14i
7
2.2k
サービスに機械学習を取り入れるコツ.pdf
t14i
1
260
ユーザーインタビューの基礎の基礎.pdf
t14i
1
380
カウルを支える技術の作り方
t14i
3
3.8k
webエンジニアが機械学習とか難しいアルゴリズムを理解するとっかかり.pdf
t14i
0
98
不動産購入における レコメンドの役割
t14i
0
430
Other Decks in Technology
See All in Technology
事業成長の裏側:エンジニア組織と開発生産性の進化 / 20250703 Rinto Ikenoue
shift_evolve
PRO
2
21k
整頓のジレンマとの戦い〜Tidy First?で振り返る事業とキャリアの歩み〜/Fighting the tidiness dilemma〜Business and Career Milestones Reflected on in Tidy First?〜
bitkey
2
16k
SaaS型なのに自由度の高い本格CMSでサイト構築と運用のコスパ&タイパUP! MovableType.net の便利機能とユーザー事例のご紹介
masakah
0
110
生成AI時代の開発組織・技術・プロセス 〜 ログラスの挑戦と考察 〜
itohiro73
1
460
Flutter向けPDFビューア、pdfrxのpdfium WASM対応について
espresso3389
0
130
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
400
KubeCon + CloudNativeCon Japan 2025 Recap by CA
ponkio_o
PRO
0
300
関数型プログラミングで 「脳がバグる」を乗り越える
manabeai
1
190
Tokyo_reInforce_2025_recap_iam_access_analyzer
hiashisan
0
180
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
210
高速なプロダクト開発を実現、創業期から掲げるエンタープライズアーキテクチャ
kawauso
2
9.2k
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
1
16k
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Navigating Team Friction
lara
187
15k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Practical Orchestrator
shlominoach
189
11k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
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