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.6k
今から始める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
66
KPI&フレームワークから考える失敗しないアプリ改善 / How to successfully growth app
t14i
7
2.3k
サービスに機械学習を取り入れるコツ.pdf
t14i
1
270
ユーザーインタビューの基礎の基礎.pdf
t14i
1
400
カウルを支える技術の作り方
t14i
3
3.8k
webエンジニアが機械学習とか難しいアルゴリズムを理解するとっかかり.pdf
t14i
0
110
不動産購入における レコメンドの役割
t14i
0
430
Other Decks in Technology
See All in Technology
20201008_ファインディ_品質意識を育てる役目は人かAIか___2_.pdf
findy_eventslides
2
620
AI時代こそ求められる設計力- AWSクラウドデザインパターン3選で信頼性と拡張性を高める-
kenichirokimura
3
300
許しとアジャイル
jnuank
1
150
ACA でMAGI システムを社内で展開しようとした話
mappie_kochi
1
320
[Codex Meetup Japan #1] Codex-Powered Mobile Apps Development
korodroid
2
500
コンテキストエンジニアリング入門〜AI Coding Agent作りで学ぶ文脈設計〜
kworkdev
PRO
1
660
M5製品で作るポン置きセルラー対応カメラ
sayacom
0
180
社内報はAIにやらせよう / Let AI handle the company newsletter
saka2jp
8
1.4k
能登半島地震において デジタルができたこと・できなかったこと
ditccsugii
0
170
後進育成のしくじり〜任せるスキルとリーダーシップの両立〜
matsu0228
7
3.3k
CoRL 2025 Survey
harukiabe
0
170
AI Agent Dojo #2 watsonx Orchestrateフローの作成
oniak3ibm
PRO
0
110
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
Navigating Team Friction
lara
190
15k
Faster Mobile Websites
deanohume
310
31k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Producing Creativity
orderedlist
PRO
347
40k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
870
The Cost Of JavaScript in 2023
addyosmani
54
9k
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