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

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

による動画再生 HLS

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

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

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

重要

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

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

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

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

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

Kinesis ビデオストリームのHLSURLエンドポイントを取得します。

  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 分 00 分 GMT-08 時 00 に等しい

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

    LIVE_REPLAY 再生モードと指定されたフラグメントセレクタGetHLSStreamingSessionURLAPIを使用して を呼び出します。 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_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 分 00 分 GMT-08 時 00 に等しい

    • 1708471860 は 2024 年 2 月 20 日午後 3 時 31 分 00 分 GMT-08 時 00 分に等しい

    ON_DEMAND 再生モードと指定されたフラグメントセレクタGetHLSStreamingSessionURLAPIを使用して を呼び出します。 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 ON_DEMAND \
  --hls-fragment-selector \
    "FragmentSelectorType=SERVER_TIMESTAMP,TimestampRange={StartTimestamp=1708471800,EndTimestamp=1708471860}"
    注記

    タイムスタンプは、HLSTimestampRangeドキュメントに記載されているように、相互に 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 HLS ブラウザの Location バーURLにHLSストリーミングセッションを入力して、ストリームを再生することもできます。

例: HTMLと HLSで を使用する JavaScript

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

完全なサンプルコードとホストされたウェブページを「」で表示します GitHub。

ブラウザ用の JavaScript のインポート AWS SDK

ウェブページに次のスクリプトタグを含めて、 for 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 クライアントを作成して設定します。その他の認証方法については、「ウェブブラウザでの認証情報の設定」を参照してください。

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

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

HLS 再生するエンドポイントを取得する

Kinesis Video Streams クライアントを使用して を呼び出しGetDataEndpointAPI、エンドポイントを取得します。

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 アーカイブメディアクライアントを使用して を呼び出しGetHLSStreamingSessionURLAPI、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 とその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>

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

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

をHTMLビデオ要素ソースHLSURLとして設定します。

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>

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

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

ビデオ要素を指定して Shaka プレイヤーを作成し、ロードメソッドを呼び出します。

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>

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

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

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 でHTTPライブストリーミング (HLS) を使用する際に発生する可能性のある問題について説明します。

HLS ストリーミングセッションの取得はURL成功しますが、ビデオプレーヤーでの再生は失敗します

この状況は、 URLを使用してHLSストリーミングセッションを正常に取得できるがGetHLSStreamingSessionURL、 がビデオプレーヤーに提供されるとビデオURLが再生されない場合に発生します。

この状況のトラブルシューティングを行うには、以下を試します。

  • Kinesis Video Streams コンソールでビデオストリームが再生されるかどうかを確認します。コンソールに表示されたエラーを検討します。

  • フラグメント継続時間が 1 秒未満の場合は、1 秒に増やします。フラグメントの期間が短すぎると、ビデオフラグメントのリクエストが頻繁に行われるため、サービスによってプレイヤーがスロットリングされる可能性があります。

  • 各HLSストリーミングセッションURLが 1 人のプレイヤーによってのみ使用されていることを確認します。複数のプレイヤーが 1 つのHLSストリーミングセッション を使用している場合URL、サービスが受信するリクエストが多すぎてスロットリングされる可能性があります。

  • プレイヤーがHLSストリーミングセッションに指定するすべてのオプションをサポートしていることを確認します。以下のパラメータでさまざまな値の組み合わせを試します。

    • ContainerFormat

    • PlaybackMode

    • FragmentSelectorType

    • DiscontinuityMode

    • MaxMediaPlaylistFragmentResults

    一部のメディアプレーヤー ( HTML5やモバイルプレーヤーなど) は、通常 HLS fMP4 コンテナ形式でのみサポートします。他のメディアプレーヤー (フラッシュプレーヤーやカスタムプレーヤーなど) HLSは、TS MPEG コンテナ形式でのみ をサポートする場合があります。トラブルシューティングを開始するには、 ContainerFormatパラメータを試すことをお勧めします。

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

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

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

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

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

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

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

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

  • プレイヤーバッファサイズ – ほとんどのビデオプレイヤーには設定可能な最小バッファ期間があり、通常は 10 秒のデフォルトです。最も低いレイテンシーの場合、この値は 0 秒に設定できます。ただし、そうすることで、遅延を発生させるためのバッファがプレイヤーにないため、フラグメントの生成に遅延が発生した場合にプレイヤーはリバッフィングします。

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