JavaScript
Chrome
api
顔認識
ShapeDetectionAPI

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

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もどんどん試していきたいですね。