ブラウザの進化について考える

どんな進化？

WebAssemblyってどんな技術？

Emscriptenというコンパイラで、CやC++から吐き出されるLLVMビットコードを.wasmバイナリに変換し、javascriptでアクセスする、、、感じです。

javascriptが年々活躍の場を広げ、処理速度が求められるようになった結果、より高速に処理を行えるようにするために、あらかじめビルドしたバイナリを呼び出せるようにした実験的な試みです。


以前社内でService Workerのネタで勉強会をした時にも話をしましたが、

WebAssemblyで画像処理をやってみる

ブラウザで動くOpenCVでできること

よくわからないラクガキの絵を使ってためしたサンプルだと、いまひとつ効果がわかりづらいですが、、、笑

こんな感じで、画像を、リサイズしたり、回転させたり、いろいろなことができます。

すでにお気づきと思いますが、この記事のメイン画像の通り、顔を認識して、そこを四角でくくることなんかもできるんです。


たまにこういうビジュアル的に楽しい技術は楽しいですよね笑

こんな感じで、ブラウザ上で、OpenCVを使うことで顔認識できることがわかったので、せっかくなので、顔を認識したなにかを作ってみようと思いました

顔認証でログインするものを考えてみる

顔認証するのに必要なこと

①顔をWebカメラで、ブラウザ上にリアルタイムに映す

②映った映像の中から、顔を切り出してサーバに送信する

③サーバでは、送られてきた画像を、あらかじめ用意してある写真と見比べて、同じ人かどうか判断する

①顔をWebカメラで、ブラウザ上にリアルタイムに映す

            navigator.mediaDevices.getUserMedia({ video: true, audio: false })
                .then(function(stream) {
                    video.srcObject = stream;
                    video.play();
                })
                .catch(function(err) {
                    console.log("An error occured! " + err);
                });

映った映像の中から、顔を切り出してサーバに送信する

  faceClassifier = new cv.CascadeClassifier();
  faceClassifier.load('haarcascade_frontalface_default.xml');

 
    let xRatio = videoWidth/size.width;
    let yRatio = videoHeight/size.height;

    for (let i = 0; i < faceVect.size(); i++) {
      let face = faceVect.get(i);
      faces.push(new cv.Rect(face.x, face.y, face.width, face.height));

      if (send) {  
        let dst = new cv.Mat();
        let rect = new cv.Rect(face.x*xRatio, face.y*yRatio, face.width*xRatio, face.height*yRatio);
        dst = srcMat.roi(rect);
        
        cv.imshow('canvasOutputSend', dst);
        dst.delete();
        
        var canvas = document.getElementById("canvasOutputSend");

        var base64 = canvas.toDataURL('image/jpeg');        
        var barr, bin, idx, len;
        bin = atob(base64.split('base64,')[1]);
        len = bin.length;
        barr = new Uint8Array(len);
        idx = 0;
        while (idx < len) {
          barr[idx] = bin.charCodeAt(idx);
          idx++;
        }
        blob = new Blob([barr], {type: 'image/jpeg'});
        
        var fd = new FormData();
        fd.append('file', blob);
        fetch('https://localhost.saaske.com/home/face/rcv.php', {
          mode: 'cors',
          method: 'POST',
          body: fd
        })
        .then(function(response){
          return response.json();
        }).then(function(json){
          console.dir(json)
          console.log(json.Similarity);
          document.getElementById('info').innerHTML = 'Similarity '+json.Similarity+'%';
        });

③送られてきた画像データを、あらかじめ用意してある写真とつけあわせして、似てるかどうか判断する

一度試してもらうとわかりますが、かなりの精度です！

$rekognitionObject = new Aws\Rekognition\RekognitionClient([
      'credentials' => array(
          'key'   => 'awsのアクセスキー',
          'secret'=> 'awsのシークレットアクセスキー'
      ),
      'region'    => 'us-east-1', 
      'version'   => '2016-06-27'
]);

$image_org = file_get_contents(dirname(__FILE__).'/tmp/upfile_org.jpeg');
$image = file_get_contents(dirname(__FILE__).'/tmp/upfile.jpeg');
$result = $rekognitionObject->compareFaces([
    'SimilarityThreshold' => 80,
    'SourceImage' => [
          'Bytes' => $image_org
    ],
    'TargetImage' => [
        'Bytes' => $image
    ]
]);

my $similarity;
eval{
	use Paws;
	use Paws::Credential::Explicit;
	use Paws::Rekognition;
	use Paws::Rekognition::CompareFaces;
	use Paws::Rekognition::Image;
	my $rekognition = 
		Paws->service(
			'Rekognition',
			region => 'us-east-1', 
			credentials => 
				Paws::Credential::Explicit->new(
				  access_key => 'awsのアクセスキー',
				  secret_key => 'awsのシークレットアクセスキー'
				)
		);
	use MIME::Base64;
	my $file_org="./tmp/upfile_org.jpeg";

	my $file_org_data = &openfile($file_org);
	$file_org_data = encode_base64(join("",@$file_org_data));
	my $file = "./tmp/upfile.jpeg";
	my $file_data = &openfile($file);
	$file_data = encode_base64(join("",@$file_data));
	    
	my $res = $rekognition->CompareFaces(
		SourceImage =>{Bytes=>$file_org_data},
		TargetImage =>{Bytes=>$file_data}, 
		SimilarityThreshold => 80
	);

	foreach my $face (@{ $res->FaceMatches }) {
		$similarity = $face->{'Similarity'};
		last;
	}
};

Hands-on

このまま使おうとすると読み込みにすごい時間かかって厳しいですね。
実用化する時には、Service Workerなど使ってストレスレスに利用できるようにしていかないと厳しいかなって印象です。


あと、ちなみにこれ、ログインできてしまうと、何が起こったかわからないので、わかりやすいように、顔認証の結果だけを表示する形にだけして、今回は検証を終えました。

一部顔を隠したり、険しい顔をしてみたりしても、認識率にそう差は生まれませんでしたね。

なかなか良い結果だったと思います！

最後に