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

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

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