Edited at

JSで3分でできる「 顔認識 」Shape Detection API(ネット接続も不要)

More than 1 year has passed since last update.


WebAPI使わず「 顔認識 」ができる Shape Detection API とは?

image.png

Shape Detection API は現在最新のChromeブラウザで動作確認できるJavaScriptAPIです。

Shape Detection APIには、Face Detectionと Barcode Detection(QRコードも) の2つが用意されています。

(API仕様は https://wicg.github.io/shape-detection-api/#introduction を参照)


動作確認ブラウザ

Chromeバージョン 68.0.3440.106(Official Build) (64 ビット)で動作確認済み。


1. Shape Detection APIを使えるようにChromeの設定変更


1.1 Chromeブラウザで以下URLを開きます。


url

chrome://flags/#enable-experimental-web-platform-features



1.2 開いたら以下画面が表示されます。

「Experimental Web Platform features」をEnabledに変更します。

「RELAUNCH NOW」ボタンでChrome再起動すると「Shape Detection API」が使用できるようになります。

image.png


2. Chromeブラウザで以下ファイルを開きます。

注意)http通信で表示してください。


index.html

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Face Detection API sample</title>
</head>
<body>

<img src="***顔写真のある画像を指定***" id="image">
<canvas id="canvas"></canvas>

<script>
const image = document.getElementById('image');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let scale = 1;

image.onload = function() {
canvas.width = image.width; //Canvasを画像と同じ大きさにする
canvas.height = image.height; //Canvasを画像と同じ大きさにする
ctx.drawImage(image,
0, 0, image.width, image.height,
0, 0, canvas.width, canvas.height);
scale = canvas.width / image.width;
detect(); //追加:読み込み完了後に写真に四角い線を描画する
};

function detect() {
if (window.FaceDetector == undefined) {
console.error('Face Detection not supported');
return;
}
const faceDetector = new FaceDetector();
faceDetector.detect(image)
.then(faces => {
ctx.lineWidth = 2;
ctx.strokeStyle = 'red';
for (let face of faces) {
ctx.rect(Math.floor(face.boundingBox.x * scale),
Math.floor(face.boundingBox.y * scale),
Math.floor(face.boundingBox.width * scale),
Math.floor(face.boundingBox.height * scale));
ctx.stroke();
console.log(face);
}
})
.catch((e) => {
console.error("Boo, Face Detection failed: " + e);
});
}

</script>
</body>

</html>


(サンプルコードは https://paul.kinlan.me/face-detection/ を参照)


3. サンプルコード

サンプルコードは上記リンク先「paul.kinlan.me」のを参考にしました。

一部動作しない箇所があったので、追加・変更してあります。


追加・変更箇所

・ face.boundingBox.x の「boundingBox」がプロパティパスで必要でした。

 ※もとのコードには記述はありませんでした。
・detect();をimage.onload内に記述
・canvas.width = image.width; のようにimageとcanvasが同サイズになるよう追加


感想

こんなに簡単にできるなんてびっくりです〜「顔に画像」のせたりしても面白いかもしれませんね。

Editor’s Draft, 4 April 2018 と記載されてるので、勧告まではまだですが今後が楽しみなAPIです。他のJavaScriptAPIもどんどん試していきたいですね。