Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CCVでWebカメラ画像認識サンプル
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Webカメラの映像をface++に送信</title>
</head>
<body>
<h2>Video</h2>
<video id="camera" autoplay></video>
<h2>Canvas</h2>
<canvas id="canvas"></canvas>
<script src='http://rawgithub.com/liuliu/ccv/stable/js/ccv.js' type='text/javascript'></script>
<script src='http://rawgithub.com/liuliu/ccv/stable/js/face.js' type='text/javascript'></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var renderStart = function() {
if (localMediaStream) {
var canvas = document.getElementById('canvas');
//canvasの描画モードを2sに
var ctx = canvas.getContext('2d');
var img = document.getElementById('img');
var sending = false;
var faceData = [];
var render = function() {
requestAnimationFrame(render);
//videoの縦幅横幅を取得
var w = video.offsetWidth;
var h = video.offsetHeight;
//同じサイズをcanvasに指定
canvas.setAttribute("width", w);
canvas.setAttribute("height", h);
//canvasにコピー
ctx.drawImage(video, 0, 0, w, h);
ctx.lineWidth = 3;
ctx.strokeStyle = "#f00";
var i;
for (i = 0; i < faceData.length; i++) {
ctx.strokeRect(faceData[i].x, faceData[i].y, faceData[i].width, faceData[i].height);
}
if (!sending) {
sending = true;
setTimeout(function() {
var img = new Image();
img.src = canvas.toDataURL();
// 画像認識
var comp = ccv.detect_objects({
"canvas": ccv.grayscale(ccv.pre(img)),
"cascade": cascade,
"interval": 5,
"min_neighbors": 1
});
faceData = comp;
console.log(comp);
sending = false;
}, 0);
}
};
render();
}
};
//videoタグを取得
var video = document.getElementById('camera');
//カメラが起動できたかのフラグ
var localMediaStream = null;
//カメラ使えるかチェック
var hasGetUserMedia = function() {
return (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
};
//エラー
var onFailSoHard = function(e) {
console.log('エラー!', e);
};
if(!hasGetUserMedia()) {
alert("未対応ブラウザです。");
} else {
window.URL = window.URL || window.webkitURL;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
navigator.getUserMedia({video: true}, function(stream) {
video.src = window.URL.createObjectURL(stream);
localMediaStream = stream;
renderStart();
}, onFailSoHard);
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment