方針
まず、HTML5のAPI getUserMedia
を使ってローカルカメラの映像を取得できる。映像は静止画をコマ送りすることで実現しているので、特定のタイミングで画像を切り出し、その画像に対して顔認識を適用すればよい。
顔認識はサーバサイドで行う。ローカル側で切り出した画像をbase64エンコードしてAjaxでサーバに送信し、サーバ側ではbase64をデコードして顔認識器に入力する。そして、その結果をクライアント側に返す。
環境
環境はなんでもいい。以下は自身の環境で実績のあるもの。
- フロントエンド
- jquery
- サーバ
- node v.6.2
- 顔認識
- python 2.7
- openCV 2系
顔認識
base64を受け取って顔認識するやつ
http://qiita.com/komakomako/items/91eb5bba927b23587ed4
フロントエンド
<header class="hero-unit" id="banner">
<div class="container">
<h1>顔認識します</h1>
</div>
</header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<br>
<button class="btn btn-lg btn-success" onclick="startVideo()">Start</button>
<br>
<canvas style="display:true;" width="640" height="480"></canvas>
<video id="local_video" width="640" height="480" autoplay style="display: true;"></video>
</div>
</form>
</div>
<script type="text/javascript">
var localVideo = document.getElementById('local_video');
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
var localStream = null;
// 顔認識結果を四角い枠で描画するための座標
var x = []
var base64 = ''
// ローカルビデオをスタートさせる
function startVideo() {
navigator.mediaDevices.getUserMedia({video: true, audio: false})
.then(function (stream) { // success
localStream = stream;
localVideo.src = window.URL.createObjectURL(localStream);
}).catch(function (error) { // error
console.error('mediaDevice.getUserMedia() error:', error);
return;
});
}
// カメラ画像キャプチャ
var capture = function() {
if (localStream) {
ctx.drawImage(localVideo, 0, 0);
ctx.beginPath();
ctx.rect(x[0], x[1], x[2], x[3]);
ctx.stroke();
base64 = canvas.toDataURL('image/webp');
}
}
//認識
var detect = function() {
var request = {
url: 'http://localhost:9000/api/detect',
method: 'POST',
data: {
image: base64.replace(/^.*,/, '')
}
};
$.ajax(request).done(function(data){
console.log(data)
if(data.face) {
for(var i=0; i<data.face.split(' ').length; i++){
x[i] = data.face.split(' ')[i] - 0 ;
}
console.log(data.face.split(' '));
}
});
}
setInterval("capture()",100);
setInterval("detect()",500);
</script>
サーバ
エンドポイント http://localhost:9000/api/detect
をPOSTでたたくと、以下の関数にルーティングされるようにしておきます。
export function detect(req, res) {
const exec = require('child_process').exec;
exec('python /path/to/detect_base64.py "' + req.body.image + '"',
function(err, stdout, stderr) {
if (err) { console.log(err); }
console.log(stdout);
return res.status(201).json({"face": stdout});
}
);
}