ボクココ

サービス開発を成功させるまでの歩み

Twilio Video 2.0 のまとめ

ども、@kimhiom です。

f:id:cevid_cpp:20200126181739j:plain

先月、ついに Twilio Programmable Video の 2.0 が GA となった。私としては心待ちにしていた 2.0 の正式リリースだった。

てことで Twilio の最新を追いかけ続けている身として、 2.0 でどんなことができるようになったのかをまとめよう。

Network Bandwidth Profile API

まず前提として、全てのブラウザ環境でネットワークが十分であるという保証はないという点がある。単にインターネットでウェブサイトを閲覧するだけなら、ダウンロードの速度だけ最低限あれば「使える」というレベルになる。だがビデオ通話ではダウンロード/アップロードそれぞれ最低限の速度(10Mbps) があり、しかもその速度がビデオ通話中にずっとキープされ続ける必要がある。このネットワークの前提条件をクリアしない限り、快適なビデオ通話は不可能だ。

てことで、ビデオ通話ではインターネット接続速度による問題が常に発生する。ではビデオ通話が満足にできないネットワーク品質の時に、どう対応するか。そこが Twilio Video 2.0 の腕の見せ所である。

BandwidthProfileMode

まず、各ビデオに優先度をつけるための priority が登場した。ここで大事なビデオかどうかを指定できる。大事でない場合、そこのビデオの画質は多少悪くなっても大丈夫だと言える。

例えば、そのビデオ通話でメインの人がいる場合には、その人のビデオにできる限りのネットワーク資源(Bandwidth)を使うことができる。その他に メインで共有しているスクリーンシェアは優先させて、それ以外の参加者のビデオは優先度を下げるといったことも可能だ。

priority のあるビデオをどう扱うか、全部で3種類の Mode が存在する。

  • grid (default): 全部の VideoTrack が平等
  • collaboration: 各ビデオに優先順位をつける。ネットワーク速度は低い場合でも全部表示し続ける。
  • presentation: 各ビデオに優先順位をつける。ネットワーク速度は低い場合、大事なのを表示し続けるために優先度の低いものを非表示にする。

なお、collaboration, presentation を設定する場合には VP8 Simulcast モードで使う必要がある。

TrackSwitchOffMode

視聴者のダウンロードスピードが十分でない場合、音声やビデオのパケットロスが発生する。そこで、ネットワークスピードが十分でないことをどうやって判断するかを指定する。

  • predicted(default): ネットワークスピード劣化が "予測" されたら、優先度の低い VideoTrack が OFF になる。この場合、ネットワークスピードが劣化しても、途中で音質や優先度の高いビデオが劣化ことはない
  • detected: ネットワークスピード劣化が実際に "計測" されたら 優先度の低い VideoTrack が OFF になる。この場合、一時的に音が途切れたりビデオが止まったりすることがある。
  • disabled: ネットワークスピード劣化しても、VideoTrack を OFF にしない。この場合、音声もビデオも視聴できなくなることがある。利用すべきでない。

実際にネットワーク低下が発生すると、優先度の低いビデオで、かつほとんど話されていないものから OFF になっていく。collaboration, presentation を設定していて Priority が High のものはできる限り残す。また音声が OFF になることはない。

MaxTracks

ビデオに参加できる数を指定できる。例えば 40人参加しているビデオ通話において、全員が同時に喋ることはまずないだろう。MaxTracks を5に設定すると、メインで利用しているスクリーンと、最も話している4名を表示するということが可能だ。

40人のうち、どの4人を選ぶかというと、直近で高い頻度で会話をしているビデオが選ばれる(N-Loudest policy)。他に 最後に会話した4人という選び方(Last-N) があるけど、これは Twilio Video ではサポートしていない。

サンプル JavaScript

bandwidthProfile にはその他に maxSubscriptionBitrate, dominantSpeakerPriority, renderDimensions などがある。renderDimensions に関してはデフォルトでそれぞれ設定されているので、もし変えたい場合に設定する。

const room = await connect(token,{
  name: "my-new-room",
  bandwidthProfile: {
    video: {
      mode: 'collaboration',
      trackSwitchOffMode: 'detected',
      maxSubscriptionBitrate: 2400000,
      dominantSpeakerPriority: 'high',
      maxTracks: 3,
      renderDimensions: {
        high: {width: 1080, height: 720},
        standard: {width: 640, height: 480},
        low: {width: 320, height: 240}
      }
    }
  }
});

Reconnection

ビデオを視聴している間にネットワークの切断が起こった場合、Twilio Video 側で自動で再接続を試みる。

それでもし接続に成功すれば、ビデオ通話が自動で再開される。以前の Twilio Video 1.0 では、失敗したらそのまま再接続しなかったのでページを更新する必要があった。

再接続中、再接続に成功、通信を切断 それぞれでイベントが用意されている。

終わりに

全員が快適にビデオ通話をするにはどうすればいいか。そこを突き詰めた結果こそが、Twilio Video 2.0 だ。

1年以上かけて、Twilio Video 2.0 から Beta から GA になったということもあり、今後の Twilio Video の新しい機能・アップデートに期待している。