Vonage Video APIを活用してセキュアな顔認証アプリケーションを構築


こんにちは、Vonage Japan合同会社Customer Solutions Architectの宮沢です。

さて、Vonage Video APIとサードパーティAI連携でさまざまな拡張が柔軟にできます。今回はMicrosoft AIとの連携で顔認証アプリケーション構築の例について、わたくしVonage Customer Solutionチームの同僚がこちら[Vonage Blog](https://learn.vonage.com)にポストしてくれましたので、みなさんにもご紹介します。

#はじめに
先進的なデジタルトランスフォーメンションの重要な要素技術である顔認証は、多くの産業分野で生産性を向上させ、幅広い産業分野にすでに応用が始まっています。
その例として、
1. ホスピタリティ（航空やホテル）
    - ホテルのチェックイン時に、携帯電話やカメラを使って支払い
    - フライトのチェックインと搭乗手続き
2. 遠隔医療
    - 手作業での書類作成を最小限にするために、緊急サービスが必要な患者を識別する
    - 病院管理サービスでは、医師、患者、看護師の顔をスクリーニングすることで、ミスコミュニケーションを防ぎ、一貫した情報を提供
3. カスタマーサービス
    - ユーザー認証
    - 詐欺防止
4. 投票有権者登録
    - 有権者の不正行為への対応

あらゆるユースケースにおいて、[Vonage Video API](https://tokbox.com/account/user/signup)を活用することで顔認証を可能にし、非接触型サービスを推進すると同時に、ユーザーデータや個人情報を保護しつつ、安全で安心なカスタムソリューションの提供を支援します。

ここではVonage Video APIの顔認証への応用例をご紹介します。Vonage Video APIプラットフォームを使用した顔認証をすぐに使用できる[サンプルコード](https://gist.github.com/rktalusani/3b0bb3c61bc6d5b6020612f189e644fe)を使用して開発時間を短縮することができます。

# 概念
Video APIを使用して優れた顔認証アプリケーションを構築するために、[サンプルコードスニペット](https://gist.github.com/rktalusani/3b0bb3c61bc6d5b6020612f189e644fe)に記載されているメソッドとオブジェクトを使用します。詳細は、Microsoft face APIと連携しているopentokのリファレンスコードをご覧ください。

# テクノロジーと前提条件
- Opentok JS API
- Microsoft face API
- [Vonage Video APIアカウント](https://id.tokbox.com/login)

#サブスクライバー画像のスクリーンショットをサーバにアップロード
前述の適正なユースケースでは、顧客はサインアッププロセス中に自分の写真を提供し、その後写真はバックエンドに保存されます。顧客がビデオ通話に参加すると、Vonage Video APIを使用して顧客のビデオストリームのスクリーンショットを取得し、サーバにアップロードして顔の検出を行います。

以下のコードでは、`subscriber.getImgData()`を使ってビデオストリームの画面を取得し、バックエンドにアップロードしています。

```javascript
function sendScreenShot() {
    var imgdata = undefined;
    if (subscriber) {
        imgdata = subscriber.getImgData();
    }
    if (imgdata != undefined) {
        try {
            var blob = this.b64toBlob(imgdata, "image/png");
            let formData = new FormData();
            formData.append('customer', blob);
            let res = await $HTTPDEMO.post('/faceIDDemo.php',
                formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }

                }
            );
            console.log(res.data);
            if (res.data.status != "success") {
                alert("Error uploading the file");
            } else {

            }
        } catch (error) {
            alert("error posting screenshot");
            console.log(error);
        }
    }
}
```
ステップ 1: カスタマーの写真をアップロード (jpg)
ステップ 2: ビデオコールの開始

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2041399/bca22bd8-065f-d70f-5b0f-d5f5694b6926.png)

`b64toBlob`は、`sendScreenShot`関数から呼び出されるヘルパーメソッドで、base64文字列をバイト配列に変換し、`multipart/form-data`としてサーバに投稿できるようにします。

```javascript
function b64toBlob(b64Data, contentType, sliceSize) {
    contentType = contentType || '';
    sliceSize = sliceSize || 512;
    var byteCharacters = atob(b64Data);
    var byteArrays = [];
    for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        var slice = byteCharacters.slice(offset, offset + sliceSize);
        var byteNumbers = new Array(slice.length);
        for (var i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }
        var byteArray = new Uint8Array(byteNumbers);
        byteArrays.push(byteArray);
    }
    var blob = new Blob(byteArrays, {
        type: contentType
    });
    return blob;
}
```
# Microsoft APIを使用してFaceIDを識別し、照合結果を比較

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2041399/ee700ea7-1663-9479-1951-ba3fccd48501.png)

# OpenTokでFaceIDを検出
`detectFace`メソッドは、サーバ側で実行されます。このメソッドは、与えられた画像から顔の特徴を検出して、識別子を返します。このメソッドは、サインアップ時にお客様の画像がアップロードされたとき（id1）と、ビデオストリームのスクリーンショットがアップロードされたとき（id2）の2回、呼び出されます。

以下は当該処理のコードスニペットのサンプルです

```javascript
function detectFace($img){
        global $faceid_endpoint, $data_dir_url,$faceid_key;

        $client = new GuzzleHttp\Client([
            'base_uri' => $faceid_endpoint
        ]);

        $resp = $client->request('POST', 'face/v1.0/detect?recognitionModel=recognition_02&detectionModel=detection_02', [
            'headers' => [
                'Content-Type' => 'application/json',
                'Ocp-Apim-Subscription-Key' => $faceid_key
            ],
            'json' => ['url'=> $data_dir_url.$img]
        ]);

        $json = json_decode($resp->getBody(),true);
       
        return $json[0];
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2041399/9e052fb7-f46b-d188-6a9d-8bca9f173209.png)

# OpenTokでFaceIDを認証

最後の認証では、`verifyFace()`メソッドを使用し、インプットとして画像IDのid1とid2を渡します。Microsoft face APIは、この2つの顔(id1 & id2)を比較し、登録時に提出された写真とスナップショットを比較して、一致/不一致とスコアを含む結果を提供します。

```javascript
function verifyFace($id1,$id2){
        global $faceid_endpoint, $data_dir_url,$faceid_key;
        $client = new GuzzleHttp\Client([
            'base_uri' => $faceid_endpoint
        ]);

        $resp = $client->request('POST', 'face/v1.0/verify', [
            'headers' => [
                'Content-Type' => 'application/json',
                'Ocp-Apim-Subscription-Key' => $faceid_key
            ],
            'json' => [
                'faceid1'=>$id1,
                'faceid2'=>$id2
            ]
        ]);

        return $resp->getBody();
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2041399/a7b43767-cd32-773f-c00f-6194e071312d.png)

# まとめ
Vonageでは、顧客の利益を第一に考えたコアバリューを重視しています。絶え間ないイノベーションにより、私たちは開発者コミュニティに最新かつよりよい機能を提供していきます。
Vonage Video APIは簡単に始めることができますので、[無料アカウントにサインアップ](https://tokbox.com/account/user/signup)して、今すぐVonageが提供するサービスを最大限に活用いただけます。

API機能や開発者向けドキュメント、記事の内容について、皆様からのフィードバックをお待ちしています。[Twitter](https://twitter.com/VonageDev)でお問い合わせいただくか、[VonageコミュニティSlackチャネル](https://developer.vonage.com/community/slack)にご参加ください。

# 参照記事
https://learn.vonage.com/blog/2020/10/21/build-a-secure-facial-id-application-using-the-vonage-video-api/

#連絡先

Vonage Japan合同会社
Mail: sales-japan@vonage.com
URL: https://www.vonagebusiness.jp/communications-apis/