SkyWay UG Tokyo #2 - Supported by ピクシブ に行ってきたメモ #WebRTCSkyWay

pixiv Sketch Live

• お絵かきを配信
• RTMPではなくWebRTC
• 最終的には時雨堂のSFUになった

SFU

• P2Pだとスケールに限界がある
• SFUだとそれを回避できる
  • SkyWayなら500GB（転送量）まで無料
• SoraがSRTP -> RTPしてGPUサーバーに転送して、そこでHLSにする
  • こういうことしたい！ってなると、SkyWayではなくなるよな・・

SkyWayの頃

• ルーム機能を使ってた
• チャット機能もSkyWayの機能でまかなえた

困ったこと

• 接続情報（PeerID）と、アプリ側のユーザーIDをどう紐付けるか
  • ユーザーIDごとにランダムなPeerIDを払い出してた
  • 別タブを見分けたりしたかった
• ルーム内のユーザー一覧
  • 自前で紐付けてDBに入れるしかなかった
• 配信終了の処理
  • ルームの管理者という概念がない
  • ユーザーがいなくなったら部屋が消える
  • この配信をやめさせたい・・みたいなのを検知できない
  • それ用のイベントを用意して解決
• ハートビート
  • ↑の理由から、配信主がリロードしたら部屋が解散してしまう
  • 退出ボタンは押されない場合も多い
  • 5分間Pingされてない部屋は解散にした
• WebRTC関係ないところが最も大変だった
  • Viewのモード切り替えとか

pixiv SketchのDrawモード

• canvasから`captureStream()`
• 音は別途ストリーム作って、自前でTrackを合成する
• こういうことをするので、常にMediaStreamTrackで管理するようにした

その他

• 高画質で配信したいなら
  • `getUserMedia()`のconstraintsで`ideal`を
  • 画面共有の時は`max`を
• 画面共有
  • Chromeは拡張のインラインインストールおすすめ
  • Firefoxは`https`必須（localhostでも）

同時配信のデバッグ

• 良いPCほしい
• 広いモニタほしい
• シークレットウィンドウ最高

まとめ

• SkyWayがWebRTCな範囲はがんばってくれた
• 無料枠もあるので、プロトから本採用も移行しやすいのでは

結局、WebRTC的なとこよりも高度なGUIアプリをJavaScriptでどうやって作るかが問題よね・・。

WebRTCは何をしてるか

• セッション管理（SDP）
• ストリーミング（SRTP）
• NAT越え

SDP

• 最初にコレみて動画のフォーマットを知る
• 読みづらいで有名なプロトコル
• `a=:`行を実際は見ていけばいい

RTPをデコードする

• UDPにヘッダがついてるだけ
• ペイロードのタイプ（7bit）によって処理
  • そんな種類少ないわけないので、今はそれ用のがある
• RTPは順序が保証されないので自前で並び替え
• RTPのペイロードからNAL Unitなる単位を取り出す
• それをAnnex Bという方式でデコーダーに投げればゴール
• UDPは一般的には1500byteなので、結合したり分割したりする
  • 結合パケットと分割パケットで対応
  • これも動画フォーマットによって決まってる

質問

• なんでWebRTCやめてHLSにしたの？
  • サービス特性によって選択
  • HLSの遅延の限界は1.75秒くらいなので
  • CMAFでもうちょい短縮できそうなのでやっていきたい
• WebRTCでHLS配信したいんだけど、がっつりサーバー書けなくて・・って場合は？
  • ImageFlux使ってくれれば楽だよ
• Wowza使えば楽にならない？
  • よく知らないけど、動かないとかよく聞く
  • H.264がそもそもパケロスを考慮してないので、そこをどうカバーするかがキモ
  • だから今までRTMP時代だったし
• WebRTC時代がくると、何が大変になる？
  • 安定して配信すること・・
  • ブラウザのAPIより先に手を出せないところ
• RTMPの厳しさは？
  • WebRTCより標準化されてないところ
  • 配信ソフト（OBS）とかとの相性とかもまちまち

おもしろかったけど、SkyWayというより某社のSFU製品色の強いセッションやったよねｗ(˘ω˘ )

iOS Safari x WebRTC！

• walkwiz.me というサービスを作った
  • カメラの前で歩くモーションをすると、ストリートビューがちょっとずつ動く
• SkyWay / Firebase / Google Map API
  • すべてフリーミアム！

デバッグから

• SkyWayのサポートページに載ってる内容だけでは終わらなかった
• iOS 10未満の非対応です対応
  • `alert()`で非対応って出すだけ
• iOS 11.0 / iOS 11.1
  • なんか触ってるとフリーズする
  • 強制終了もできない
  • `alert()`でアップデートしたほうがいいよって出す
• WebViewの対応
  • iOS 11でもダメ
  • FacebookとかLINEとかは、独特のUAで判別
• DataChannelのデータがロストする
  • デフォルトでは`reliable`なはずだが・・
  • `maxRetransmits`をマニュアルで

iOS 11.3に期待！

WebRTCで（よく）使われるコーデック

• Audio codecs
  • Opus
  • G.711
• Video codecs
  • VP8
  • VP9
  • H.264
  • AV1

映像コーデックたち

• VP9
  • Google
  • ロイヤリティフリー！
• H.264
  • MPEG LAが管理（有料）
  • Ciscoが出してるOpenH264を使ってれば無料
  • Androidは一部どうだろう・・
• AV1
  • ロイヤリティフリー！

ブラウザ

• Safariとつなぐなら、H.264一択になる（現状）

コーデックを選択するには

• SDPを書き換えるしかない
  • 大変
• SkyWayなら`{ videoCodec: 'H264' }`ってするだけ！
  • VP8, VP9, H.264が使えます