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

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


<img width="1173" alt="image.png" src="https://qiita-image-store.s3.amazonaws.com/0/104530/bb917f77-4c5a-b19c-0a13-d99c9ec98aea.png">
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を開きます。 

```text:url
chrome://flags/#enable-experimental-web-platform-features
``` 

###1.2 開いたら以下画面が表示されます。
「Experimental Web Platform features」をEnabledに変更します。
「RELAUNCH NOW」ボタンでChrome再起動すると「Shape Detection API」が使用できるようになります。
<img width="800" alt="image.png" src="https://qiita-image-store.s3.amazonaws.com/0/104530/8889732a-233a-dbdf-50d7-d490399446b8.png">



## 2. Chromeブラウザで以下ファイルを開きます。 
注意）http通信で表示してください。

```html: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)
https://www.youtube.com/channel/UCmMFmjhf1BXB1tlLcbkVRrg