mechamogera · February 25, 2016 08:07
diff --git a/index.html b/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>