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

1 はじめに

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

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

  1. HTTP Live Streaming (HLS)
  2. 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がそのまま表示できるブラウザは、SafariMicrosoft Edgeのみです。

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


videojs/video.js

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

<html>
    <head>
        <link rel="stylesheet" href="https://vjs.zencdn.net/6.6.3/video-js.css">
        <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>
        <title>HCL Player by Video.JS </title>

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

    </head>
    <body>
        <input type="button" value="Start" onclick='start()'>

        <div id="playerContainer">
            <video id="videojs" class="player video-js vjs-default-skin" controls autoplay></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>
    </body>
</html>

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

4 最後に

Kinesis Video Streamでは、簡単に、HLSでオンデマンドやライブの動画を配信できます。 次回は、GetMedia APIを使用した動画の表示を試してみたいと思います。

5 参考リンク


HLS での Kinesis ビデオストリーム の再生

コメントは受け付けていません。