APIとは、Googleの機械学習モデルを使用した画像認識サービスのことです。APIを利用する場合はそういった知識は必要ありません。APIのURLに対して、base64エンコードした画像データ(※1)と画像検知の種別(OCRなのか、顔検知なのか等)をPOSTするだけで、画像に写っているモノや状況を分析してくれます。人間の顔が写っている画像を顔検知機能で処理した場合、画像内での顔や目鼻口の位置情報や、顔の表情から感情の予測結果を返してくれます。base64エンコードした画像データとは、64種類の英数字を使って、それ以外の文字を扱うことの出来ない通信環境にてマルチバイト文字やバイナリデータを扱うためのエンコード方式です。APIとPCのWebカメラを使ったほぼリアルタイムで顔検知するWebアプリを紹介したいと思います。APIはGCPのサービスですので、GCPのプロジェクトが必須です。APIを動かすために、GCPプロジェクトを作成しましょう。プロジェクトとの作成手順は、「初心者のためのGCPプロジェクト始め方入門」を読んで下さい。APIのサービスの利用するには課金設定が必要ですので、自己責任の上でプロジェクトに設定して下さい。APIの利用料金についての詳細は公式ページを確認下さい。APIは課金設定が必要ですが、2016年7月22日時点ではAPIの利用には一定の無料枠が設けられていますので、無料枠内での利用であれば課金設定をしても利用料金はかかりません。APIのサービスを有効化します。※利用する環境によっては、言語設定が異なる場合がありますが、ボタンの配置などは同じになっています。ご自身の利用する環境に読み替えて作業を行なって下さい。APIのサービスが有効になったかと思います。APIサービスが有効になったら、次はAPIを利用するのに必要なAPIキーを作りましょう。key」を選択します。sites)」はデフォルト値のままです。この2つの項目は後から変更することもできますので、今はデフォルト値のままで良いでしょう。1」が表示されたら、APIキーの作成完了です。Keyの項目にある値がAPIキーの文字列です。APIへのリクエストを行ないますので、コピーしておいて下さい。Webアプリを動かすここまででAPIキーの作成まで完了しました。このAPIキーを使って、まずは今回紹介するアプリがどんなものか、実際にデモ環境で試してみましょう。下記URLのページにアクセスして下さい。APIのAPIキーを作る」で作ったAPIキーの文字列を入力し、「START」ボタンを押すだけです。※APIキーを作成したプロジェクトのリソースを使用します。無料枠を超えますと、APIキーを作成したプロジェクトに利用料金が発生しますので、使い過ぎにご注意下さい。Webカメラが起動後にカメラに人の顔が映ると、下記の画像のように各感情と着帽の推測結果を表示し、人の顔の位置を四角い枠で囲うようになります。このアプリは”ほぼ”リアルタイムなので、人の顔を検知して、四角く囲うまでに多少のタイムラグがあります。APIの顔検知機能は、画像内の顔や目、鼻などのパーツの座標位置、表情から読み取った感情の情報を返してくれます。※氏名などの個人情報に属するものは返しませんので、ご注意ください。返してくれる情報の詳細は公式ページを見たほうが早いかと思いますので、下記ページをご覧ください。APIの返却値を置き換えて表示しています。解説前に、一点注意事項ですが、今回はコードの全文は解説しません。主要な処理についてのみ解説します。コードの全文が知りたい方は、こちらから確認することができます。※このアプリは、必要なCSSやJavascriptは全てCDN(※2)で読み込んでいるため、HTMLファイル一つで動作していますので、コピペするだけで動きます。Network)の略称。コンテンツをネット経由で配信するために最適化されたネットワークのことです。次はWebアプリのコードを解説したいと思います。処理は大きく下記4工程に分かれます。Webカメラを起動する「near-realtime-face-detection.html」の46行目~95行目に書いています。$scope.startFilming関数から処理は始まります。Webカメラ対応かどうか確認します。Webカメラでの撮影開始します。startFilming関数は「START」ボタンのクリックイベントになっています。{alert("Webカメラ未対応のブラウザです。Webカメラ起動中の場合は処理は行ないません。videoのソースにそのURLを指定します。Webカメラ起動中にフラグを立てます。STEP2の処理を1000ミリ秒間隔で実行するように設定します。onFailSoHard関数はWebカメラが起動が起動できなかった場合のエラー処理です。Webカメラが起動できなければエラーのアラートを出します。alert("Webカメラがないか、未対応のブラウザです。stopFilming関数は「STOP」ボタンのクリックイベントになっています。Webカメラを停止させるためにはvideoエレメントのpause関数を呼びます。Webカメラ対応かどうか確認します。Webカメラでの撮影開始します。startFilming関数は「START」ボタンのクリックイベントになっています。{alert("Webカメラ未対応のブラウザです。Webカメラ起動中の場合は処理は行ないません。videoのソースにそのURLを指定します。Webカメラ起動中にフラグを立てます。STEP2の処理を1000ミリ秒間隔で実行するように設定します。onFailSoHard関数はWebカメラが起動が起動できなかった場合のエラー処理です。Webカメラが起動できなければエラーのアラートを出します。alert("Webカメラがないか、未対応のブラウザです。stopFilming関数は「STOP」ボタンのクリックイベントになっています。Webカメラを停止させるためにはvideoエレメントのpause関数を呼びます。Webカメラの動画のキャプチャ画像を取得する「near-realtime-face-detection.html」の98行目~134行目に書いています。Webカメラの表示エレメントを取得します。Webカメラのビデオの横幅を取得します。Webカメラのビデオの縦幅を取得します。顔を四角で囲う枠を表示するcanvasの横幅にWebカメラの横幅を設定します。顔を四角で囲う枠を表示するcanvasの縦幅にWebカメラの縦幅を設定します。Webカメラのキャプチャ画像の生成用非表示canvasの横幅にWebカメラの横幅を設定します。Webカメラのキャプチャ画像の生成用非表示canvasの縦幅にWebカメラの縦幅を設定します。前回キャプチャした時の四角い枠の画像が残っているので、描画をクリアします。Webカメラのキャプチャ画像を非表示canvasに描画します。キャプチャ画像で顔検知処理に渡します。Webカメラの表示エレメントを取得します。Webカメラのビデオの横幅を取得します。Webカメラのビデオの縦幅を取得します。顔を四角で囲う枠を表示するcanvasの横幅にWebカメラの横幅を設定します。顔を四角で囲う枠を表示するcanvasの縦幅にWebカメラの縦幅を設定します。Webカメラのキャプチャ画像の生成用非表示canvasの横幅にWebカメラの横幅を設定します。Webカメラのキャプチャ画像の生成用非表示canvasの縦幅にWebカメラの縦幅を設定します。前回キャプチャした時の四角い枠の画像が残っているので、描画をクリアします。Webカメラのキャプチャ画像を非表示canvasに描画します。キャプチャ画像で顔検知処理に渡します。APIのURLにPOSTする「near-realtime-face-detection.html」の141行目~204行目に書いています。画像データが無ければアラートを表示して終了します。alert("キャプチャデータがありません。APIへのリクエストデータを作成。imageのcontextにBase64エンコードした画像データを設定します。featuresのtypeに顔検知機能の値である'FACE_DETECTION'を設定します。typeを変えることによって、ロゴやOCRなどの他の機能を使うことができます。featuresのmaxResultsには1以上の数値を設定しましょう。APIのエンドポイントにPOSTします。顔を囲う四角い枠を描画する。頭を含む顔全体を認識できなかったら、頭を含まない顔の部分だけの座標情報を取得します。STEP4の処理になります。画像データが無ければアラートを表示して終了します。alert("キャプチャデータがありません。APIへのリクエストデータを作成。imageのcontextにBase64エンコードした画像データを設定します。featuresのtypeに顔検知機能の値である'FACE_DETECTION'を設定します。typeを変えることによって、ロゴやOCRなどの他の機能を使うことができます。featuresのmaxResultsには1以上の数値を設定しましょう。APIのエンドポイントにPOSTします。顔を囲う四角い枠を描画する。頭を含む顔全体を認識できなかったら、頭を含まない顔の部分だけの座標情報を取得します。STEP4の処理になります。顔の座標位置を取り出し、画面に描画する「near-realtime-face-detection.html」の206行目~238行目に書いています。顔を囲む4点座標を取り出します。4点の位置情報が取れたら、各座標間に線を描画します。座標が取れなかったら、描画しません。顔を囲む4点座標を取り出します。4点の位置情報が取れたら、各座標間に線を描画します。座標が取れなかったら、描画しません。1;}まとめ以上で誰でも作れるほぼリアルタイムで顔検知を行なうWebアプリの説明は終わりです。APIを使えば、簡単に作れますね。APIには顔検知機能以外にも、物体検知やOCRなどの機能もあるのでいろいろなアプリに利用できます。物体検知をやりたい場合は、下記のように工程3の$scope.faceDetection関数で作成しているリクエストデータのrequests[0].featurest[0].typeの値に「LABEL_DETECTION」を指定して、顔検知で使用したURLと同じURLにリクエストを投げるだけです。※返却値は、指定した機能によって異なりますので、その他OCR機能など詳細は公式ドキュメントを確認して下さい。APIという音声認識サービスもあり、今後ますますGoogleの機械学習分野のサービスが充実してくるのではないかと思います。当社では当APIやGCPの各種機械学習サービスを利用したシステム開発を請け負っておりますので、「こんなこと出来る?」レベルでも構いませんので、是非お気軽にご相談ください。新しいRPCフレームワーク、gRPCをGoで試してみる。