Zenn
📽️

【JavaScript】監視カメラ用マルチライブビューの作り方

2023/04/17に公開
JavaScript
jpeg
監視カメラ
tech

はじめに

LiveCapture3(Windows版、Android/iPhone版）には、カメラ映像をネットワーク上に配信する機能があります。

この機能を使用して、複数のLiveCapture3のライブ映像を一覧で表示するマルチカメラライブビューをJavaScriptを使ってHTMLで作ってみようと思います。

ちなみに、接続先はLiveCapture3だけでなく、HTTP GETでJPEG画像を返却する監視カメラ等でも動くはずです。

LiveCapture3の動画配信設定

まずは、使用するLiveCapture3で動画配信を有効にする必要があります。

Windows版での動画配信については以下を参照してください。

LiveCapture3の動画配信について

Android/iPhone版の場合は、設定画面の「ローカル配信」をONにしてください。

※Windows版とは異なり、監視を開始しなくても動画配信が開始されます。

マルチライブビューの作り方

LiveCapture3では、配信をONにすると、/SnapJpegに対してHTTP GETを送信すると、その時のカメラ映像をJPEG画像で返却する機能があります。

この機能に、定期的(100ミリ秒間隔）にアクセスしJPEG画像を取得・表示を繰り返すことで、マルチカメラビューを実現します。

1枚のHTMLで完結するように、下記のようなコードを記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    
	<title>Multi Camera View for LiveCapture3</title>
	
	<style>

	body{ 
		background-color: #808080;
		margin-left: 0px;
		margin-top: 0px;
		margin-right: 0px;
		margin-bottom: 0px;
		overflow-x: hidden;
		overflow-y: hidden;
	} 
	
	</style>
	
	<script type="text/javascript">
		
		//_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
		// 横に並べるカメラ映像の数
		//_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
		const MAX_COL = 3;

		//_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
		// 縦に並べるカメラ映像の数
		//_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
		const MAX_ROW = 3;
		
		//_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
		// LiveCapture3のアドレス:配信ポート番号
		//_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
		const ADDRESS_LIST = [
			"192.168.1.24:5555",
			"192.168.1.24:5556",
			"192.168.1.24:5557",
			"192.168.1.24:5558",
			"192.168.1.24:5559",
			"192.168.1.24:5560",
			"192.168.1.24:5561"
		];
		
		function init() {
			expand();
			draw();
		}
		
		function draw() {
			var canvas = document.getElementById('c1');
			var ctx = canvas.getContext('2d');
			var canW = canvas.width;
			var canH = canvas.height;
			
			var pos = 0;
			for (var row = 0; row < MAX_ROW; row++){
				for (var col = 0; col < MAX_COL; col++){
					if (pos < ADDRESS_LIST.length){
						const img = new Image();
						const c = col;
						const r = row;
						img.onload = function() {
							drawImage(ctx, img, c, r, canW, canH);
						}
						img.src = `http://${ADDRESS_LIST[pos]}/SnapJpeg?t=${new Date().getTime()}`;
					}
					pos++;
				}
			}
		}
		
		function drawImage(ctx, img, col, row, canW, canH) {
			
			var imgW = img.width;
			var imgH = img.height;
			
			var dstCanW = canW / MAX_COL;
			var dstCanH = canH / MAX_ROW;

			var dstW = dstCanW;
			var dstH = imgH * dstW / img.width;
			if (dstH > dstCanH) {
				dstH = dstCanH;
				dstW = imgW * dstH / img.height;
			}

			var dstX = (dstCanW - dstW) / 2 + dstCanW * col;
			var dstY = (dstCanH - dstH) / 2 + dstCanH * row;
			
			ctx.drawImage(img, dstX, dstY, dstW, dstH);
		}
		
		function expand(){
			var canvas = document.getElementById('c1');
			canvas.width = window.innerWidth;
			canvas.height = window.innerHeight;
		}
		
	</script>

</head>

<body>

	<canvas id="c1" style="background-color:gray;"></canvas>
	

	<script type="text/javascript">
		window.onload = function(){init();}
		window.onresize = function(){expand();}
		setInterval("draw()", 100);
	</script>

</body>

</html>

上記のコードの、28行目と33行目のMAX_COL/MAX_ROWの値を表示するカメラ映像の数に合わせて変更し、38行目のADDRESS_LISTに、LiveCapture3のIPアドレスと配信ポート番号を記入します。

値を設定したら、メモ帳などで「multicamera.html」のような名前で保存し、ダブルクリックでWebブラウザで表示させれば、マルチライブビューが表示されます。

ここに載せたコードはあくまでサンプルで、基本的な処理のみを記述しています。

ちなみに、接続先はLiveCapture3だけでなく、HTTP GETでJPEG画像を返却する監視カメラ等でも動くはずです。（GETのパスは変更する必要がありますが）

コードは自由に改変してもらって結構ですので、色々と試して使いやすいマルチライブビューを作ってみてください！

Discussion