⑮[最終回] 簡易ライブビュー再生プレイヤーの作成(JavaScript)
前回の記事はこちら
はじめに
前章で作成したクラウドレコーダが定期的にアップロードするライブJPEG画像を表示する、簡易ライブビュー再生プレイヤーを作ります。
基本的な作り方は下記で紹介したものとほぼ同じです。
ライブビューを見る前提として、AWS S3のバケットのプロパティで、静的ウェブサイトホスティングが有効になっている必要があります。
設定していない方は以下の記事を参照してください。
簡易ライブビュー再生プレイヤーは以下の2つのファイルで構成されます。
live.html
簡易ライブビュー再生プレイヤーを配置したHTMLファイル
live.js
live.htmlで読み込まれるJavaScriptファイル
この2つのファイルをS3の静的ウェブホスティングを有効にした、MPEG2-TS保存バケットの直下にアップロードするだけです。
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時間クラウド録画サービスを作ってきましたが、いかがだったでしょうか?
カメラ映像をクラウドに録画し、それを視聴する、という単純に見えるシステムですが、様々な技術に対する理解や知識が必要であることがお判りいただけたと思います。
これをきっかけに、興味を持った技術をさらに深堀して、より深い知識を身に付けていってもらえればと思います。
この記事が気に入ったらサポートをしてみませんか?