IVS Web Player SDK の開始方法 - Amazon IVS
デモスクリプトタグを使ってセットアップするサンプルコードNPM でセットアップするTypeScriptサービスワーカーの設定オーディオのみの再生

IVS Web Player SDK の開始方法

このドキュメントでは、Amazon IVS Player SDK を開始する手順について説明します。

当社は、script タグ、ならびに npm モジュールを介してサポートを提供しています。

デモ

次のライブデモでは、この Web プレイヤーを、Content Delivery Network の scriptタグを用いて使用する方法を紹介しています。Amazon IVS Player Sample デモには、イベントリスナーの設定が含まれます。

その他の Web プレイヤーデモの選択については、https://github.com/aws-samples/amazon-ivs-player-web-sample も参照してください。

スクリプトタグを使ってセットアップする

script タグを使用して Amazon IVS プレイヤーを設定する

  1. 次のタグを含めます (最新バージョンのプレイヤーの場合)。

    <script src="https://player.live-video.net/1.35.0/amazon-ivs-player.min.js"></script>

  2. amazon-ivs-player.min.js がロードされると、IVSPlayer 変数がグローバルコンテキストに追加されます。これは、プレイヤーインスタンスの作成に使用するライブラリです。まず、isPlayerSupported をチェックして、ブラウザが IVS プレイヤーをサポートしているか確認します。

    if (IVSPlayer.isPlayerSupported) { ... }

    次に、プレイヤーインスタンスを作成するために、IVSPlayer オブジェクトで create 関数を呼び出します。

    const player = IVSPlayer.create();

    Amazon IVS Web Player SDK では、ウェブワーカーを使用して動画の再生を最適化します。

  3. プレイヤーインスタンスで load および play 関数を使用してストリームをロードし、再生します。

    player.load("PLAYBACK_URL");
player.play();

    この場合、PLAYBACK_URL は、ストリームキーがリクエストされたときに Amazon IVS API から返される URL です。

サンプルコード

この例では、PLAYBACK_URL をロードしたいソースストリームの URL に置き換えてください。この例では、Amazon IVS プレイヤーの最新バージョンを使用しています。

<script src="https://player.live-video.net/1.35.0/amazon-ivs-player.min.js"></script>
<video id="video-player" playsinline></video>
<script>
  if (IVSPlayer.isPlayerSupported) {
    const player = IVSPlayer.create();
    player.attachHTMLVideoElement(document.getElementById('video-player'));
    player.load("PLAYBACK_URL");
    player.play();
  }
</script>

<video> タグでは、iOS Safari でのインライン再生に playsinline が必要です。次を参照してください。https://webkit.org/blog/6784/new-video-policies-for-ios/

NPM でセットアップする

ガイダンスについては、Webpack 構成ファイルの例を含め、次のリポジトリを参照してください。https://github.com/aws-samples/amazon-ivs-player-web-sample

注: 独自のドメインのプレーヤーの静的アセットをホストする場合、WebAssembly バイナリ (amazon-ivs-wasmworker.min.wasm）の「Content-Type」レスポンスヘッダーを「application/wasm」に設定する必要があります。また、アセットを gzip して、ワイヤ経由でダウンロードされるバイト数を減らし、プレーヤーの再生開始時間を短縮する必要があります。

TypeScript

TypeScript を使用している場合、npm パッケージにはインポートして使用できるタイプが含まれます。これらのタイプに関する詳細については、「Amazon IVS Player SDK: Web Reference」を参照してください。

サービスワーカーの設定

ネイティブの再生機能のみをサポートするブラウザ (主として iOS Safari) で再生する場合は、サービスワーカーをセットアップして構成することで、レイテンシーをさらに低くすることができます。詳細については、「サードパーティ製プレーヤーのレイテンシーの削減」を参照してください。

サービスワーカーを使用するために Amazon IVS プレイヤーをセットアップするには

  1. CDN からの IVS サービスワーカーの読み込先となるファイルを作成します。サービスワーカーと、それを取得するページは、同じドメインでホストされている必要があるため、このファイルが必要です。

    amazon-ivs-service-worker-loader.js または類似の名前でファイルを作成し、次の行を追加します。

    importScripts('https://player.live-video.net/1.35.0/amazon-ivs-service-worker.min.js');

  2. プレイヤーインスタンスを作成するときに、次の amazon-ivs-service-worker-loader.js ファイルを参照する serviceWorker 設定を渡します。

    const player = IVSPlayerPackage.create({
   serviceWorker: {
      url: 'amazon-ivs-service-worker-loader.js'
   }
});

  3. video 要素で、crossOrigin 属性に anonymous を設定します。これは、サービスワーカーがマニフェストを変更できるようにするために必要です。

注: サービスワーカーをローカルでテストするには、ページを localhost または https から提供する必要があります。

ライブデモについては、以下のリポジトリにあるサービスワーカーの例を参照してください。

https://github.com/aws-samples/amazon-ivs-player-web-sample

オーディオのみの再生

音声のみの品質は、 setQuality() メソッドを使用して手動で選択する必要があります。プレイヤーは 2 番目の引数 adaptive に対して true 値をサポートしていないため、デフォルトでは、この引数は false になることに注意してください。

再生を開始する前に音声のみの品質を設定するには、READY イベント内で setQuality() を呼び出します。

player.addEventListener(PlayerState.READY, () => {
   const qualities = player.getQualities();
   const audioOnly = qualities.find(q => q.name === 'audio_only');
   if (audioOnly) {
      player.setQuality(audioOnly);
   }
});

READY 内の品質の設定は、自動再生モードと非自動再生モードの両方で機能します。