mechamogera/index.html

## index.html
<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>
	<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>