⑮[最終回] 簡易ライブビュー再生プレイヤーの作成(JavaScript)
前回の記事はこちら
はじめに
前章で作成したクラウドレコーダが定期的にアップロードするライブJPEG画像を表示する、簡易ライブビュー再生プレイヤーを作ります。
基本的な作り方は下記で紹介したものとほぼ同じです。
ライブビューを見る前提として、AWS S3のバケットのプロパティで、静的ウェブサイトホスティングが有効になっている必要があります。
設定していない方は以下の記事を参照してください。
【注意！！】
本章では、AWS S3を一般公開（パブリックアクセス可能な状態）する設定がされていることを前提に処理を追加していきます。
しかし、この設定を行うと、URLを知っている人は誰でもライブ画像を取得できる状態になります。
実装・構築技術的な部分を中心に話を進めるために、簡易的な方法として、パブリックアクセス可能な状態にしていきますが、インターネット上に公開される、という状況を十分理解したうえで、撮影する映像には十分注意してください。
簡易ライブビュー再生プレイヤーは以下の２つのファイルで構成されます。
live.html
簡易ライブビュー再生プレイヤーを配置したHTMLファイル
live.js
live.htmlで読み込まれるJavaScriptファイル
この2つのファイルをS3の静的ウェブホスティングを有効にした、MPEG2-TS保存バケットの直下にアップロードするだけです。
【注意！！】
本章では、AWS S3を一般公開（パブリックアクセス可能な状態）する設定を行います。
しかし、この設定を行うと、URLを知っている人は誰でも動画を取得できる状態になります。
実装・構築技術的な部分を中心に話を進めるために、簡易的な方法として、パブリックアクセス可能な状態にしていきますが、インターネット上に公開される、という状況を十分理解したうえで、撮影する映像には十分注意してください。
さらに、実際にシステムとして運用していくためには、外部からは見られないような対策が必須です。
例えば、S3のオブジェクトを指定した時間だけ一時的に公開可能にするPreSignedURLを生成する方法や、MPEG2-TSをAESで暗号化してHLSで配信する方法、AWSの認証サービス(Cognito)を使用して、ログインユーザー認証機構を設ける、など、セキュリティやプライバシーの面から、様々な対策を施す必要があります。
S3のバケット一覧画面で、対象のバケットを選択し、「アップロード」ボタンを押すと、アップロード画面が表示されますので、この2つのファイルを選択してアップロードしてください。
アップロード後のバケット直下は以下のようなリストになります。
アップロードしたら、静的ウェブホスティングのURL+/live.htmlにブラウザにアクセスしてください。
クラウドレコーダを動かした状態で、簡易ライブビューを表示すると、秒間一コマのペースで映像が表示されます。
ソースコード
ソースコードは非常に単純ですので、特に説明は不要だと思います。
JavaScriptは、ほぼCanvasへの描画処理のみですので、詳しくはCanvasのヘルプなどを参照してください。
live.html
<!DOCTYPE html>
<head>
<title>LiveView</title>
</head>
<body>
<!-- 画像表示Canvas -->
<canvas id="live-canvas" style="background-color:gray;">
<!-- JavaScript(live.js) -->
<script src="live.js" ></script>
</body>
</html>
live.js
//
// ライブJPEG画像までのパス
var LIVE_JPEG_URL = "http://xxxx.s3-website-ap-northeast-1.amazonaws.com/jpeg/current.jpg"
//
// 描画キャンバス
var _canvas = null;
//
// HTMLページの要素が読み込まれたあとにコールされる関数
document.addEventListener('DOMContentLoaded', function()
{
// 描画対象キャンバスの取得
_canvas = document.getElementById("live-canvas")
// ウィンドウサイズいっぱいに広げる
expand();
// タイマーセット(500m秒間隔でdraw()をコールする)
setInterval(draw, 500);
});
//
// ブラウザリサイズイベント
window.onresize = function(){expand();}
//
// キャンバスをブラウザいっぱいに表示する
function expand()
{
if (_canvas != null)
{
_canvas.width = window.innerWidth;
_canvas.height = window.innerHeight;
}
}
//
// ライブJPEG画像の描画
function draw()
{
if (_canvas != null)
{
var ctx = _canvas.getContext('2d');
var canW = _canvas.width;
var canH = _canvas.height;
const img = new Image();
img.onload = function()
{
//
// 画像がロードできてから描画開始
drawImage(ctx, img, canW, canH);
};
//
// 画像のURLにQueryStringとして現在時刻のUNIX時間を追加する
// これによってブラウザのキャッシュを効かなくする
img.src = `${LIVE_JPEG_URL}?t=${new Date().getTime()}`;
}
}
//
// 画像の描画
function drawImage(ctx, img, canW, canH)
{
//
// 縦横比率を維持してキャンバスいっぱいに表示する
var imgW = img.width;
var imgH = img.height;
var dstW = canW;
var dstH = imgH * dstW / img.width;
if (dstH > canH)
{
dstH = canH;
dstW = imgW * dstH / img.height;
}
var dstX = (canW - dstW) / 2;
var dstY = (canH - dstH) / 2;
ctx.drawImage(img, dstX, dstY, dstW, dstH);
}
最後に
24時間クラウド録画サービスを作ってきましたが、いかがだったでしょうか？
カメラ映像をクラウドに録画し、それを視聴する、という単純に見えるシステムですが、様々な技術に対する理解や知識が必要であることがお判りいただけたと思います。
これをきっかけに、興味を持った技術をさらに深堀して、より深い知識を身に付けていってもらえればと思います。
この記事が気に入ったらサポートをしてみませんか？