今から始めるWebRTC / How to learn WebRTC

2020/7/8 ビデオSaaSのエンジニアリング最前線の登壇資料です。
WebRTCを学ぶための指針についてまとめています。

Transcript

1. ©2020 Worky inc. 2020/7/8 ビデオSaaSのエンジニアリング最前線 高松 智明 Worky Inc. Co-founder CEO 1 今からはじめるWebRTC
2. ©2020 Worky inc. 2 • Worky Inc. Co-founder CEO （5ヶ月目） ◦ Workyspace ◦ 技術 x 経営 ◦ ビッグデータ / 機械学習 / サーバサイド / 最近はフロントも • 経歴 ◦ 不動産テック企業で取締役兼 CTO （4年） ◦ 楽天でエンジニア（4年） 高松 智明 (@t14i_) 自己紹介
3. ©2020 Worky inc. • Remote work with fun! • リモートチームワークを楽しくする ビデ オチャットツール • 動作が軽い＆UIが邪魔にならないので 繋ぎながら作業しやすい • 誰と誰がどこで話しているかわかる • 部屋に入ると通知が来て会話が始まる Workyspace サービス紹介
4. ©2020 Worky inc. 4 Workyspace サービス紹介 2019/9 2020/2 2020/5 2020/7 プロトタイプ 会社設立 開発 スタート β版 リリース ビデオSaaSの エンジニアリング 最前線 • 将来海外移住しても仲間と楽しく働きたい！と思い立つ • プロトタイプ後のヒアリングでニーズなさそう … • 2020/2 ごろにリモートワークの流れが来る • 3ヶ月で作ってβ版公開 • 100社+のお問い合わせをいただく • フィードバックを受けながら改善中 βユーザさん募集中です！！！ ↓↓↓ https://worky.co
5. ©2020 Worky inc. 5 • Electron (macos / Windows / Linux 向けデスクトップアプリ ) • Vue.js x Nuxt • Typescript • firebase (firestore / cloud function / storage) • WebRTC • Vercel (webのホスティングサービス ) • STUDIO • サーバレス！ 使っている技術 Workyspace
6. ©2020 Worky inc. 6 今日の発表の目的： よし！WebRTCやるぞ！となった時の 技術理解の指針になること
7. ©2020 Worky inc. 7 こんな人が • Web開発経験はわりとある • WebRTC全然わからない こうなる • WebRTC使った実装を始められる • 学習しながら深められる
8. ©2020 Worky inc. 8 • 試しに動かすのは簡単、本番で提供するのは難しい ◦ 全部を抑えようとするとめちゃくちゃ幅広い技術領域 ◦ 特定のサービスを使うだけなら簡単 ◦ チューニング/拡張/運用にはそれなりの知識が必要 ◦ どの順番でどこまで学ぶかが難しい WebRTC学習の難しさ Workyspace 本格的に始めるための “ちょうど良い” 情報が欲しい！
9. ©2020 Worky inc. 9 WebRTC 習得フロー • WebRTCとは？ • どうやって動くの？ • どのサービスを使えばいい？ • 実装してみる • 運用〜改善 ※実際にわりと経験のあるエンジニアはこれですんな り実装を始められるレベルになってます
10. ©2020 Worky inc. 10 • とりあえずはざっくり概要を抑えましょう • 誰でもリアルタイムで画像とか音声をやりとり出来るようになるありがたい技術 • P2P / SFU / MCU ◦ P2Pは4人以上とかで繋ぐとローカルの CPU辛い ◦ SFUはほぼデータフォワードのみだから軽い • シグナリング / ICE / STUN / TURN ◦ 確実に繋がるように色々工夫してる（くらいの緩い理解） • DTLS / SRTP ◦ リアルタイム性のために UDPベースでやるための技術 WebRTCとは？① WebRTC 習得フロー
11. ©2020 Worky inc. 11 • コーデック ◦ データ圧縮して送る技術 ◦ ブラウザによって対応状況違う ◦ 送信側と受信側でコーデック合わないと見れない • 参考資料 ◦ 時雨堂さんの資料がオススメです ◦ WebRTC コトハジメ - https://gist.github.com/voluntas/67e5a26915751226fdcf ◦ WebRTC SFU コトハジメ - https://gist.github.com/voluntas/4d2bd3e878965bdd747a WebRTCとは？② WebRTC 習得フロー
12. ©2020 Worky inc. 12 どうやって動くの？（システム全体） WebRTC 習得フロー • SFUだとこんな感じ • 全部コネクション貼ると CPUやばい • マルチストリームという仕組みがある • 受信ストリーム数が増えた時は？ ◦ 間引く(ex: 直近で話した人のみ ) ◦ データサイズを小さくする ◦ 他にも方法ありそう
13. ©2020 Worky inc. 13 どうやって動くの？（クライアント） WebRTC 習得フロー デバイスからのストリーム取得 ネットワーク DOMへのバインディング • getUserMedia でデバイスからストリーム取得 • MediaStreamTrack (音声 or 画像) => MediaStream (Trackを束ねたもの) • Constraints で条件指定できる • サーバ or クライアントとのシグナリング • RTCPeerConnection(通信まわりまるっとま とめたAPI) • 使うサービスによって実装まちまち • MediaStreamをvideoタグにバインディング 取得した ストリームを送る 受 け 取 っ た ス トリー ム を 表 示 す る
14. ©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 習得フロー
15. ©2020 Worky inc. 15 基礎はおさえた！ さらっと概要をつかんで 必要に応じてまた戻ってくればOK
16. ©2020 Worky inc. 16 • PaaSから始めるのが簡単で良い ◦ Skyway / Twilio / Daily.co ◦ ほぼコストゼロで始められる • がっつりやるなら自前ホスティングも視野に ◦ OSS - Jitsi / mediasoup ◦ パッケージ製品 - 時雨堂 Sora ◦ 観点 ▪ 利用コスト ▪ メンテナンスコスト ▪ 安定性 ▪ SDK / API (抽象化のレベルがサービスによってだいぶ違う ) どのサービスを使えばいい？ WebRTC 習得フロー
17. ©2020 Worky inc. 17 • 実装は使うサービスによって全然違う ◦ たいていはチュートリアルがあるのでサクッと行けます ◦ サービスのドキュメントをしっかり読みましょう • ヒント ◦ デバイス側のインターフェースは提供してないサービスもある => その場合は MDN を参照 ◦ シグナリング側はサービス依存なので必ずドキュメントあります ◦ 基礎を抑えておけば困った時も（だいたい）大丈夫 実装してみる WebRTC 習得フロー ※まず動かしたい！という人はここからやっても全然良いです。
18. ©2020 Worky inc. 18 とりあえず動いた！ あとは運用しながら改善
19. ©2020 Worky inc. 19 • ここから先はぶつかってから調べるで OK • その知見をチームで溜めていくのが大事 • Worky チームもまだまだこれからです 運用〜改善 WebRTC 習得フロー
20. ©2020 Worky inc. 20 • アプリのCPU使用率を改善したい • データ送受信量を減らす = CPU使用率が下がる ↔ クオリティの低下 • 送信側の転送量を減らしたい ◦ getUserMedia の constraints で指定できる • 受信側を減らしたい ◦ 送信側のそもそもの転送量を減らす ◦ サーバ側での調整 => これは使ってるサービス次第 ケース①）CPU使用率の改善 WebRTC 習得フロー
21. ©2020 Worky inc. 21 • 話している間こういうやつ出したい • MDN の Web Audio API ◦ https://developer.mozilla.org/ja/doc s/Web/API/Web_Audio_API • AudioContext にスクリプトを定義すると取れ る ケース②）マイクの音量を知りたい WebRTC 習得フロー
22. ©2020 Worky inc. 22 WebRTC 習得フロー • WebRTCとは？ • どうやって動くの？ • どのサービスを使えばいい？ • 実装してみる • 運用〜改善
23. ©2020 Worky inc. 23 Remote work with fun!!! βユーザさん募集中です！！！ ↓↓↓ https://worky.co