# IVS Web Player SDK の開始方法
<a name="web-getting-started"></a>

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

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

## デモ
<a name="web-demo"></a>

次のライブデモでは、この Web プレイヤーを、Content Delivery Network の `script`タグを用いて使用する方法を紹介しています。[Amazon IVS Player Sample](https://codepen.io/amazon-ivs/pen/QWbzORP/c3b13a2df34b60ada7756f3a2af8d2f0) デモには、イベントリスナーの設定が含まれます。

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

## スクリプトタグを使ってセットアップする
<a name="web-setup-script-tag"></a>

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

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

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

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

   ```
   if (IVSPlayer.isPlayerSupported) { ... }
   ```

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

   ```
   const player = IVSPlayer.create();
   ```

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

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

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

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

## サンプルコード
<a name="web-sample-code"></a>

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

```
<script src="https://player.live-video.net/1.50.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/](https://webkit.org/blog/6784/new-video-policies-for-ios/)

## NPM でセットアップする
<a name="web-setup-npm"></a>

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

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

## TypeScript
<a name="web-typescript"></a>

TypeScript を使用している場合、npm パッケージにはインポートして使用できるタイプが含まれます。これらのタイプに関する詳細については、「[Amazon IVS Player SDK: Web Reference](https://aws.github.io/amazon-ivs-player-docs/1.50.0/web/)」を参照してください。

## サービスワーカーの設定
<a name="web-service-worker"></a>

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

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

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

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

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

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

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

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

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

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

[https://github.com/aws-samples/amazon-ivs-player-web-sample](https://github.com/aws-samples/amazon-ivs-player-web-sample)

## オーディオのみの再生
<a name="web-audio-only-playback"></a>

音声のみの品質は、 `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` 内の品質の設定は、自動再生モードと非自動再生モードの両方で機能します。

## バックグラウンド再生の最適化
<a name="web-optimize-background-playback"></a>

SDK バージョン 1.45.0 より、バックグラウンドタブで再生中にデータ使用量を最適化するようにクライアントを設定できます。この機能を有効にすると、指定された期間後にプレイヤーが利用可能な最高の SD ビデオ品質 (最大 480p) を選択します。プレイヤーは常に video を選択し、audio\$1only は選択されません。これは、手動モードと自動モードの両方に当てはまります。タブがフォアグラウンド化されると、プレイヤーは自動的に以前の設定に戻ります。

この機能を有効にするには:

```
const player = IVSPlayer.create({
   optimizeBackgroundPlayback: {
      enabled: true,
      switchDelayMs: 60 * 1000,   // Optional, defaults to 60s
   }
});
```