ブラウザーで、ローカル接続したWebカメラを使います。

この手のものはたくさんありますが、ここでは

jQueryのプラグイン「jQuery webcam plugin」を使ってみます。

ソースがシンプルというのが理由です。

で、Webカメラの画像を３０秒間隔でキャプチャーして２枚の画像の比較をしてみます。

比較は簡易にSSDを使っています。

画像比較にはImageMagickを使ってみました。コードはページの下を参照。



現在、オペラ・ブラウザーでは動作が確認できませんでした。







Web CAM 画像比較＜---サーバー負荷が大きいので現在休止中

初期画面です。

問題なければ、「許可」をクリック。



タイマーは３０秒間隔でキャプチャーを実行します。

画像が２枚そろえば比較を実行。

差分値は、２枚の画像の1ピクセルずつで RGB 値を取得し、RGB を Lab 色空間上の座標に変換し、同じ座標同士の距離の和を表示したもの。





画像比較に使ったImageMagickのコマンド

２枚の画像から差分の画像を生成

composite -compose difference base.jpg target.jpg diff.jpg

平均画素値(mean)の値を取得

identify -format '%[mean]' diff.jpg

この値が小さいほど、２枚の画像の差が少ないことになります。



jQuery webcam pluginの基本コード。

最新のjQuery webcam pluginでは以下のコードは動かないかも....。

少々昔のjQuery webcam pluginを使ってみてください。
（最新のコードでもスピードはそんなに変わりません）

jQuery webcam pluginをダウンロードし、解凍したフォルダーにおいてください。

ローカルでは実行できません（Flashが無いよ...というエラーになります）。

お手持ちのWebサイトにアップしてお試しください。 

<!DOCTYPE html>

<html lang="ja">

<head>

<meta charset="utf-8" />


<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<meta name="keywords" content="" />
<meta name="description" content="Building intelligent and scalable web applications" />



<style type="text/css"> 

#webcam, #canvas {
    width: 320px;
    border:20px solid #333;
    background:#eee;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

#webcam {
    position:relative;
    margin-top:50px;
    margin-bottom:50px;
}

#webcam > span {
    z-index:2;
    position:absolute;
    color:#eee;
    font-size:10px;
    bottom: -16px;
    left:152px;
}

#webcam > img {
    z-index:1;
    position:absolute;
    border:0px none;
    padding:0px;
    bottom:-40px;
    left:89px;
}

#webcam > div {
    border:5px solid #333;
    position:absolute;
    right:-90px;
    padding:5px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    cursor:pointer;
}

#webcam a {
    background:#fff;
    font-weight:bold;
}

#webcam a > img {
    border:0px none;
}
 
#canvas {
    border:20px solid #ccc;
    background:#eee;
}

#flash {
    position:absolute;
    top:0px;
    left:0px;
    z-index:5000;
    width:100%;
    height:500px;
    background-color:#c00;
    display:none;
}

object {
    display:block; /* HTML5 fix */
    position:relative;
    z-index:1000;
}

</style>
 
<script type="text/javascript" src="jquery.webcam/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.webcam/jquery.webcam.js"></script>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

<script>
    //
    
</script>


<!--[if IE]><script src="canvas/excanvas.js"></script><![endif]-->


</head>

<body>



<div id="wrap">
  
    <div id="main">
  <ul id="cams"></ul>
<p id="status" style="width:360px;height:22px; color:#c00;font-weight:bold;text-align:center;"></p>
    
    
<div id="webcam"></div>
<BR>

<BR>
<BR>
<BR>

</p>
<BR>

<p><canvas id="canvas" style="visibility:hidden" name="canvas" height="240" width="320"></canvas></p>




<script type="text/javascript"> 
    //
</script>
    
<script type="text/javascript"> 
var pos = 0;
var ctx = null;
var cam = null;
var image = null;

var filter_on = false;
var filter_id = 0;

function changeFilter() {
    
    if (filter_on) {
        filter_id = (filter_id + 1) & 7;
        
    }
}

function toggleFilter(obj) {
    if (filter_on =!filter_on) {
        obj.parentNode.style.borderColor = "#c00";
    } else {
        obj.parentNode.style.borderColor = "#333";
    }
}

function set_camera(){
    var ret = window.webcam.setCamera(0);
    
    
}

jQuery("#webcam").webcam({
  
    width: 320,
    height: 240,
    mode: "save",
    swffile: "jquery.webcam/jscam.swf",
    //mode: "callback",
  //swffile: "jquery.webcam/jscam_canvas_only.swf",
  
    onTick: function(remain) {
    
        if (0 == remain) {
            jQuery("#status").text("Cheese!");
        } else {
            jQuery("#status").text(remain + " seconds remaining...");
        }
    },
    
    onSave: function(data) {
        //
   
    },
    
    onCapture: function () {
        
        jQuery("#flash").css("display", "block");
        jQuery("#flash").fadeOut(100, function () {
            jQuery("#flash").css("opacity", 1);
        });
        
        
        
    },
    
    debug: function (type, string) {
        jQuery("#status").html(type + ": " + string);
    },
    
    onLoad: function () {
        var cams = webcam.getCameraList();
        for(var i in cams) {
            jQuery("#cams").append("<li>" + cams[i] + "</li>");
            
        }
        
        
        
   jQuery("body").append("<div id=\</div>");
   
   webcam.setCamera(0);//現在機能していません
        
        
        
   
        var canvas = document.getElementById("canvas");
      
        if (canvas.getContext) {
            
            ctx = document.getElementById("canvas").getContext("2d");
            ctx.clearRect(0,0,320,240);
       
       var img = new Image();
            
            img.src = "img/test.gif";
            
            img.onload = function() {
                ctx.drawImage(img,0,0);
                
            }
            
            image = ctx.getImageData(0,0,320,240);
        }
        
        
    }
});


</script>

</body>

</html>




JavaScriptで画像比較するような場合は、これが便利。

Resemble.js



比較する２枚の画像をドラッグ・ドロップすると結果を返してくれます。