tkm_71のブログ

自分のための備考録みたいなものです。

JavaScriptで顔認識

JavaScript

JavaScriptで顔認識

たまたま、JSで顔認識という以下の記事を見つけたのでどんなものか遊んでみようかと。
JavaScriptで画像の顔認識をする方法【Face Detection】


JSで顔認識を行うようなライブラリをググってみると
jQuery FaceDetection
clmtrackr

などがあるようで。

先ほど、見つけたと書いたJavaScriptで画像の顔認識をする方法【Face Detection】の記事では、前者のライブラリを使用しています。

とりあえずjQuery FaceDetectionのREADMYを読んで以下のコードを作成。

<html>
	<head>
		<meta charset="UTF-8">
		<title>test page</title>
	</head>
	<body>
		<img id="picture" src="./face.jpg">
	</body>
	<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
	<script src="./jquery.facedetection.min.js"></script> 
	<script>
        	$('#picture').faceDetection({
        		complete: function (faces) {
         	   		console.log(faces);
      	  		}
   		 });
	</script> 
</html>

とりあえず顔認識したい画像を「face.jpg」として保存し、このプログラムを
chromeで起動してみる。

Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

すると、上記のようなエラーが。

まあググってみると面倒くさそうな雰囲気が漂っていたので、Firefoxで開いてみたら大丈夫そう。

だけど、なんだか上手く顔検出していない？

結局この状態だと、何がなんだかわからない（結果が配列としてコンソールに出てくるだけなので）

ということ、JavaScriptで画像の顔認識をする方法【Face Detection】の記事からサンプルをいただき実行してみた。

結果として、サンプルについてきた画像を対象に顔認識を行ってみると、外国の可愛い女の子二人組の顔をしっかりと検出し、四角で囲ってくれた。

試しにその他の画像でも顔認識がしっかり行えるか試してみる。

何枚か自分で顔がしっかり写ってそうな画像を拾ってきて試してみたがなかなか認識してくれない…

何枚かやっていると中にはしっかり顔を認識してくれるような画像もあったが、あまり検出精度はよくないようだ。

まあこんなものなのかな、と思いました。