HLS によるビデオ再生 - Amazon Kinesis Video Streams
を使用して HLS ストリーミングセッション URL を取得します。 AWS CLI例:HTML で HLS を使用し、 JavaScriptHLS 問題のトラブルシューティング

翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

HLS によるビデオ再生

HTTP ライブストリーミング (HLS) は業界標準の HTTP ベースのメディアストリーミング通信プロトコルです。HLS を使用して、Kinesis ビデオストリームをライブ再生またはアーカイブされたビデオの視聴に使用できます。

HLS はライブ再生に使用できます。レイテンシーは通常 3 ～ 5 秒ですが、ユースケース、プレーヤー、ネットワークの状態によっては 1 ～ 10 秒になることもあります。サードパーティー製のプレーヤー (Video.js や Google Shaka Player など) を使用してビデオストリームを表示するには、HLS ストリーミングセッション URL をプログラムまたは手動で指定できます。Apple Safari または Microsoft Edge ブラウザのロケーションバーに HLS ストリーミングセッション URL を入力してビデオを再生することもできます。

HLS を使用して Kinesis ビデオストリームを視聴するには、まず StreamingSessionGetHLS URL を使用してストリーミングセッションを作成します。このアクションにより、HLS セッションにアクセスするための URL (セッショントークンを含む) が返されます。次に、この URL をメディアプレーヤーまたはスタンドアロンアプリケーションで使用してストリームを表示できます。

重要

Kinesis Video Streams に送信されたすべてのメディアを HLS で再生できるわけではありません。GetHLSStreamingSessionURL特定のアップロード要件については、を参照してください。

を使用して HLS ストリーミングセッション URL を取得します。 AWS CLI

以下の手順に従って、を使用して Kinesis ビデオストリームの HLS ストリーミングセッション URL を生成します。 AWS CLI

インストール手順については、『AWS Command Line Interface ユーザーガイド』を参照してください。インストール後、認証情報とリージョンを設定します。 AWS CLI

または、 AWS CloudShell AWS CLI をインストールして設定したターミナルを開きます。詳細については、『AWS CloudShell ユーザーガイド』を参照してください。

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"
}

  2. 返されたエンドポイントに 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 エポック時間を秒形式で使用しています。タイムスタンプフォーマットの詳細については、 AWS Command Line Interface ユーザーガイドの「タイムスタンプ」セクションを参照してください。

    変換ツールについては、UnixTime.org を参照してください。

    • 1708471800 は 2024 年 2 月 20 日午後 3 時 30 分 (グリニッジ標準時 )-08:00 と同じです。

    この例では、終了タイムスタンプを指定していません。つまり、セッションの有効期限が切れるまで、新しく取り込まれたメディアがセッションに含まれ続けます。

    LIVE_REPLAY再生モードと HLS フラグメントセレクターを指定して 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 エポック時間 (秒) 形式を使用します。タイムスタンプフォーマットの詳細については、 AWS Command Line Interface ユーザーガイドの「タイムスタンプ」セクションを参照してください。

    変換ツールについては、UnixTime.org を参照してください。

    • 1708471800 は 2024 年 2 月 20 日午後 3 時 30 分 (グリニッジ標準時 )-08:00 と同じです。

    • 1708471860 は 2024 年 2 月 20 日午後 3:31:00 (グリニッジ標準時-08:00) と同じです。

    再生モードで HLS フラグメントセレクターを指定して GetHLSStreamingSessionURL API を呼び出します。ON_DEMAND

    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}"
    注記

    ドキュメントに記載されているように、タイムスタンプは互いに 24 時間以内である必要があります。HLSTimestampRange

    次のようなレスポンスが返されます。

    {
    "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 ブラウザのロケーションバーに HLS ストリーミングセッション URL を入力して HLS ストリームを再生することもできます。

例:HTML で HLS を使用し、 JavaScript

次の例は、 AWS SDK for JavaScript v2 を使用して Kinesis ビデオストリームの HLS ストリーミングセッションを取得し、Web ページで再生する方法を示しています。この例では、動画の再生に以下のプレーヤーを使用します。

サンプルコード全体とホストされているウェブページについては、を参照してください。 GitHub

JavaScript ブラウザ用 AWS SDK をインポートします。

Web ページに、 JavaScript v2 用 AWS SDK をプロジェクトにインポートするための次のスクリプトタグを含めます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/aws-sdk/2.490.0/aws-sdk.min.js"></script>

詳細については、AWS SDK JavaScript のドキュメントを参照してください。

Kinesis Video Streams クライアントのセットアップ

HLS でストリーミングビデオにアクセスするには、まず Kinesis Video Streams クライアントを作成して設定します。他の認証方法については、「Web ブラウザーでの認証情報の設定」を参照してください。

const clientConfig = {
    accessKeyId: 'YourAccessKey',
    secretAccessKey: 'YourSecretKey',
    region: 'us-west-2'
 };
const kinesisVideoClient = new AWS.KinesisVideo(clientConfig);

アプリケーションは、HTML ページの入力ボックスから必要な値を取得します。

HLS 再生用のエンドポイントを取得します。

Kinesis Video Streams クライアントを使用して GetDataEndpoint 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 を呼び出し、HLS 再生 URL を取得します。

const getHLSStreamingSessionURLOptions = {
    StreamName: 'YourStreamName',
    PlaybackMode: 'LIVE'
};
const getHLSStreamingSessionURLResponse = await kinesisVideoArchivedMediaClient.getHLSStreamingSessionURL(getHLSStreamingSessionURLOptions);
const hlsUrl = getHLSStreamingSessionURLResponse.HLSStreamingSessionURL;

HLS ストリームをウェブページに表示します。

HLS ストリーミングセッション URL がある場合、それをビデオプレーヤーに指定します。URL をビデオプレーヤーに指定する方法は、使用するプレーヤーごとに異なります。

Video.js

Video.js とその CSS クラスをブラウザースクリプトにインポートするには、次の操作を行います。

<link rel="stylesheet" href="https://vjs.zencdn.net/6.6.3/video-js.css">
<script src="https://vjs.zencdn.net/6.6.3/video.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.14.1/videojs-contrib-hls.js"></script>

動画を表示する video HTML 要素を作成します。

<video id="videojs" class="player video-js vjs-default-skin" controls autoplay></video>

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 プレーヤーをブラウザースクリプトにインポートするには、次の手順を実行します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/shaka-player/2.4.1/shaka-player.compiled.js"></script>

動画を表示する video HTML 要素を作成します。

<video id="shaka" class="player" controls autoplay></video>

video 要素を指定して Shaka プレーヤーを作成し、load メソッドを呼び出します。

const playerElement = document.getElementById('shaka');
const player = new shaka.Player(playerElement);
player.load(hlsUrl);
hls.js

以下を実行して hls.js をブラウザースクリプトにインポートします。

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>

動画を表示する video HTML 要素を作成します。

<video id="hlsjs" class="player" controls autoplay></video>

hls.js プレーヤーを作成し、HLS URL を指定して、再生するように指示します。

var playerElement = document.getElementById('hlsjs');
var 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 を使用するときに発生する可能性がある問題について説明します。

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 のみをサポートします。他のメディアプレーヤー (Flash やカスタムプレーヤーなど) は MPEG TS コンテナ形式の HLS のみをサポートしている場合があります。トラブルシューティングを開始するには、ContainerFormatパラメーターを試してみることをお勧めします。

  • 各フラグメントに一貫した数のトラックがあることを確認します。ストリーム内のフラグメントが、オーディオトラックとビデオトラックの両方を含むか、ビデオトラックのみを含むかの間で変化していないことを確認します。また、エンコーダー設定 (解像度とフレームレート) が各トラックのフラグメント間で変化していないことも確認してください。

プロデューサーとプレーヤー間のレイテンシーが高すぎる

この状況が発生するのは、動画をキャプチャした時点から動画プレーヤーで再生した時点までのレイテンシーが高すぎる場合です。

動画は HLS を介してフラグメント単位で再生されます。そのため、レイテンシーをフラグメント継続時間未満にすることはできません。レイテンシーには、データのバッファリングと転送の所要時間も含まれます。ソリューションで 1 秒未満のレイテンシーが必要な場合は、代わりに GetMedia API を使用することを検討してください。

以下のパラメータを調整してレイテンシー全体を短縮できますが、それに伴って画質が低下したり、再バッファリング率が高くなったりする場合があります。

  • フラグメントデュレーション — フラグメントデュレーションは、ビデオエンコーダーが生成するキーフレームの頻度によって制御される、ストリームのディビジョン間のビデオ量です。推奨される値は 1 秒です。フラグメント継続時間が短いほど、動画データをサービスに転送する前にフラグメントが完了するまで待機する時間が少なくなります。また、フラグメントが短いほど、サービスでの処理が高速になります。ただし、フラグメント継続時間が短すぎると、プレーヤーでコンテンツが不足するため、停止してコンテンツをバッファリングしなければならない確率が高くなります。フラグメント継続時間が 500 ミリ秒未満の場合、プロデューサーで作成されるリクエストが多すぎて、サービスでスロットリングされることがあります。

  • ビットレート — ビットレートが低いビデオストリームほど、読み取り、書き込み、送信にかかる時間が短くなります。ただし、通常、ビデオストリームのビットレートが低いほど、画質は低下します。

  • メディアプレイリストのフラグメント数 — レイテンシーの影響を受けやすいプレーヤーは、メディアプレイリスト内の最新のフラグメントのみを読み込む必要があります。ほとんどのプレーヤーは、代わりに一番早いフラグメントから開始します。プレイリスト内のフラグメントの数を減らすことで、前のフラグメントと新しいフラグメントの間の時間間隔を狭めることができます。プレイリストのサイズを小さくすると、プレイリストへの新しいフラグメントの追加が遅れたり、プレーヤーが更新されたプレイリストを取得するのに遅延が生じたりすると、再生中にフラグメントがスキップされる可能性があります。3 ～ 5 個のフラグメントを使用し、プレイリストから最新のフラグメントだけを読み込むように設定されたプレーヤーを使用することをおすすめします。

  • プレーヤーのバッファサイズ — ほとんどの動画プレーヤーでは、最小バッファ時間が設定可能で、通常はデフォルトは 10 秒です。最も低いレイテンシーの場合、この値は 0 秒に設定できます。ただし、そうすると、プレーヤーには遅延を吸収するバッファーがなくなるため、遅延が発生するとフラグメントが生成され、再バッファされます。

  • プレーヤーの「catch アップ」 — 通常、ビデオプレーヤーは、遅延フラグメントが原因でフラグメントのバックログが再生されるなど、バッファーがいっぱいになっても、ビデオバッファーの先頭まで自動的に再生をcatch しません。カスタムプレーヤーでは、これを避けるためにフレームをドロップするか、再生スピードを速くして (1.1 倍など)、バッファの先頭までキャッチアップできます。プレーヤーのキャッチアップに伴って、再生が途切れたり、速度が増したりします。また、バッファサイズが短いと、再バッファリングの回数が増える場合があります。