Googleの機械学習サービス、Vision APIでWebカメラを使って顔検知をやってみた

コード

var HAS_GET_USER_MEDIA = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; // Webカメラ対応かどうか確認します。

// Webカメラでの撮影開始します。
$scope.localMediaStream = null;
// startFilming関数は「START」ボタンのクリックイベントになっています。
$scope.startFilming = function() {
	if (!HAS_GET_USER_MEDIA) {
		alert("Webカメラ未対応のブラウザです。");
		return;
	}
					
	if (!$scope.apiKey) {
		alert("APIキーを入力して下さい")
		return;
	}
		
	if ($scope.filming === true) {
		// Webカメラ起動中の場合は処理は行ないません。
		return;
	}
	
	var webCamera = document.getElementById('webCamera');
	window.URL = window.URL || window.webkitURL;
	navigator.getUserMedia = HAS_GET_USER_MEDIA;
	navigator.getUserMedia({video: true}, function(stream) {
		// WebカメラのLocalMediaStreamオブジェクトからURLを作成し、
		// videoのソースにそのURLを指定します。
		webCamera.src = window.URL.createObjectURL(stream);
		$scope.localMediaStream = stream;
		$scope.filming = true; // Webカメラ起動中にフラグを立てます。
		// STEP2の処理を1000ミリ秒間隔で実行するように設定します。
		$scope.captureProcessId = setInterval($scope.capture,1000)
	// onFailSoHard関数はWebカメラが起動が起動できなかった場合のエラー処理です。
	}, onFailSoHard);
}

// Webカメラ起動エラー時の処理
var onFailSoHard = function(e) {
	// Webカメラが起動できなければエラーのアラートを出します。
	alert("Webカメラがないか、未対応のブラウザです。\nエラー内容:" + e);
	console.log('エラー!', e);
};


// Webカメラの停止
// stopFilming関数は「STOP」ボタンのクリックイベントになっています。
$scope.stopFilming = function() {
	$scope.filming = false;
	if (!$scope.localMediaStream) {
		return;
	}
	// Webカメラを停止させるためにはvideoエレメントのpause関数を呼びます。
	document.getElementById('webCamera').pause()　
}

コード

$scope.capture = function() {
	if ($scope.filming != true || !$scope.localMediaStream) {
		clearInterval($scope.captureProcessId)
		return;
	}

	var webCamera = document.getElementById('webCamera');　// Webカメラの表示エレメントを取得します。
	var vw = webCamera.videoWidth // Webカメラのビデオの横幅を取得します。
	var hw = webCamera.videoHeight // Webカメラのビデオの縦幅を取得します。
	$("#webCameraPic").attr("width", vw);// 顔を四角で囲う枠を表示するcanvasの横幅にWebカメラの横幅を設定します。
	$("#webCameraPic").attr("height", hw);// 顔を四角で囲う枠を表示するcanvasの縦幅にWebカメラの縦幅を設定します。
	$("#webCameraPicTemp").attr("width", vw);// Webカメラのキャプチャ画像の生成用非表示canvasの横幅にWebカメラの横幅を設定します。
	$("#webCameraPicTemp").attr("height", hw);// Webカメラのキャプチャ画像の生成用非表示canvasの縦幅にWebカメラの縦幅を設定します。

	var position = $("#webCamera").position();
	var scrollTop = $("#result").scrollTop();
	$("#webCameraPic").css("top", position.top + scrollTop);

	var webCameraPicTemp = document.getElementById('webCameraPicTemp');
	var webCameraPicTempCtx = webCameraPicTemp.getContext('2d');
	webCameraPicTempCtx.clearRect(0, 0, webCameraPicTemp.width, webCameraPicTemp.height);

	if ($scope.localMediaStream) {
		// 前回キャプチャした時の四角い枠の画像が残っているので、描画をクリアします。
		var webCameraPic = document.getElementById('webCameraPic');
		var webCameraPicCtx = webCameraPic.getContext('2d');
		webCameraPicCtx.clearRect(0, 0, webCameraPic.width, webCameraPic.height);

		// Webカメラのキャプチャ画像を非表示canvasに描画します。
		webCameraPicTempCtx.drawImage(webCamera, 0, 0, webCameraPicTemp.width, webCameraPicTemp.height);
		var base64FileData = webCameraPicTemp.toDataURL('image/webp');

		// キャプチャ画像で顔検知処理に渡します。
		$scope.faceDetection('webCameraPic', base64FileData.split("base64,")[1]);
	}
}

コード

// 顔検知処理
$scope.faceDetection = function(canvasId, base64FileData) {
	if (!base64FileData) {
		// 画像データが無ければアラートを表示して終了します。
		alert("キャプチャデータがありません。")
		return;
	}
	$scope.canvasId = canvasId;
	
	// Vision APIへのリクエストデータを作成。
	// imageのcontextにBase64エンコードした画像データを設定します。
	// featuresのtypeに顔検知機能の値である'FACE_DETECTION'を設定します。
	// typeを変えることによって、ロゴやOCRなどの他の機能を使うことができます。
	// featuresのmaxResultsには1以上の数値を設定しましょう。
	var data = {
			"requests":[
				{
					"image":{
						"content": base64FileData
					},
					"features":[
						{
							"type":"FACE_DETECTION",
							"maxResults":100
						}
					]
				}
			],
		}

	// Vision APIのエンドポイントにPOSTします。
	$http.post(VISION_API_URL + $scope.apiKey, data).success(function(data, status, headers, config) {
		console.log(data)

		var cvs = document.getElementById($scope.canvasId);
		var ctx = cvs.getContext("2d");
				
		var responses = data.responses;
		angular.forEach(responses, function(response, key) {
			$scope.faceAnnotations = response.faceAnnotations;
			if (!$scope.faceAnnotations) {							 
				angular.forEach($scope.faceAnnotations, function(faceAnnotation, key) {
					// 頭を含む座標情報を取得する
					var boundingPolyVertices = faceAnnotation.boundingPoly.vertices;
					// 顔を囲う四角い枠を描画する。
					var result = drawLine(boundingPolyVertices, ctx,		 $scope.colors[key]["VERY_LIKELY"]);
					if (result == 1) {
						// 頭を含む顔全体を認識できなかったら、頭を含まない顔の部分だけの座標情報を取得します。
						var fdBoundingPolyVertices = faceAnnotation.fdBoundingPoly.vertices;
						// STEP4の処理になります。
						result = drawLine(fdBoundingPolyVertices, ctx, 　$scope.colors[key]["VERY_LIKELY"]);
					}
				})
			}
		})
		
		$scope.canvasId = null;
						
	}).error(function(data, status, headers, config) {
		console.log("error")
		console.log(data)
		$scope.canvasId = null;
	});
}

コード

function drawLine(vertices, ctx, strokeStyle) {
	// 顔を囲む4点座標を取り出します。
	var x1 = vertices[0].x;
	var y1 = vertices[0].y;
	var x2 = vertices[1].x;
	var y2 = vertices[1].y;
	var x3 = vertices[2].x;
	var y3 = vertices[2].y;
	var x4 = vertices[3].x;
	var y4 = vertices[3].y;
					
	if (x1 && y1 && x2 && y2 && x3 && y3 && x4 && y4) {
		// 4点の位置情報が取れたら、各座標間に線を描画します。
		ctx.beginPath();
			
		ctx.moveTo(x1, y1);
		ctx.lineTo(x2, y2);
		ctx.moveTo(x2, y2);
		ctx.lineTo(x3, y3);
		ctx.moveTo(x3, y3);
		ctx.lineTo(x4, y4);
		ctx.moveTo(x4, y4);
		ctx.lineTo(x1, y1);
			
		ctx.lineWidth = 3;
		ctx.strokeStyle = strokeStyle;
		ctx.stroke();
		return 0;
	}

	// 座標が取れなかったら、描画しません。
	return 1;
}

コード

var data = {
		"requests":[
			{
				"image":{
					"content": base64FileData
				},
				"features":[
					{
						"type":"LABEL_DETECTION",
						"maxResults":100
					}
				]
			}
		]
	}