#WebAPI使わず「 顔認識 」ができる Shape Detection API とは？
Shape Detection API は現在最新のChromeブラウザで動作確認できるJavaScriptAPIです。
Shape Detection APIには、Face Detectionと Barcode Detection（QRコードも） の２つが用意されています。
（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」が使用できるようになります。
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もどんどん試していきたいですね。
#◇ Youtubeチャンネル
「遅咲きエンジニア」MicrosoftMVP 山崎
https://www.youtube.com/channel/UCmMFmjhf1BXB1tlLcbkVRrg