翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。 # HLS による動画再生 [HTTP Live Streaming (HLS)](https://en.wikipedia.org/wiki/HTTP_Live_Streaming) は、業界標準の HTTP ベースのメディアストリーミング通信プロトコルです。HLS を使用して、ライブ再生またはアーカイブされたビデオを表示するために、Kinesis ビデオストリームを表示できます。 HLS はライブ再生に使用できます。レイテンシーは通常 3～5 秒ですが、ユースケース、プレイヤー、ネットワーク条件に応じて 1～10 秒です。サードパーティー製のプレーヤー ([Video.js](https://github.com/videojs/video.js/) や [Google Shaka Player](https://github.com/google/shaka-player) など) を使用してビデオストリームを表示するには、HLS ストリーミングセッション URL をプログラムまたは手動で指定できます。また、[Apple Safari ](https://www.apple.com/safari/)または [Microsoft Edge](https://www.microsoft.com/en-us/edge) ブラウザの Location バーに HLS ストリーミングセッション URL を入力して、ビデオを再生することもできます。 HLS を使用して Kinesis ビデオストリームを表示するには、まず [GetHLSStreamingSessionURL](https://docs.aws.amazon.com/kinesisvideostreams/latest/dg/API_reader_GetHLSStreamingSessionURL.html) を使用してストリーミングセッションを作成します。このアクションにより、HLS セッションにアクセスするための URL (セッショントークンを含む) が返されます。次に、この URL をメディアプレーヤーまたはスタンドアロンアプリケーションで使用してストリームを表示できます。 **重要** Kinesis Video Streams に送信されたすべてのメディアを HLS 経由で再生できるわけではありません。特定のアップロード要件[GetHLSStreamingSessionURL](API_reader_GetHLSStreamingSessionURL.md)については、「」を参照してください。 **Topics** + [を使用して HLS ストリーミングセッション URL AWS CLI を取得する](#retrieve-hls-url) + [例: HTML および JavaScript で HLS を使用する](#how-hls-ex1) + [HLS の問題のトラブルシューティング](#how-hls-ex1-ts) ## を使用して HLS ストリーミングセッション URL AWS CLI を取得する 次の手順では、 を使用して Kinesis ビデオストリームの HLS ストリーミングセッション URL AWS CLI を生成する方法を示します。 インストール手順については、[AWS Command Line Interface 「 ユーザーガイド](https://docs.aws.amazon.com//cli/latest/userguide/getting-started-install.html#getting-started-install-instructions)」を参照してください。インストール後、認証情報とリージョンを使用して [を設定します AWS CLI](https://docs.aws.amazon.com//cli/latest/userguide/getting-started-quickstart.html#getting-started-quickstart-new)。 または、 AWS CLI がインストールされ、設定されている AWS CloudShell ターミナルを開きます。詳細については、『[AWS CloudShell ユーザーガイド](https://docs.aws.amazon.com//cloudshell/latest/userguide/welcome.html#how-to-get-started)』を参照してください。 **Kinesis ビデオストリームの HLS URL エンドポイントを取得します。** 1. ターミナルに次のように入力します。 ``` aws kinesisvideo get-data-endpoint \ --api-name GET_HLS_STREAMING_SESSION_URL \ --stream-name {{YourStreamName}} ``` 次のようなレスポンスが表示されます。 ``` { "DataEndpoint": "https://b-{{1234abcd}}.kinesisvideo.{{aws-region}}.amazonaws.com" } ``` 1. 返されたエンドポイントに HLS ストリーミングセッション URL リクエストを行います。 ------ #### [ Live ] ライブ再生の場合、HLS メディアプレイリストは、最新のメディアが利用可能になると継続的に更新されます。このタイプのセッションをメディアプレーヤーで再生する場合、ユーザーインターフェイスには通常**「ライブ**」通知が表示され、表示する再生ウィンドウの位置を選択するためのスクラバーコントロールはありません。 このコマンドを実行するときは、このストリームにメディアをアップロードしていることを確認してください。 ``` aws kinesis-video-archived-media get-hls-streaming-session-url \ --endpoint-url https://b-{{1234abcd}}.kinesisvideo.{{aws-region}}.amazonaws.com \ --stream-name {{YourStreamName}} \ --playback-mode LIVE ``` ------ #### [ Live replay ] ライブ再生の場合、再生は指定された開始時刻から開始されます。HLS メディアプレイリストは、最新のメディアが利用可能になると継続的に更新されます。セッションには、セッションの有効期限が切れるまで、または指定された終了時刻のいずれか早い方まで、新しく取り込まれたメディアが引き続き含まれます。このモードは、イベントの検出で再生を開始し、セッションの作成時点でまだ取り込まれていないライブストリーミングメディアを継続できるようにする場合に便利です。 開始タイムスタンプを決定します。 この例では、**Unix エポック時間を秒**形式で使用します。[タイムスタンプのフォーマットの詳細については、](https://docs.aws.amazon.com//cli/latest/userguide/cli-usage-parameters-types.html#parameter-type-timestamp) AWS Command Line Interface 「 ユーザーガイド」の「タイムスタンプ」セクションを参照してください。 変換ツールについては、「[UnixTime.org](https://unixtime.org/)」を参照してください。 + **1708471800** は **2024 年 2 月 20 日午後 3:30:00 GMT-08:00 **に相当します この例では、終了タイムスタンプを指定しません。つまり、セッションの有効期限が切れるまで、セッションには新しく取り込まれたメディアが引き続き含まれます。 `LIVE_REPLAY` 再生モードと [HLS フラグメントセレクタ](https://docs.aws.amazon.com//kinesisvideostreams/latest/dg/API_reader_GetHLSStreamingSessionURL.html#KinesisVideo-reader_GetHLSStreamingSessionURL-request-HLSFragmentSelector)を指定して `GetHLSStreamingSessionURL` API を呼び出します。 ``` aws kinesis-video-archived-media get-hls-streaming-session-url \ --endpoint-url https://b-{{1234abcd}}.kinesisvideo.{{aws-region}}.amazonaws.com \ --stream-name {{YourStreamName}} \ --playback-mode LIVE_REPLAY \ --hls-fragment-selector \ "FragmentSelectorType=SERVER_TIMESTAMP,TimestampRange={StartTimestamp={{1708471800}}}" ``` ------ #### [ On-demand ] オンデマンド再生の場合、HLS メディアプレイリストには、HLS フラグメントセレクタで指定されたメディアが含まれます。このタイプのセッションがメディアプレーヤーで再生される場合、ユーザーインターフェイスには、通常再生ウィンドウ内の位置を選択するためのスクラバーコントロールが表示されます。 ストリームの特定のセクションの URL を作成するには、まず開始タイムスタンプと終了タイムスタンプを決定します。 この例では、**Unix エポック時間を秒**形式で使用します。[タイムスタンプの形式の詳細については、](https://docs.aws.amazon.com//cli/latest/userguide/cli-usage-parameters-types.html#parameter-type-timestamp) AWS Command Line Interface 「 ユーザーガイド」の「タイムスタンプ」セクションを参照してください。 変換ツールについては、「[UnixTime.org](https://unixtime.org/)」を参照してください。 + **1708471800** は **2024 年 2 月 20 日午後 3:30:00 GMT-08:00 **に相当します + **1708471860** は **2024 年 2 月 20 日午後 3:31:00 GMT-08:00 **に相当します `ON_DEMAND` 再生モードと [HLS フラグメントセレクタ](https://docs.aws.amazon.com//kinesisvideostreams/latest/dg/API_reader_GetHLSStreamingSessionURL.html#KinesisVideo-reader_GetHLSStreamingSessionURL-request-HLSFragmentSelector)を指定して `GetHLSStreamingSessionURL` API を呼び出します。 ``` aws kinesis-video-archived-media get-hls-streaming-session-url \ --endpoint-url https://b-{{1234abcd}}.kinesisvideo.{{aws-region}}.amazonaws.com \ --stream-name {{YourStreamName}} \ --playback-mode ON_DEMAND \ --hls-fragment-selector \ "FragmentSelectorType=SERVER_TIMESTAMP,TimestampRange={StartTimestamp={{1708471800}},EndTimestamp={{1708471860}}}" ``` **注記** タイムスタンプは、[HLSTimestampRange](API_reader_HLSTimestampRange.md)ドキュメントに記載されているように、相互に 24 時間以内である必要があります。 ------ 次のようなレスポンスが表示されます。 ``` { "HLSStreamingSessionURL": "https://b-{{1234abcd}}.kinesisvideo.{{aws-region}}.amazonaws.com/hls/v1/getHLSMasterPlaylist.m3u8?SessionToken={{CiAz...DkRE6M}}~" } ``` **重要** 許可されていないエンティティがアクセスできる場所に、このトークンを共有したり保存したりしないでください。トークンがストリームのコンテンツへのアクセスを提供します。 AWS 認証情報で使用するのと同じ方法でトークンを保護します。 この URL と任意の HLS プレイヤーを使用して、HLS ストリームを表示できます。 たとえば、VLC メディアプレーヤーを使用します。 また、Apple Safari または Microsoft Edge ブラウザの Location バーに HLS ストリーミングセッション URL を入力して、HLS ストリームを再生することもできます。 ## 例: HTML および JavaScript で HLS を使用する 次の例は、 AWS SDK for JavaScript v2 を使用して Kinesis ビデオストリームの HLS ストリーミングセッションを取得し、ウェブページで再生する方法を示しています。この例では、動画の再生に以下のプレーヤーを使用します。 + [Video.js](https://github.com/videojs/video.js/) + [Google Shaka Player](https://github.com/google/shaka-player) + [hls.js](https://github.com/video-dev/hls.js/) GitHub で[完全なサンプルコード](https://github.com/aws-samples/amazon-kinesis-video-streams-media-viewer)と[ホストされたウェブページ](https://aws-samples.github.io/amazon-kinesis-video-streams-media-viewer/)を表示します。この静的ウェブページは、Amazon Kinesis ビデオストリームからの HLS および MPEG-DASH 出力のテストと実験を簡素化します。サンプルページには、次のパラメータの入力フィールドが表示されます。 + AWS リージョン: Kinesis ビデオストリームがあるリージョン + ストリーム名: Kinesis ビデオストリームの名前 + 再生モード: HLS 再生モード (LIVE、LIVE\_REPLAY、または ON\_DEMAND) + フラグメントセレクタタイプ: フラグメントの選択に使用されるメソッド (SERVER\_TIMESTAMP または PRODUCER\_TIMESTAMP) + フラグメント番号: 開始フラグメント番号 (該当する場合) + コンテナ形式: メディアコンテナの形式 (FRAGMENTED\_MP4 または MPEG\_TS) アプリケーションは、HTML ページの入力ボックスからこれらの値を取得し、それを使用して、ページに表示される HLS ストリーミングセッションのリクエストを構築します。 **Topics** + [ブラウザ用の AWS SDK for JavaScript をインポートする](#how-hls-ex1-import) + [Kinesis Video Streams クライアントのセットアップ](#how-hls-ex1-setup) + [HLS 再生用のエンドポイントを取得する](#how-hls-ex1-endpoint) + [Kinesis Video Streams アーカイブメディアクライアントを設定する](#how-hls-ex1-session) + [HLS ストリーミングセッション URL を取得する](#how-hls-ex1-retrieve-url) + [ウェブページに HLS ストリームを表示する](#how-hls-ex1-display) ### ブラウザ用の AWS SDK for JavaScript をインポートする ウェブページに次のスクリプトタグを含めて、 AWS SDK for JavaScript v2 をプロジェクトにインポートします。 ``` ``` 詳細については、[AWS SDK for JavaScript ](https://docs.aws.amazon.com//sdk-for-javascript/v2/developer-guide/loading-the-jssdk.html)のドキュメントを参照してください。 ### Kinesis Video Streams クライアントのセットアップ HLS でストリーミングビデオにアクセスするには、まず Kinesis Video Streams クライアントを作成して設定します。その他の認証方法については[、「ウェブブラウザでの認証情報の設定](https://docs.aws.amazon.com//sdk-for-javascript/v2/developer-guide/setting-credentials-browser.html)」を参照してください。 ``` const clientConfig = { accessKeyId: '{{YourAccessKey}}', secretAccessKey: '{{YourSecretKey}}', region: '{{us-west-2}}' }; const kinesisVideoClient = new AWS.KinesisVideo(clientConfig); ``` アプリケーションは、HTML ページの入力ボックスから必要な値を取得します。 ### HLS 再生用のエンドポイントを取得する Kinesis Video Streams クライアントを使用して [GetDataEndpoint](API_GetDataEndpoint.md) API を呼び出し、エンドポイントを取得します。 ``` const getDataEndpointOptions = { StreamName: '{{YourStreamName}}', APIName: 'GET_HLS_STREAMING_SESSION_URL' }; const getDataEndpointResponse = await kinesisVideoClient .getDataEndpoint(getDataEndpointOptions) .promise(); const hlsDataEndpoint = getDataEndpointResponse.DataEndpoint; ``` このコードは、エンドポイントを `hlsDataEndpoint`変数に保存します。 ### Kinesis Video Streams アーカイブメディアクライアントを設定する Kinesis Video Streams アーカイブメディアクライアントのクライアント設定で、前のステップで取得したエンドポイントを指定します。 ``` const archivedMediaClientConfig = { accessKeyId: '{{YourAccessKey'}}, secretAccessKey: '{{YourSecretKey'}}, region: '{{us-west-2}}', endpoint: hlsDataEndpoint }; const kinesisVideoArchivedMediaClient = new AWS.KinesisVideoArchivedMedia(archivedMediaClientConfig); ``` ### HLS ストリーミングセッション URL を取得する Kinesis Video Streams アーカイブメディアクライアントを使用して [GetHLSStreamingSessionURL](API_reader_GetHLSStreamingSessionURL.md) API を呼び出し、HLS 再生 URL を取得します。 ``` const getHLSStreamingSessionURLOptions = { StreamName: '{{YourStreamName}}', PlaybackMode: 'LIVE' }; const getHLSStreamingSessionURLResponse = await kinesisVideoArchivedMediaClient .getHLSStreamingSessionURL(getHLSStreamingSessionURLOptions) .promise(); const hlsUrl = getHLSStreamingSessionURLResponse.HLSStreamingSessionURL; ``` ### ウェブページに HLS ストリームを表示する HLS ストリーミングセッション URL がある場合、それをビデオプレーヤーに指定します。URL をビデオプレーヤーに指定する方法は、使用するプレーヤーごとに異なります。 ------ #### [ Video.js ] [Video.js](https://github.com/videojs/video.js/) とその CSS クラスをブラウザスクリプトにインポートするには、次の手順を実行します。 ``` ``` 動画を表示する `video` HTML 要素を作成します。 ``` ``` HLS URL を HTML 動画要素ソースとして設定します。 ``` const playerElement = document.getElementById('videojs'); const player = videojs(playerElement); player.src({ src: {{hlsUrl}}, type: 'application/x-mpegURL' }); player.play(); ``` ------ #### [ Shaka ] [Google Shaka プレイヤー](https://github.com/shaka-project/shaka-player)をブラウザスクリプトにインポートするには、次の手順を実行します。 ``` ``` 動画を表示する `video` HTML 要素を作成します。 ``` ``` 動画要素を指定して Shaka プレイヤーを作成し、ロードメソッドを呼び出します。 ``` const playerElement = document.getElementById('shaka'); const player = new shaka.Player(playerElement); player.load({{hlsUrl}}); ``` ------ #### [ hls.js ] ブラウザスクリプトに [hls.js](https://github.com/video-dev/hls.js/) をインポートするには、次の手順を実行します。 ``` ``` 動画を表示する `video` HTML 要素を作成します。 ``` ``` hls.js プレイヤーを作成し、HLS URL を渡して、再生するように指示します。 ``` const playerElement = document.getElementById('hlsjs'); const player = new Hls(); player.loadSource({{hlsUrl}}); player.attachMedia(playerElement); player.on(Hls.Events.MANIFEST_PARSED, function() { video.play(); }); ``` ------ ## HLS の問題のトラブルシューティング このセクションでは、Kinesis Video Streams で (HLS) HTTP Live Streaming を使用するときに発生する可能性がある問題について説明します。 **Topics** + [HLS ストリーミングセッション URL の取得は成功するが、ビデオプレーヤーで再生が失敗する](#troubleshooting-hls-playback) + [プロデューサーとプレーヤー間のレイテンシーが高すぎる](#troubleshooting-hls-latency) ### HLS ストリーミングセッション URL の取得は成功するが、ビデオプレーヤーで再生が失敗する この状況が発生するのは、HLS ストリーミングセッション URL は `GetHLSStreamingSessionURL` を使用して正常に取得できるが、この URL をビデオプレーヤーに指定したときに動画が再生されない場合です。 この状況のトラブルシューティングを行うには、以下を試します。 + Kinesis Video Streams コンソールでビデオストリームが再生されるかどうかを確認します。コンソールに表示されたエラーを検討します。 + フラグメント継続時間が 1 秒未満の場合は、1 秒に増やします。フラグメントの再生時間が短すぎると、ビデオフラグメントのリクエストが多すぎるため、サービスはプレイヤーをスロットリングする可能性があります。 + 各 HLS ストリーミングセッション URL を 1 つのプレーヤーでのみ使用していることを確認します。1 つの HLS ストリーミングセッション URL を複数のプレーヤーで使用している場合、サービスが受け取るリクエストが多すぎて、プレーヤーがスロットリングされることがあります。 + プレイヤーが HLS ストリーミングセッションに指定するすべてのオプションをサポートしていることを確認します。以下のパラメータでさまざまな値の組み合わせを試します。 + `ContainerFormat` + `PlaybackMode` + `FragmentSelectorType` + `DiscontinuityMode` + `MaxMediaPlaylistFragmentResults` 通常、一部のメディアプレーヤー (HTML5 やモバイルプレイヤーなど) は、fMP4 コンテナ形式の HLS のみをサポートします。他のメディアプレイヤー (フラッシュやカスタムプレイヤーなど) は、MPEG TS コンテナ形式の HLS のみをサポートする場合があります。トラブルシューティングを開始するには、 `ContainerFormat`パラメータを試すことをお勧めします。 + 各フラグメントに一貫した数のトラックがあることを確認します。ストリーム内のフラグメントが、オーディオトラックとビデオトラックの両方を持つことと、ビデオトラックのみを持つことの間で変化していないことを確認します。また、各トラックのフラグメント間でエンコーダー設定 (解像度とフレームレート) が変更されていないことを確認します。 ### プロデューサーとプレーヤー間のレイテンシーが高すぎる この状況が発生するのは、動画をキャプチャした時点から動画プレーヤーで再生した時点までのレイテンシーが高すぎる場合です。 動画は HLS を介してフラグメント単位で再生されます。そのため、レイテンシーをフラグメント継続時間未満にすることはできません。レイテンシーには、データのバッファリングと転送の所要時間も含まれます。ソリューションで 1 秒未満のレイテンシーが必要な場合は、代わりに `GetMedia` API を使用することを検討してください。 以下のパラメータを調整してレイテンシー全体を短縮できますが、それに伴って画質が低下したり、再バッファリング率が高くなったりする場合があります。 + **フラグメント期間** – フラグメント期間は、ビデオエンコーダーによって生成されたキーフレームの頻度によって制御されるストリーム内の分割間のビデオの量です。推奨される値は 1 秒です。フラグメント継続時間が短いほど、動画データをサービスに転送する前にフラグメントが完了するまで待機する時間が少なくなります。また、フラグメントが短いほど、サービスでの処理が高速になります。ただし、フラグメント継続時間が短すぎると、プレーヤーでコンテンツが不足するため、停止してコンテンツをバッファリングしなければならない確率が高くなります。フラグメント継続時間が 500 ミリ秒未満の場合、プロデューサーで作成されるリクエストが多すぎて、サービスでスロットリングされることがあります。 + **ビットレート** – ビットレートが低いビデオストリームでは、読み取り、書き込み、送信にかかる時間が短くなります。ただし、通常、ビデオストリームのビットレートが低いほど、画質は低下します。 + **メディアプレイリストのフラグメント数** – レイテンシーの影響を受けやすいプレイヤーは、メディアプレイリスト内の最新のフラグメントのみをロードする必要があります。ほとんどのプレイヤーは、代わりに最も早いフラグメントから開始します。プレイリスト内のフラグメントの数を減らすことで、以前のフラグメントと新しいフラグメントの時間分離を短縮できます。プレイリストのサイズが小さいほど、プレイリストへの新しいフラグメントの追加に遅延がある場合、またはプレイヤーが更新されたプレイリストを取得するのに遅延がある場合、再生中にフラグメントがスキップされる可能性があります。プレイリストから最新のフラグメントのみをロードするように設定されたプレイヤーを使用するには、3～5 個のフラグメントを使用することをお勧めします。 + **プレイヤーバッファサイズ** – ほとんどのビデオプレイヤーには設定可能な最小バッファ期間があり、通常は 10 秒のデフォルトです。最も低いレイテンシーの場合、この値は 0 秒に設定できます。ただし、そうすることで、遅延を吸収するバッファがプレイヤーにないため、フラグメントの生成に遅延が発生した場合にプレイヤーはリバッフィングします。 + **プレイヤー「キャッチアップ**」 — 遅延したフラグメントによってフラグメントのバックログが再生されるなど、バッファがいっぱいになると、ビデオプレイヤーは通常ビデオバッファの前面まで再生を自動的にキャッチしません。カスタムプレーヤーでは、これを避けるためにフレームをドロップするか、再生スピードを速くして (1.1 倍など)、バッファの先頭までキャッチアップできます。プレーヤーのキャッチアップに伴って、再生が途切れたり、速度が増したりします。また、バッファサイズが短いと、再バッファリングの回数が増える場合があります。