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

by Tomoaki Takamatsu

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

©2020 Worky inc. 4 Workyspace サービス紹介 2019/9 2020/2 2020/5 2020/7 プロトタイプ会社設立開発スタート β版リリースビデオSaaSのエンジニアリング最前線 ● 将来海外移住しても仲間と楽しく働きたい！と思い立つ ● プロトタイプ後のヒアリングでニーズなさそう … ● 2020/2 ごろにリモートワークの流れが来る ● 3ヶ月で作ってβ版公開 ● 100社+のお問い合わせをいただく ● フィードバックを受けながら改善中 βユーザさん募集中です！！！ ↓↓↓ https://worky.co

Slide 5

Slide 5 text

©2020 Worky inc. 5 ● Electron (macos / Windows / Linux 向けデスクトップアプリ ) ● Vue.js x Nuxt ● Typescript ● ﬁrebase (ﬁrestore / cloud function / storage) ● WebRTC ● Vercel (webのホスティングサービス ) ● STUDIO ● サーバレス！使っている技術 Workyspace

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

©2020 Worky inc. 10 ● とりあえずはざっくり概要を抑えましょう ● 誰でもリアルタイムで画像とか音声をやりとり出来るようになるありがたい技術 ● P2P / SFU / MCU ○ P2Pは4人以上とかで繋ぐとローカルの CPU辛い ○ SFUはほぼデータフォワードのみだから軽い ● シグナリング / ICE / STUN / TURN ○ 確実に繋がるように色々工夫してる（くらいの緩い理解） ● DTLS / SRTP ○ リアルタイム性のために UDPベースでやるための技術 WebRTCとは？① WebRTC 習得フロー

Slide 11

Slide 11 text

©2020 Worky inc. 11 ● コーデック ○ データ圧縮して送る技術 ○ ブラウザによって対応状況違う ○ 送信側と受信側でコーデック合わないと見れない ● 参考資料 ○ 時雨堂さんの資料がオススメです ○ WebRTC コトハジメ - https://gist.github.com/voluntas/67e5a26915751226fdcf ○ WebRTC SFU コトハジメ - https://gist.github.com/voluntas/4d2bd3e878965bdd747a WebRTCとは？② WebRTC 習得フロー

Slide 12

Slide 12 text

Slide 13

Slide 13 text

©2020 Worky inc. 13 どうやって動くの？（クライアント） WebRTC 習得フローデバイスからのストリーム取得ネットワーク DOMへのバインディング ● getUserMedia でデバイスからストリーム取得 ● MediaStreamTrack (音声 or 画像) => MediaStream (Trackを束ねたもの) ● Constraints で条件指定できる ● サーバ or クライアントとのシグナリング ● RTCPeerConnection(通信まわりまるっとまとめたAPI) ● 使うサービスによって実装まちまち ● MediaStreamをvideoタグにバインディング取得したストリームを送る受け取ったストリームを表示する

Slide 14

Slide 14 text

©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 習得フロー

Slide 15

Slide 15 text

Slide 16

Slide 16 text

©2020 Worky inc. 16 ● PaaSから始めるのが簡単で良い ○ Skyway / Twilio / Daily.co ○ ほぼコストゼロで始められる ● がっつりやるなら自前ホスティングも視野に ○ OSS - Jitsi / mediasoup ○ パッケージ製品 - 時雨堂 Sora ○ 観点 ■ 利用コスト ■ メンテナンスコスト ■ 安定性 ■ SDK / API (抽象化のレベルがサービスによってだいぶ違う ) どのサービスを使えばいい？ WebRTC 習得フロー

Slide 17

Slide 17 text

©2020 Worky inc. 17 ● 実装は使うサービスによって全然違う ○ たいていはチュートリアルがあるのでサクッと行けます ○ サービスのドキュメントをしっかり読みましょう ● ヒント ○ デバイス側のインターフェースは提供してないサービスもある => その場合は MDN を参照 ○ シグナリング側はサービス依存なので必ずドキュメントあります ○ 基礎を抑えておけば困った時も（だいたい）大丈夫実装してみる WebRTC 習得フロー ※まず動かしたい！という人はここからやっても全然良いです。

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

©2020 Worky inc. 20 ● アプリのCPU使用率を改善したい ● データ送受信量を減らす = CPU使用率が下がる ↔ クオリティの低下 ● 送信側の転送量を減らしたい ○ getUserMedia の constraints で指定できる ● 受信側を減らしたい ○ 送信側のそもそもの転送量を減らす ○ サーバ側での調整 => これは使ってるサービス次第ケース①）CPU使用率の改善 WebRTC 習得フロー