ビデオ フィードをサブスクライブするためのベスト プラクティス

Web アプリを構築する際に考慮すべき重要な要素は、ビデオをページ レイアウトに最適に統合する方法です。 配置とビデオの数は、ページのパフォーマンス、ユーザー品質のエクスペリエンス、全体的な美学に影響を与える可能性があります。 この記事には、開発者が Web ページに配置するビデオの数と、エンド ユーザー エクスペリエンスを最適化するための最適なビデオ解像度サイズを決定するのに役立つガイドラインが含まれています。

ビデオ解像度について

開発者は、ビデオ解像度に関する重要な詳細を知る必要があります。 解像度とは、ビデオ出力に表示されるピクセル数を指し、通常は width x height 形式で測定されます。 解像度が高いほどピクセル数が増え、鮮明で鮮明な画像が得られます。 Azure Communication Services のビデオ通話で利用できる受信ビデオの解像度は次のとおりです。

• 1080p (フル HD): 1920 x 1080 ピクセル
• 720p (HD): 1280 x 720 ピクセル
• 540p (qHD): 960 x 540 ピクセル
• 360p (SD): 640 x 360 ピクセル
• 240p: 426 x 240 ピクセル
• 180p: 320 x 180 ピクセル

ビデオ品質に影響を与える要因

Web ページに効果的に配置できるビデオの数には、いくつかの要因が影響します。 これらの要因には、デバイスの種類、解像度、使用可能な帯域幅、ユーザー エクスペリエンスに関する考慮事項が含まれます。

ローカル デバイスの機能

Web ページの表示に使用されるデバイスの種類は、重要な役割を果たします。 たとえば、画面が大きいデスクトップやノート PC は、モバイル デバイスよりも多くのビデオに対応できます。 レスポンシブ デザイン手法を使用して、画面のサイズに基づいてビデオの数とサイズを調整することをお勧めします。

さらに、ローカル コンピューターでは、これらのビデオを適切に処理、エンコード、および表示する必要があります。 ローカル モニター画面とブラウザー機能のサイズによって、Web ページに同時に表示できるアクティブなビデオの数も決まります。

解像度とビデオ画面サイズ

エンド ユーザー デバイスの表示解像度は、ページごとに表示できるビデオの数に直接影響します。 モニターと画面の解像度が高いほど、より多くのビデオを表示できます。

ページに配置するビデオごとに、ビデオに必要なインターネット帯域幅が多くなります。 さらに、ローカル コンピューターには、ビデオを適切にエンコードして表示するための十分なパフォーマンス機能が必要です。

ビデオの品質とパフォーマンスのバランスを取うことをお勧めします。 画面上のすべてのピクセルをビデオ出力で埋めないでください。これはユーザーを圧倒する可能性があります。 ページにビデオを追加するときは、受信帯域幅と送信帯域幅を検討してください。

インターネット帯域幅に関する考慮事項

エンド ユーザー エクスペリエンスを向上させるには、インターネットの速度がどのように測定され、どのような要因が影響を受けるかを理解する必要があります。 通常、インターネットの速度はメガビット/秒 (Mbps) 単位で測定されます。これは、データがダウンロードまたはアップロードされる速度を示します。 インターネット接続の種類 (ファイバー、ケーブル、無線LAN、携帯ネットワーク)、ネットワーク機器の品質 (モデム、ルーター)、ネットワークに接続されているデバイスの数など、いくつかの要因がこれらの速度に影響する可能性があります。

Web ページに複数のビデオを配置する場合は、ユーザーのネットワーク帯域幅を考慮してください。 解像度の高いビデオでは、ストリーミングに必要なデータが増えます。 ページに配置される全体的なビデオが多いほど、それぞれが消費する帯域幅が多くなります。 帯域幅全体のスループットが低い接続を介してインターネットに接続する場合、より高い解像度のビデオやページ上の複数のビデオをストリーミングする機能は制限されます。 逆に、受信トラフィックと送信トラフィックの両方に対してインターネット帯域幅が高い場合、高解像度のビデオを配信して使用し、ページ上でより多くのビデオを収容する能力が高くなります。

受信ビデオ ストリームの処理方法を最適に最適化する方法

Web UI ライブラリを使用する

Azure Communication Services Web UI ライブラリ は、シームレスで視覚的に魅力的な Web アプリケーションを作成する開発者向けの強力なツールです。 Web UI ライブラリには、統合が容易で高度にカスタマイズ可能な、事前構築済みの UI コンポーネントの包括的なセットが用意されています。 このソリューションを使用すると、開発者は最初から設計するのではなく、機能の構築に集中できます。

Web UI ライブラリを使用すると、さまざまなプロジェクトやプラットフォームで一貫した設計標準が確保され、ユーザー エクスペリエンスが向上し、開発時間が短縮されます。 その広範なドキュメントと活発なコミュニティサポートは、初心者と経験豊富な開発者の両方にとって優れた選択肢となっています。 Web UI ライブラリを適用することで、ワークフローを効率化し、プロフェッショナルな品質のインターフェイスを作成し、魅力的な Web アプリケーションをより効率的に提供できます。 また、Web UI ライブラリを使用すると、一度に最適にサブスクライブできるビデオの数を判断する推測が削除されます。

最適なビデオカウント API を使用する

Azure Communication Services WebJS SDK では、グループ呼び出し中にさまざまな参加者からの受信ビデオを最適にレンダリングできる数をアプリケーションに通知する 最適なビデオ数 (OVC) が導入されました。 optimalVideoCount プロパティは、ネットワーク帯域幅とハードウェア機能に基づいて動的に調整されます。 最適なビデオ数は、Web ページに表示できるビデオの理想的な数を定義する整数を返します。 アプリケーションでは、OVC からの出力に従ってレンダリングされるビデオの数を更新する必要があります。 開発者は、アプリケーションがグループ呼び出しの Optimal Video Count の変更をサブスクライブし、OVC 数に基づいて Web ページに動的にレンダリングされるビデオの数を調整する必要があります。 最適なビデオ数 (OVC) からの値は、10 秒ごとに更新されます。

Call オブジェクトのフィーチャー メソッドを使用して、機能 OptimalVideoCount を参照する必要があります。 その後、OptimalVideoCountCallFeatureが変更されたときに通知を受け取るoptimalVideoCountの on メソッドを使用してリスナーを設定できます。 変更のサブスクライブを解除するには、off メソッドを呼び出します。 Web ページにレンダリングできる受信ビデオの現在の最大数は 16 です。 16 個の受信ビデオを適切にサポートするには、コンピューターには 16 GB 以上のRAM と、3年以内の4コア以上のCPUが必要です。

const optimalVideoCountFeature = call.feature(Features.OptimalVideoCount);
optimalVideoCountFeature.on('optimalVideoCountChanged', () =\> {
    const localOptimalVideoCountVariable = optimalVideoCountFeature.optimalVideoCount;
})

最適なビデオ数の値に変化が生じた場合、その結果、ローカル コンピューターで受信ビデオの容量が増えたと示されている場合は、 createView メソッドを使用して新しい受信ビデオを作成し、ページに表示する受信ビデオ ストリームを増やすことができます。

逆に、最適な数が減少し、 ページ上のビデオの現在の数より少ない場合は、dispose メソッドを使用してビデオを破棄し、それに応じてアプリケーション レイアウトを更新することを検討してください。

1080p または 720p のビデオをページに追加する場合に考慮すべき事項。

• 1080p の受信ビデオを 1 つ配置し、残りは 720p 未満にすることができます。
• 720pの受信ビデオを2つ配置でき、残りは720p未満にすることができます。

WebJS 呼び出し SDK では、1080p ビデオ ストリーミングがサポートされています。 Web デスクトップ ブラウザーから 1080p を送信するには、 GA または パブリック プレビュー Caling SDK のバージョン 134.1 以降を使用する必要があります。

たとえば、7 人の参加者がビデオ カメラをオンにしているグループ通話では、各クライアント ページで 2 人の参加者のビデオを選択して、より高い解像度で表示できます。 これら 2 人の参加者は、Web ページ上のビューを高さ 720 ピクセル、幅 1280 ピクセル (またはそれ以上) に設定することで、720p でビデオを表示するように設定します。 残りの 5 つの参加者ビデオは、360p 以下などの低解像度に設定する必要があります。

• レンダリングされるビデオの合計数が OVC Optimal Video Count (OVC) 値を超えないようにしてください。

• 各クライアントは、特定のユーザーからビデオ フィードを選択し、個々のデバイスの解像度サイズを調整できます。

• 参加者ごとに特定のビデオ解像度を送信する機能は異なる場合があります。 一部のコンピューターには高品質のカメラが搭載されており、1080p ビデオを送信できます。 逆に、一部のモバイル ブラウザーでは、わずか 540p など、ビデオ送信機能が低くなります。 ビデオ解像度を 1080p または 720p に埋め込んだ場合、受信ビデオがその解像度と一致しない可能性があります。 この場合、システムはビデオ ストリームをアップスケールして、ビデオ レンダラーのサイズを埋めます。

• 現在、Web ページには最大 2 つの 720p ビデオ ストリームをレンダリングできます。 720p ストリームが 2 つ以上有効になっている場合、720p のビデオ表示はすべて 540p でストリーミングされます。

• サブスクライブできる受信リモート ストリームの最大数は、16 のビデオ ストリームに加えて、デスクトップ ブラウザーでの 1 つの画面共有、および 4 つのビデオ ストリームと Web モバイル ブラウザーでの 1 つの画面共有です。

• Azure Communication Services のビデオ Simulcast 機能は、エンド クライアントが複数の解像度とビットレートで同時に配信する 1 つのビデオを有効にすることで、ビデオ ストリーミングを強化します。

  この機能を使用すると、さまざまなネットワーク条件を持つ視聴者は、バッファリングや中断なしに、可能な限り最高のビデオ品質を受け取るために選択するビデオ表示を選択できます。 帯域幅の使用を最適化することで、simulcast は、より高い解像度のストリームをサポートできるユーザーにのみ送信します。 この動作により、不要なデータ転送が最小限に抑えられます。 Simulcast は、安定した一貫性のあるビデオ品質を提供することで全体的なユーザー エクスペリエンスを向上させ、アダプティブ ストリーミングを可能にします。

  Simulcast は、すべてのブラウザー、特にモバイル ブラウザーと macOS Safari でサポートされているわけではありません。 iOS Safari、Android Chrome、または macOS Safari を使用している参加者が 720p ビデオをレンダリングし、別の参加者が同じビデオを低解像度でレンダリングしようとすると、両方とも解像度が低くなります。 これは、これらのデバイスが、simulcast 送信がサポートされていない場合に、より小さな解像度を優先するためです。

1080p ストリームを送信するように構成する方法

WebJS SDK を使用して 1080p の解像度でビデオを送信する場合は、 Video Constraints API を 使用し、1080p を使用するように指定する必要があります。 ビデオ制約 API が使用されておらず、1080p が指定されていない場合、既定のビデオ ストリーム解像度は 720p です。

    const callOptions = {
        videoOptions: {
            localVideoStreams: [...],
            constraints: {
                send: {
                    height: {
                        max: 1080
                    }
                }
            }
        },
        audioOptions: {
            muted: false
        }
    };
    // make a call
    this.callAgent.startCall(identitiesToCall, callOptions);

1080p ビデオ ストリームを送信するときに注意する項目

• 使用中のカメラは、1080p ビデオを送信できる必要があります。 カメラでサポートされている解像度を確認するには、次の JavaScript の例を使用して、使用可能な解像度を確認できます。

async function getSupportedResolutions() {
  const constraints = {
    video: {
      width: { ideal: 4096 }, // Try to get the maximum width
      height: { ideal: 2160 } // Try to get the maximum height
    }
  };
 
  try {
    const stream = await navigator.mediaDevices.getUserMedia(constraints);
    const videoTrack = stream.getVideoTracks()[0];
    const settings = videoTrack.getSettings();
    
    console.log(`Supported resolution: ${settings.width}x${settings.height}`);
    
    // Stop the video track to release the camera
    videoTrack.stop();
  } catch (error) {
    console.error('Error accessing media devices.', error);
  }
}
 
getSupportedResolutions();

• 1080p を送信するマシンには、1080p の送信をサポートするのに十分な強力なマシンが必要です。
• 受信側のクライアント (1080p ビデオを受け入れるユーザー) は、1080p を受け入れるために 1080p のビデオ レンダリング HTML5 要素を持っている必要があります。 通話の参加者がビデオを受信するために 1080p 要素を有効にしていない場合、通話はより小さな解像度に調整され、ネゴシエートされます。
• 1080p ビデオ ストリームを送受信する通話のすべてのユーザーは、1080p ストリームをサポートするための帯域幅を持っている必要があります。

解決策	最小フレームレート	最大フレームレート	最大ビットレート
1080p	30	30	4 M
720p	30	30	2.5 M
540p	30	30	2メガ
360p	30	30	1メートル
240p	15	15	650 K
180p	7.5	15	250 K(15 FPS の場合は 350 K)

WebJS SDK 内のメディア品質統計 API を使用して、リアルタイムのビデオ送受信の解像度を決定できます。 詳細については、こちらを参照してください。

結論

Web ページに配置するビデオの数を決定するには、解像度、デバイスの種類、帯域幅、ユーザー エクスペリエンスを慎重に検討する必要があります。 これらのガイドラインとベスト プラクティスに従って、魅力的に見えるだけでなくシームレスに機能する Web アプリを作成し、さまざまなデバイスや接続速度にわたってユーザーに最適な表示エクスペリエンスを提供します。