複数ユーザーで構成されるビデオセッションのユーザー体験を最適化する

読む所要時間: 9 分

September 02, 2021
執筆者
Donal Toomey
Twilion

Improve the Efficiency of Your Multi-Party Video Experiences JP

この記事はDonal Toomeyがこちらで公開した記事（英語）を日本語化したものです。

教育、社会交流、職場のコラボレーションなどのシナリオでは、誰もが会話に参加するために、複数ユーザーでも円滑に動作する優れたビデオ環境が不可欠です。その必要性や価値は明らかですが、ブラウザーやモバイルデバイス向けの、複数ユーザー対応の高性能なビデオアプリケーションの構築は困難です。構築するビデオUIは、直感的であるとともに、ユーザーが使用するデバイスやネットワークの種類を問わず優れたビデオ体験を提供する必要があります。

2019年、Twilioはネットワーク帯域幅プロフィールAPIを導入しました。このAPIは、ユースケースに基づき帯域幅を特定の参加者に割り当てるのに役立ちます。今回Twilioでは、ネットワーク帯域幅プロフィールAPIの機能強化版をリリースしました。機能強化版では、帯域幅とCPUの両方について、複数ユーザー利用を意識した効率的なビデオアプリケーションの構築を支援します。この効率性により、ユーザーのコンピューターのファンがうるさく回転する状況がなくなり、ビデオ品質は向上し、開発者サポートの負担が軽減されます。その他のアップデート項目として、ビデオトラックのスイッチオフのきめ細かい制御や、ユニークなレイアウトの作成が可能となっています。本稿では、ネットワーク帯域幅プロフィールAPIの機能強化版を使用する利点と、その使用例をご紹介します。

CPUリソースと帯域幅の利用を節約する

ビデオアプリケーションは多岐にわたってCPUリソースを消費します。まず、アプリケーションのインタラクションとUIレンダリングに関する全般的な処理です。そして、メディアのデコード・エンコードの処理です。CPUサイクルは、ルームの参加者に対応する受信ビデオトラックそれぞれのデコードに費やされます。ビデオトラックが多いほど、また解像度が高いほど、多くのCPUリソースが使用されます。ダウンストリームの帯域幅についても同じことが言えます。ビデオトラックが多く、解像度が高いほど、多くの帯域幅が使用されます。

ビデオアプリケーションによるCPUリソースと帯域幅の浪費が発生するのは、解像度の高いビデオをエンコードして、解像度の低いビデオにレンダリングするときです。たとえば、1280x720ピクセルのビデオトラックをクライアントから受信し、176x144ピクセルの領域にレンダリング（表示）する場合、ユーザーのコンピューターでCPUリソースと帯域幅が浪費されます。

ネットワーク帯域幅プロフィールAPIの初期リリースにおいて、開発者側でよく発生したミスは、UI上の実際のビデオレンダリング領域よりもはるかに大きいrenderDimensions値を使用することでした。この気づきに基づき、Twilioはネットワーク帯域幅プロフィールAPIをアップデートし、この問題を解決しました。

ネットワーク帯域幅プロフィールAPIの最新リリースでは、JavaScript、iOS、Androidの各SDKについて2つの最適化機能を導入しました。

  1. 表示されていないビデオトラックは自動的にオフになり、CPUリソースと帯域幅が節約されます。
  2. Twilio Media Serverは、クライアントアプリケーションで実際に使用されるレンダリングサイズに対して、より適合するサイズのビデオトラックをクライアントに配信します。

また、特定のタイミングでビデオトラックをオンに切り替えたり、各ビデオトラックの望ましい解像度を指定することが、手動制御できるようになりました。

開発をはじめる

ネットワーク帯域幅プロフィールAPIの最新バージョンでは、これらの新機能はデフォルトで有効になりますが、必要に応じて明示的に無効にできます。

JavaScript

1つ目の設定はclientTrackSwitchOffControlです。autoに設定すると、ドキュメントの表示状況、トラックへのアタッチ、ビデオ要素の表示状況に基づき、RemoteVideoTrackをオン/オフのどちらにするかが自動的に判断されます。RemoteVideoTrackがオフに切り替わるタイミングは、ドキュメントがもう表示されないときや、トラックにビデオ要素がアタッチされていないとき、またはトラックにアタッチされたビデオ要素が表示されていないときです。manualに設定すると、ビデオトラックを明示的にオン・オフすることができます。その際、RemoteVideoTrack.switchOn()またはRemoteVideoTrack.switchOff()メソッドを使用します。

2つ目の設定はcontentPreferencesModeです。autoに設定するとSDKによりビデオ要素のレイアウトサイズが自動検出され、Media Serverに通知されます。次に、Media Serverは検出されたレイアウトサイズに適合するサイズのビデオストリームを配信します。UIのレイアウト変更に応じてビデオタイルの相対サイズが変化し、各ビデオ要素に関連付けられた帯域幅とCPUリソースの割り当ても調整されます。contentPreferencesModeをmanualに設定すると、各ビデオトラックの望ましい解像度を、setContentPreferences()メソッドを使用してMedia Serverに明示的に通知できます。

const { connect } = require('twilio-video');

const room = await connect(token, {
  name: "my-new-room",
  bandwidthProfile: {
    video: {
      clientTrackSwitchOffControl: 'auto', // default: 'auto'
      contentPreferencesMode: 'auto'  // default: 'auto'
      }
    }
  }
});

Android

Androidでも、新しいネットワーク帯域幅プロフィール設定のclientTrackSwitchOffControlを導入しました。設定できる値はautoまたはmanualです。autoに設定すると、SDKでは、レンダラーアタッチメント、ビューの表示状況、アプリケーションライフサイクルに基づき、トラックをオフにするかどうかが判断されます。manualに設定すると、トラックを明示的にオン・オフにできます。その際、RemoteVideoTrack.switchOn()またはRemoteVideoTrack.switchOff()メソッドを使用します。

その他に、新しいネットワーク帯域幅プロフィールオプションのVideoContentPreferencesModeがあります。autoに設定すると、Twilio Media Serverはビデオビューのサイズに適合するビデオコンテンツをクライアントに配信します。ビデオ品質は、サイズの大きいVideoViewまたはVideoTextureViewによりレンダリングされるRemoteVideoTrackのほうが、サイズの小さいVideoViewまたはVideoTextureViewによりレンダリングされるRemoteVideoTrackの場合よりも向上します。配信されるビデオのサイズを手動でさらに制御したい場合は、manualモードを選択し、RemoteVideoTrack.setContentPreferences()メソッドを使用します。

BandwidthProfileOptions bandwidthProfileOptions = new BandwidthProfileOptions(
        new VideoBandwidthProfileOptions.
                Builder()
                // Use "auto" default. Be sure to remove "maxTracks" and "renderDimensions".
                .build());
ConnectOptions connectOptions = new ConnectOptions.Builder(accessToken)
        .bandwidthProfile(bandwidthProfileOptions)
        .build();

Video.connect(context, connectOptions, roomListener);

iOS

iOS SDKについても同様です。clientTrackSwitchOffControlフィールドとcontentPreferencesModeフィールドがネットワーク帯域幅プロフィールオプションに追加されました。clientTrackSwitchOffControlフィールドをautoに設定すると、SDKでは、レンダラーアタッチメント、ビューの表示状況、アプリケーションライフサイクルに基づき、トラックをオフにするかどうかが判断されます。manualに設定すると、トラックを明示的にオン・オフにできます。その際、RemoteVideoTrack.switchOn()またはRemoteVideoTrack.switchOff()メソッドを使用します。

contentPreferencesModeをautoに設定すると、Twilio Media Serverは、ビデオビューのサイズに適合するビデオコンテンツをクライアントに配信します。ビデオ品質は、サイズの大きいVideoViewによりレンダリングされるRemoteVideoTrackのほうが、サイズの小さいVideoViewによりレンダリングされるRemoteVideoTrackの場合よりも向上します。配信されるビデオのサイズを手動でさらに制御したい場合は、manualモードを選択し、RemoteVideoTrack.setContentPreferences()メソッドを使用します。

let connectOptions = ConnectOptions(token: accessToken) { (builder) in
  builder.bandwidthProfileOptions = BandwidthProfileOptions(
    videoOptions: VideoBandwidthProfileOptions { builder in
      // Use "auto" default. Be sure to remove "maxTracks" and "renderDimensions".
    }
  )
}

let room = TwilioVideoSDK.connect(options: connectOptions, delegate: self)

今回のリリースでは、ネットワーク帯域幅プロフィールの既存フィールドであるMaxTracksとRenderDimensionsは廃止されました。代わりに、clientTrackSwitchOffControlとcontentPreferencesModeを使用してください。

新しいネットワーク帯域幅プロフィールAPI機能を使用すると、複数ユーザーでも円滑に動作する、エンドユーザー用の優れたビデオアプリケーション環境を構築できます。Twilio Videoプラットフォームでは帯域幅とCPUリソースが自動的に最適化され、ビデオと音声の品質は保たれるため、安心してユーザー体験全体の高度化にフォーカスいただけます。

詳細な情報とコードサンプルについては、ドキュメントをご確認ください。ご質問がありましたら遠慮なくお問い合わせください。

コミュニケーションの未来を構築しましょう！

関連投稿

関連リソース

A newspaper article

Twilio Docs

APIからSDK、サンプルアプリまで

言語とプラットフォームの API リファレンス ドキュメント、SDK、ヘルパー ライブラリ、クイックスタート、チュートリアル。
An Open book

リソース・センター

最新の電子ブック、業界レポート、ウェビナー

顧客エンゲージメントの専門家から学び、自社のコミュニケーションを改善しましょう。
User group reactions

Ahoy

Twilio の開発者コミュニティ ハブ

コミュニケーションとデジタル エンゲージメント エクスペリエンスを構築するためのベスト プラクティス、コード サンプル、インスピレーション。