mechamogera/Readme.md

## Readme.md

      
    Raw
  

              Readme.md
            
          
    参照サイト

Webカメラの映像をface++に送信する【JavaScript】 - FaMirror Project
無料API「face++」を使用して顔認識 - FaMirror Project
Face++のAPIを使って、PHPで顔認証をする方法


## 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="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script type="text/javascript">

$(function() {
        var sendFacePP = function(canvas, func, errFunc) {
                //ここから画像のバイナリ化
                var can = canvas.toDataURL();
                // Data URLからBase64のデータ部分のみを取得
                var base64Data = can.split(',')[1];
                // base64形式の文字列をデコード
                var data = window.atob(base64Data);
                var buff = new ArrayBuffer(data.length);
                var arr = new Uint8Array(buff);

                // blobの生成
                for(var i = 0, dataLen = data.length; i < dataLen; i++){
                        arr[i] = data.charCodeAt(i);
                }
                var blob = new Blob([arr], {type: 'image/png'});

                //ここから画像データ送信
                //urlを設定
                var api_key = '[Face++のAPIキー]'
                var api_secret = '[Face++のAPIシークレット]';
                var url = 'https://apius.faceplusplus.com/detection/detect' + '?api_key=' + api_key + '&api_secret=' + api_secret;

                //データをセット
                var formData = new FormData();
                formData.append('img', blob);

                //非同期通信開始
                $.ajax({
                        url: url,
                        type: 'POST',
                        data: formData,
                        contentType: false,
                        processData: false,
                        success: func,
                        error: errFunc
                 });
        };

        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 = { "face" : [] };

                        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);

                                var i;
                                for (i = 0; i < faceData['face'].length; i++) {
                                        var facePos = faceData['face'][i]['position'];
                                        var posX = w * 0.01 * facePos['center']['x'];
                                        var posY = h * 0.01 * facePos['center']['y'];
                                        var width = w * 0.01 * facePos['width'];
                                        var height = h * 0.01 * facePos['height'];
                                        ctx.strokeRect(posX - (width / 2), posY - (height / 2), width, height);
                                }

                                if (!sending) {
                                        sending = true;
                                        sendFacePP(canvas, function(data, dataType) {
                                                        console.log(data);
                                                        faceData = data;
                                                        sending = false;
                                                },
                                                function(XMLHttpRequest, textStatus, errorThrown) {
                                                        console.log('Error : ' + errorThrown);
                                                        sending = false;
                                                }
                                        );
                                }

                        };
                        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="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
	<script type="text/javascript">

	$(function() {
	var sendFacePP = function(canvas, func, errFunc) {
	//ここから画像のバイナリ化
	var can = canvas.toDataURL();
	// Data URLからBase64のデータ部分のみを取得
	var base64Data = can.split(',')[1];
	// base64形式の文字列をデコード
	var data = window.atob(base64Data);
	var buff = new ArrayBuffer(data.length);
	var arr = new Uint8Array(buff);

	// blobの生成
	for(var i = 0, dataLen = data.length; i < dataLen; i++){
	arr[i] = data.charCodeAt(i);
	}
	var blob = new Blob([arr], {type: 'image/png'});

	//ここから画像データ送信
	//urlを設定
	var api_key = '[Face++のAPIキー]'
	var api_secret = '[Face++のAPIシークレット]';
	var url = 'https://apius.faceplusplus.com/detection/detect' + '?api_key=' + api_key + '&api_secret=' + api_secret;

	//データをセット
	var formData = new FormData();
	formData.append('img', blob);

	//非同期通信開始
	$.ajax({
	url: url,
	type: 'POST',
	data: formData,
	contentType: false,
	processData: false,
	success: func,
	error: errFunc
	});
	};

	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 = { "face" : [] };

	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);

	var i;
	for (i = 0; i < faceData['face'].length; i++) {
	var facePos = faceData['face'][i]['position'];
	var posX = w * 0.01 * facePos['center']['x'];
	var posY = h * 0.01 * facePos['center']['y'];
	var width = w * 0.01 * facePos['width'];
	var height = h * 0.01 * facePos['height'];
	ctx.strokeRect(posX - (width / 2), posY - (height / 2), width, height);
	}

	if (!sending) {
	sending = true;
	sendFacePP(canvas, function(data, dataType) {
	console.log(data);
	faceData = data;
	sending = false;
	},
	function(XMLHttpRequest, textStatus, errorThrown) {
	console.log('Error : ' + errorThrown);
	sending = false;
	}
	);
	}

	};
	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>