Skip to content

Instantly share code, notes, and snippets.

@mechamogera

mechamogera/Readme.md

Created February 24, 2016 00:56
Show Gist options
  • Save mechamogera/116638835566acc5374b to your computer and use it in GitHub Desktop.
Save mechamogera/116638835566acc5374b to your computer and use it in GitHub Desktop.
Download ZIP
Face++でWebカメラの映像を認識して四角を描くサンプル
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment