テレビでの4分割表示方法

LiveCapture3の動画配信にはJavaScriptを使用したビューワを使用します。
このビューワはHTML5で記述しており、これを拡張することで、リビングのテレビで4分割表示の動画配信を見ることができます。

TVのブラウザでもHTML5対応のものは増えてきていますが、やはり処理能力が低いので、動画というわけにはいかないようです。（表示はできますが。。。）
ただし、TVにつないだゲーム機のブラウザなら、ちゃんと動画で表示できました。
ここでは、TVの大画面を生かして、4画面分割表示のやり方を説明します。

4画面表示の方法

LiveCapture3から直接配信されるJavaScriptページは、対象カメラ1つだけを表示するものです。
4画面表示を行う場合は、LiveCapture3から直接配信されるJavaScriptを使用せず、別途4画面表示のJavaScriptを記述したHTMLを用意する必要があります。

4画面表示を行うJavaScriptを記述した下記のようなHTMLを作成します。

<title>4分割画面</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">
 
    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 img0 = new Image();
         
        // LiveCapture3から配信されるSnapJpegのURLを記述（1つ目）
        img0.src = "http://192.168.1.3:50000/SnapJpeg?t=" +  new Date().getTime();
        img0.onload = function() {
            drawImage(ctx, img0, 0, canW, canH);
        }
 
        var img1 = new Image();
 
        // LiveCapture3から配信されるSnapJpegのURLを記述（2つ目）
        img1.src = "http://192.168.1.3:50001/SnapJpeg?t=" +  new Date().getTime();
        img1.onload = function() {
            drawImage(ctx, img1, 1, canW, canH);
        }
 
        var img2 = new Image();
 
        // LiveCapture3から配信されるSnapJpegのURLを記述(3つ目）
        img2.src = "http://192.168.1.3:50002/SnapJpeg?t=" +  new Date().getTime();
        img2.onload = function() {
            drawImage(ctx, img2, 2, canW, canH);
        }
 
        var img3 = new Image();
 
        // LiveCapture3から配信されるSnapJpegのURLを記述（4つ目）
        img3.src = "http://192.168.1.3:50003/SnapJpeg?t=" +  new Date().getTime();
        img3.onload = function() {
            drawImage(ctx, img3, 3, canW, canH);
        }
    }
     
    function drawImage(ctx, img, pos, canW, canH) {
         
        var imgW = img.width;
        var imgH = img.height;
             
        var dstW = canW / 2;
        var dstH = imgH * canW / 2 / imgW;
        if (dstH > canH / 2) {
            dstH = canH / 2;
            dstW = imgW * canH / 2 / imgH;
        }
         
        dstW = dstW - 5;
        dstH = dstH - 5;
         
        switch(pos){
        case 0:
            var dstX = (canW / 2 - dstW) / 2;
            var dstY = (canH / 2 - dstH) / 2;
            break;
        case 1:
            var dstX = (canW / 2 - dstW) / 2 + canW /2;
            var dstY = (canH / 2 - dstH) / 2;
            break;
        case 2:
            var dstX = (canW / 2 - dstW) / 2;
            var dstY = (canH / 2 - dstH) / 2 + canH /2;
            break;
        case 3:
            var dstX = (canW / 2 - dstW) / 2 + canW /2;
            var dstY = (canH / 2 - dstH) / 2 + canH /2;
            break;
        }
             
        ctx.drawImage(img, dstX, dstY, dstW, dstH);
    }
     
    function expand(){
        var canvas = document.getElementById('c1');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
    }
     
</script>
 
 
 
 
 
<canvas id="c1" style="background-color:gray;"></canvas>
 
 
<script type="text/javascript">
    window.onload = function(){init();}
    window.onresize = function(){expand();}
    setInterval("draw()", 100);
</script>

上記JavaScriptを記述したHTMLをここに置いておきます。

このHTML中の配信URLにhttp://localhostと記述して、配信しているLiveCapture3と同じPC上でローカル実行すれば、そのまま4画面表示プレビュー画面になります。

TVに接続したゲーム機等で表示する場合には、別途HTTPサーバが必要になります。

IISやApacheなどをインストールしたPCを別途用意するか、LiveCapture3を実行しているPCに、これらのHTTPサーバをインストールし、前述の4分割用HTMLを公開ディレクトリに配置し、そのHTMLをTVやゲーム機で開くことで4分割の動画配信をリビングで見ることができるようになります。

手元のPlayStation3では、Firmware Updateをすることで、WebブラウザがHTML5に対応できるようになりました。
また、2011年製のSony BRAVIAのWebブラウザでも表示することはできましたが、こちらは処理能力が足りず、コマ送り画像でした。
他のメーカのTVやゲーム機でもHTML5対応のものが増えていますので、試してみてください。
やはり、大画面で見ると違いますね！
配信するHTMLを加工すれば、家の間取り図にカメラ画像を重ねたHTMLを作ることもできますので、色々と試してみると面白そうです。