[Kinesis Video Stream] HTTP Live Streaming(HLS)による動画の配信

SIN

2019.04.04

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

1 はじめに

こんにちは、AIソリューション部の平内（SIN）です。

Kinesis Video Streamに送られた動画は、以下の２つ方法で再生が可能ですが、今回は、1つ目のHLSを試してみました。

HTTP Live Streaming (HLS)
GetMedia (API)

HLSは、業界標準の HTTP ベースのメディアストリーミング通信プロトコルで、ライブ再生又は、オンデマンドの再生が可能です。

HLSの配信においては、ストリームセグメンターや、ファイルセグメンターで .m3u8（プレイリスト）や.ts(動画)ファイルを生成しますが、この部分をKinesis Video Streamだけで実現可能です。

参考：HTTP Live Streamingで動画を配信してみる

なお、Kinesis Video Streamでは、HLSで配信できる動画の要件は以下のとおりです。

メディアタイプ video/h264
データの保持期間が 0 以上
フラグメントに AVC (Advanced Video Coding) のコーデックプライベートデータが H.264 形式で含まれる

2 GetHLSStreamingSessionURL

HLSを使用してKinesis Video Streamを再生するには、まず、GetHLSStreamingSessionURL()でセッションを開始します。そして、このAPIから返されるURLをプレーヤーに渡す流れになります。

GetHLSStreamingSessionURL()を使用して、URLを取得するコードは、以下のようになります。

オンデマンドでなくライブの場合は、時間指定などのパラメータの指定が、全く必要ないため、非常にシンプルに取得できます。

const AWS = require('aws-sdk');

const region = 'ap-northeast-1';
const streamName = 'Sample002';

async function job(){
// KinesisVideoの生成
const kinesisvideo = new AWS.KinesisVideo({region: region});
// エンドポイントの取得
var params = {
APIName: "GET_MEDIA_FOR_FRAGMENT_LIST",
StreamName: streamName
};
const e = await kinesisvideo.getDataEndpoint(params).promise();
// KinesisVideoArchivedMediaの生成
const kinesisvideoarchivedmedia = new AWS.KinesisVideoArchivedMedia({endpoint: e.DataEndpoint, region: region});
// HLSのセッション開始をURLの取得
var params = {
StreamName: streamName
};
const data = await kinesisvideoarchivedmedia.getHLSStreamingSessionURL(params).promise();

console.log(data.HLSStreamingSessionURL);
}

job();

上記を実行して取得したURLをそのままSafariに貼り付けて表示したようすです。左がKinesis Video Streamのコンソールで、右側がSafariです。

3 Video.js

HLSがそのまま表示できるブラウザは、SafariとMicrosoft Edgeのみです。

ということで、HLSストリーミングセッションを表示できるライブラリの１つである、Video.jsを使用してChromeで表示してみました。

videojs/video.js

GetHLSStreamingSessionURL()で取得したURLをVideo.jsで表示しているコードは、下記のようになりました。

<br /><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.408.0.min.js"></script>

<style>
            #playerContainer, .player { width: 100%; height: auto; min-height: 300px; }<br />
        </style>


<input type="button" value="Start" />
<div id="playerContainer"><video id="videojs" class="player video-js vjs-default-skin" autoplay="autoplay" controls="controls" width="300" height="150"></video>
<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></div>
<script>

            const secretAccessKey = 'xxxxx';
            const accessKeyId = 'xxxxxx';
            const region = 'ap-northeast-1';
            const streamName = 'Sample002';

            async function start(){
                var options = {
                    accessKeyId: accessKeyId,
                    secretAccessKey: secretAccessKey,
                    region: region,
                }

                const kinesisvideo = new AWS.KinesisVideo(options);
                const kinesisvideoarchivedmedia = new AWS.KinesisVideoArchivedMedia(options);

                var params = {
                    APIName: "GET_MEDIA_FOR_FRAGMENT_LIST",
                    StreamName: streamName
                };
                const e = await kinesisvideo.getDataEndpoint(params).promise();
                kinesisvideoarchivedmedia.endpoint = new AWS.Endpoint(e.DataEndpoint);

                var params = {
                    StreamName: streamName
                };
                const d = await kinesisvideoarchivedmedia.getHLSStreamingSessionURL(params).promise();

                var playerElement = $('#videojs');
                playerElement.show();
                var player = videojs('videojs');
                player.src({
                    src: d.HLSStreamingSessionURL,
                    type: 'application/x-mpegURL'
                });
                player.play();
            }

        </script>

Chromeで表示できていることが確認できます。