🍃このブログは移転しました。
3秒後、自動的に移動します・・・。

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

ピクシブ社にはじめて入った回。
ふっつーに仕事のミーティングしてる横で、マンガもいっぱいあって無限に時間つぶせそうな空間でした・・!

SkyWayを導入した時の話(仮) by walf443

SkyWayを使っていたこともあったよ(今は使ってないよ)という話。

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`を
  • 画面共有

同時配信のデバッグ

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

まとめ

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

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

WebRTCの動画ストリームをトランスコードする by harukasan

WebRTC動画をトランスコードする / Transcoding video streams from WebRTC // Speaker Deck

噂のImageFluxの話!
WebRTCのストリームをHLSにして配信するためにはどうすればいいか。

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製品色の強いセッションやったよねw(˘ω˘ )

SkyWayベースのウェブアプリをiOS版Safariに対応した時の話 by uturist

世知辛い話w

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に期待!

pixiv Sketch Liveリリースの裏側 by _furoshiki

非公開です!

WebRTCとコーデックの関係 by yusuke84

WebRTCとコーデックの関係 - Qiita

初心者に優しいコーデック入門。

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が使えます