HLS を使用した動画再生 - Amazon Kinesis Video Streams

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

HLS を使用した動画再生

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

Amazon Kinesis video stream では、HLS を介して動画を提供する場合、以下が要件となります。

  • データの保持期間が 0 より大きい。

  • ストリームのトラック 1 には、コーデック ID V_MPEG/ISO/AVC が必要で、H.264 エンコードメディアが含まれている必要があります。オーディオトラック (オプション) がある場合、トラック番号 2 である必要があり、コーデック ID A_AAC が必要です。また、AAC でエンコードされたオーディオが含まれている必要があります。

  • フラグメントに、ビデオメディア用の AVC (Advanced Video Coding) のコーデックプライベートデータが H.264 形式で含まれている必要があります (MPEG-4 仕様 ISO/IEC 14496-15)。また、オーディオメディア用に ACC (AAC 仕様 ISO/IEC 13818-7) のコーデックプライベートデータが含まれている必要があります。ストリームデータを特定の形式に適応させる方法については、「NAL 適応フラグ」を参照してください。

例: HTML および JavaScript での HLS の使用

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

HLS 再生用の Kinesis Video Streams の設定

HLS でストリーミング動画にアクセスするには、まず、Kinesis Video Streams クライアント (サービスエンドポイントを取得するため) とアーカイブ済みメディアクライアント (HLS ストリーミングセッションを取得するため) を作成して設定します。アプリケーションは、HTML ページの入力ボックスから必要な値を取得します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/aws-sdk/2.278.1/aws-sdk.min.js"></script> ... var protocol = $('#protocol').val(); var streamName = $('#streamName').val(); // Step 1: Configure SDK Clients var options = { accessKeyId: $('#accessKeyId').val(), secretAccessKey: $('#secretAccessKey').val(), sessionToken: $('#sessionToken').val() || undefined, region: $('#region').val(), endpoint: $('#endpoint').val() || undefined } var kinesisVideo = new AWS.KinesisVideo(options); var kinesisVideoArchivedContent = new AWS.KinesisVideoArchivedMedia(options);

HLS 再生用に Kinesis Video Streams のアーカイブ済みコンテンツエンドポイントを取得する

クライアントの初期化後に、Kinesis Video Streams のアーカイブ済みコンテンツエンドポイントを取得して、HLS ストリーミングセッション URL を取得します。

// Step 2: Get a data endpoint for the stream console.log('Fetching data endpoint'); kinesisVideo.getDataEndpoint({ StreamName: streamName, APIName: "GET_HLS_STREAMING_SESSION_URL" }, function(err, response) { if (err) { return console.error(err); } console.log('Data endpoint: ' + response.DataEndpoint); kinesisVideoArchivedContent.endpoint = new AWS.Endpoint(response.DataEndpoint);

HLS ストリーミングセッション URL を取得する

アーカイブ済みコンテンツエンドポイントがある場合は、GetHLSStreamingSessionURL API を呼び出して HLS ストリーミングセッション URL を取得します。

// Step 3: Get a Streaming Session URL var consoleInfo = 'Fetching ' + protocol + ' Streaming Session URL'; console.log(consoleInfo); ... else { kinesisVideoArchivedContent.getHLSStreamingSessionURL({ StreamName: streamName, PlaybackMode: $('#playbackMode').val(), HLSFragmentSelector: { FragmentSelectorType: $('#fragmentSelectorType').val(), TimestampRange: $('#playbackMode').val() === "LIVE" ? undefined : { StartTimestamp: new Date($('#startTimestamp').val()), EndTimestamp: new Date($('#endTimestamp').val()) } }, ContainerFormat: $('#containerFormat').val(), DiscontinuityMode: $('#discontinuityMode').val(), DisplayFragmentTimestamp: $('#displayFragmentTimestamp').val(), MaxMediaPlaylistFragmentResults: parseInt($('#maxResults').val()), Expires: parseInt($('#expires').val()) }, function(err, response) { if (err) { return console.error(err); } console.log('HLS Streaming Session URL: ' + response.HLSStreamingSessionURL);

HLS 再生でストリーミングビデオを表示する

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

次のコード例では、ストリーミングセッション URL を Video.js プレーヤーに指定する方法を示します。

// VideoJS elements <video id="videojs" class="player video-js vjs-default-skin" controls autoplay></video> <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> ... else if (playerName === 'VideoJS') { var playerElement = $('#videojs'); playerElement.show(); var player = videojs('videojs'); console.log('Created VideoJS Player'); player.src({ src: response.HLSStreamingSessionURL, type: 'application/x-mpegURL' }); console.log('Set player source'); player.play(); console.log('Starting playback');

次のコード例では、ストリーミングセッション URL を Google Shaka プレーヤーに指定する方法を示します。

// Shaka Player elements <video id="shaka" class="player" controls autoplay></video> <script src="https://cdnjs.cloudflare.com/ajax/libs/shaka-player/2.4.1/shaka-player.compiled.js"> </script> ... else if (playerName === 'Shaka Player') { var playerElement = $('#shaka'); playerElement.show(); var player = new shaka.Player(playerElement[0]); console.log('Created Shaka Player'); player.load(response.HLSStreamingSessionURL).then(function() { console.log('Starting playback'); }); console.log('Set player source');

次のコード例では、ストリーミングセッション URL を hls.js プレーヤーに指定する方法を示します。

// HLS.js elements <video id="hlsjs" class="player" controls autoplay></video> <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script> ... var playerName = $('#player').val(); if (playerName == 'HLS.js') { var playerElement = $('#hlsjs'); playerElement.show(); var player = new Hls(); console.log('Created HLS.js Player'); player.loadSource(response.HLSStreamingSessionURL); player.attachMedia(playerElement[0]); console.log('Set player source'); player.on(Hls.Events.MANIFEST_PARSED, function() { video.play(); console.log('Starting playback'); }); }

HLS の問題のトラブルシューティング

動画ストリームが正常に再生されない場合は、「HLS の問題のトラブルシューティング」を参照してください。

HLS 再生の完全な例

完全なコード例をダウンロードまたは表示できます。