この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
1 はじめに
こんにちは、AIソリューション部の平内(SIN)です。
Kinesis Video Streamに送られた動画は、以下の2つ方法で再生が可能ですが、今回は、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ストリーミングセッションを表示できるライブラリの1つである、Video.jsを使用してChromeで表示してみました。
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で表示できていることが確認できます。
4 最後に
Kinesis Video Streamでは、簡単に、HLSでオンデマンドやライブの動画を配信できます。 次回は、GetMedia APIを使用した動画の表示を試してみたいと思います。