IVS Web Broadcast SDK の開始方法 | Real-Time Streaming

このドキュメントでは、IVS Real-Time Streaming Web Broadcast SDK の使用を開始するためのステップについて説明します。

インポート

リアルタイムのビルディングブロックは、ルートブロードキャストモジュールとは別の名前空間に配置されています。

スクリプトタグを使用する

同じスクリプトインポートを使用すると、以下の例で定義されているクラスと列挙型がグローバル IVSBroadcastClient オブジェクトにあります。

const { Stage, SubscribeType } = IVSBroadcastClient;

npmを使う

クラス、列挙型、型はパッケージモジュールからインポートすることもできます。

import { Stage, SubscribeType, LocalStageStream } from 'amazon-ivs-web-broadcast'

サーバーサイドレンダリングのサポート

Web Broadcast SDK ステージライブラリは、ロード時にライブラリの機能に必要なブラウザプリミティブを参照するため、サーバー側のコンテキストにロードできません。これを回避するには、「Next と React を使用した Web Broadcast デモ」で示されているように、ライブラリを動的にロードします。

必要なアクセス許可

アプリケーションは、ユーザーのカメラとマイクへのアクセス許可をリクエストする必要があります。また、HTTPS で提供される必要があります。(これは Amazon IVS に特有ではなく、カメラやマイクにアクセスが必要なすべてのウェブサイトに必要です。)

オーディオおよびビデオデバイス両方のアクセス許可をリクエストし、キャプチャする方法を示す関数の例を次に示します。

async function handlePermissions() {
   let permissions = {
       audio: false,
       video: false,
   };
   try {
       const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
       for (const track of stream.getTracks()) {
           track.stop();
       }
       permissions = { video: true, audio: true };
   } catch (err) {
       permissions = { video: false, audio: false };
       console.error(err.message);
   }
   // If we still don't have permissions after requesting them display the error message
   if (!permissions.video) {
       console.error('Failed to get video permissions.');
   } else if (!permissions.audio) {
       console.error('Failed to get audio permissions.');
   }
}

詳細については、「Permissions API」(アクセス許可 API) および「MediaDevices.getUserMedia()」を参照してください。

利用可能なデバイスのリストを表示する

キャプチャ可能なデバイスを確認するには、ブラウザの MediaDevices.enumerateDevices() メソッドにクエリを実行します。

const devices = await navigator.mediaDevices.enumerateDevices();
window.videoDevices = devices.filter((d) => d.kind === 'videoinput');
window.audioDevices = devices.filter((d) => d.kind === 'audioinput');

デバイスから MediaStream を取得する

使用可能なデバイスのリストを獲得すると、任意の数のデバイスからストリームを取得できます。例えば、カメラからストリームを取得する getUserMedia() メソッドを利用できます。

ストリームをキャプチャするデバイスを指定する場合は、メディア制約の audio または video セクションで deviceId を明示的に設定できます。または、deviceId を省略して、ブラウザのプロンプトからユーザーにデバイスを選択させることもできます。

width および height の制約を使用して、理想的なカメラの解像度を指定することもできます。(これらの制約について詳しくは、こちらをご覧ください。) SDK では、ブロードキャストの最大解像度に対応する幅および高さの制約が自動的に適用されます。しかし、ソースを SDK に追加した後ソースのアスペクト比が変更されないよう、これらもお客様ご自身で適用することをお勧めします。

リアルタイムストリーミングでは、メディアが 720p 解像度に制限されていることを確認します。具体的には、幅と高さの getUserMedia と getDisplayMedia の制約値は、乗算時に 921600 (1280 x 720) を超えることはできません。

const videoConfiguration = {
  maxWidth: 1280,
  maxHeight: 720,
  maxFramerate: 30,
}

window.cameraStream = await navigator.mediaDevices.getUserMedia({
   video: {
       deviceId: window.videoDevices[0].deviceId,
       width: {
           ideal: videoConfiguration.maxWidth,
       },
       height: {
           ideal:videoConfiguration.maxHeight,
       },
   },
});
window.microphoneStream = await navigator.mediaDevices.getUserMedia({
   audio: { deviceId: window.audioDevices[0].deviceId },
});