Go to Qiita Advent Calendar 2024 Top
LoginSignup
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@mmiyazawa7(Masayuki Miyazawa)inVonage Japan合同会社

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

Last updated at Posted at 2021-12-14

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

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

#はじめに
先進的なデジタルトランスフォーメンションの重要な要素技術である顔認証は、多くの産業分野で生産性を向上させ、幅広い産業分野にすでに応用が始まっています。
その例として、

  1. ホスピタリティ（航空やホテル）
    • ホテルのチェックイン時に、携帯電話やカメラを使って支払い
    • フライトのチェックインと搭乗手続き
  2. 遠隔医療
    • 手作業での書類作成を最小限にするために、緊急サービスが必要な患者を識別する
    • 病院管理サービスでは、医師、患者、看護師の顔をスクリーニングすることで、ミスコミュニケーションを防ぎ、一貫した情報を提供
  3. カスタマーサービス
    • ユーザー認証
    • 詐欺防止
  4. 投票有権者登録
    • 有権者の不正行為への対応

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

ここではVonage Video APIの顔認証への応用例をご紹介します。Vonage Video APIプラットフォームを使用した顔認証をすぐに使用できるサンプルコードを使用して開発時間を短縮することができます。

概念

Video APIを使用して優れた顔認証アプリケーションを構築するために、サンプルコードスニペットに記載されているメソッドとオブジェクトを使用します。詳細は、Microsoft face APIと連携しているopentokのリファレンスコードをご覧ください。

テクノロジーと前提条件

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

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

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

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

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

OpenTokでFaceIDを検出

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

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

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

OpenTokでFaceIDを認証

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

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

まとめ

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

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

参照記事

#連絡先

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

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?