*

Googleの機械学習サービス、Vision APIでWebカメラを使って顔検知をやってみた

公開日: : 投稿者: 機械学習

Googleの機械学習サービス、Vision APIでWebカメラを使って顔検知をやってみた
最近ではAlphaGoの目覚ましい活躍などで「機械学習」という単語が世間をたびたび賑わせていますが、みなさんは「Google Cloud Vision API」(以降「Vision API」と略称)を知っているでしょうか?
Vision APIとは、Googleの機械学習モデルを使用した画像認識サービスのことです。
公式URL: https://cloud.google.com/vision/

「機械学習」と聞くと深層学習といったような専門的な知識が必要と思われるかもしれませんが、Vision APIを利用する場合はそういった知識は必要ありません。
Vision APIはGoogleが学習させた機械学習モデルを利用するだけなので、ユーザはVision APIのURLに対して、base64エンコードした画像データ(※1)と画像検知の種別(OCRなのか、顔検知なのか等)をPOSTするだけで、画像に写っているモノや状況を分析してくれます。
例えば、人間の顔が写っている画像を顔検知機能で処理した場合、画像内での顔や目鼻口の位置情報や、顔の表情から感情の予測結果を返してくれます。

※1) base64エンコードした画像データとは、64種類の英数字を使って、それ以外の文字を扱うことの出来ない通信環境にてマルチバイト文字やバイナリデータを扱うためのエンコード方式です。

今回は、そんなVision APIを利用できるようになるまでの説明と、誰でも実現可能な、Vision APIとPCのWebカメラを使ったほぼリアルタイムで顔検知するWebアプリを紹介したいと思います。

GCPプロジェクトを作成する

Vision APIはGCPのサービスですので、GCPのプロジェクトが必須です。
まずはVision APIを動かすために、GCPプロジェクトを作成しましょう。
プロジェクトとの作成手順は、「初心者のためのGCPプロジェクト始め方入門」を読んで下さい。

Vision APIのサービスの利用するには課金設定が必要ですので、自己責任の上でプロジェクトに設定して下さい。
また、Vision APIの利用料金についての詳細は公式ページを確認下さい。
※Vision APIは課金設定が必要ですが、2016年7月22日時点ではAPIの利用には一定の無料枠が設けられていますので、無料枠内での利用であれば課金設定をしても利用料金はかかりません。

Vision APIのサービスを有効化する

GCPプロジェクトを作成したら、次はVision APIのサービスを有効化します。
※利用する環境によっては、言語設定が異なる場合がありますが、ボタンの配置などは同じになっています。適宜、ご自身の利用する環境に読み替えて作業を行なって下さい。

プロジェクトのダッシュボード画面左上のメニューアイコンをクリックする

2.1 menu icon click_v2

メニューから「API Manager」を選択する

2.2 select_api_manager

 

API一覧画面の検索窓に「vision」と入力し、APIを検索する

2.3 api-search-box

APIの検索結果から「Google Cloud Vision API」を選択する

2.4 vision api select-v2

Vision APIのサービスを有効化する

2.5 vision-api-enable

Vision APIのサービスが有効になっているか画面から確認する

2.7 vision-api-enable-success

以上の手順でVision APIのサービスが有効になったかと思います。

Vision APIのAPIキーを作る

Vision APIサービスが有効になったら、次はAPIを利用するのに必要なAPIキーを作りましょう。

「API Manager」の「Credentials」画面へ遷移する

3.1 credentials-click

作成する資格情報でAPIキーをクリックする

3.2 api-key-click

APIキーの種類を選択する

ほぼリアルタイムで顔検知するWebアプリはVision APIをブラウザのJavascriptから使用するので、「Browser key」を選択します。

3.3 browser-key-click

APIキーを作成する

3.4 create

「Name」と「Accept requests from these HTTP referrers (web sites)」はデフォルト値のままです。
この2つの項目は後から変更することもできますので、今はデフォルト値のままで良いでしょう。

確認

下記の画像のように「Creadentials」の一覧にName「Browser key 1」が表示されたら、APIキーの作成完了です。
3.5 key list v2

Keyの項目にある値がAPIキーの文字列です。
今後はこのKeyの文字列を使ってVision APIへのリクエストを行ないますので、コピーしておいて下さい。

Webアプリを動かす

ここまででAPIキーの作成まで完了しました。
このAPIキーを使って、まずは今回紹介するアプリがどんなものか、実際にデモ環境で試してみましょう。
下記URLのページにアクセスして下さい。

URL: https://near-realtime-face-detection-dot-apps-gcp-sample.appspot.com/near-realtime-face-detection.html

使い方は、下記画面が表示されたら、「APIキー」の入力欄に「3.Vision APIのAPIキーを作る」で作ったAPIキーの文字列を入力し、「START」ボタンを押すだけです。
※APIキーを作成したプロジェクトのリソースを使用します。無料枠を超えますと、APIキーを作成したプロジェクトに利用料金が発生しますので、使い過ぎにご注意下さい。

4.1

Webカメラが起動後にカメラに人の顔が映ると、下記の画像のように各感情と着帽の推測結果を表示し、人の顔の位置を四角い枠で囲うようになります。
このアプリは”ほぼ”リアルタイムなので、人の顔を検知して、四角く囲うまでに多少のタイムラグがあります。

4.2

Vision APIの顔検知機能は、画像内の顔や目、鼻などのパーツの座標位置、表情から読み取った感情の情報を返してくれます。
※氏名などの個人情報に属するものは返しませんので、ご注意ください。
返してくれる情報の詳細は公式ページを見たほうが早いかと思いますので、下記ページをご覧ください。
URL: https://cloud.google.com/vision/reference/rest/v1/images/annotate#FaceAnnotation

また、感情の推測結果の%表示は、下記表のようにVision APIの返却値を置き換えて表示しています。

Vision APIからの実際の返却値 Webアプリ上の表示値
UNKNOWN 測定不能
VERY_UNLIKELY 可能性1%
UNLIKELY 可能性25%
POSSIBLE 可能性50%
LIKELY 可能性75%
VERY_LIKELY 可能性99%

Webアプリのコード解説

解説前に、一点注意事項ですが、今回はコードの全文は解説しません。
主要な処理についてのみ解説します。
コードの全文が知りたい方は、こちらから確認することができます。
※このアプリは、必要なCSSやJavascriptは全てCDN(※2)で読み込んでいるため、HTMLファイル一つで動作していますので、コピペするだけで動きます。

※2) コンテンツデリバリネットワーク(Content Delivery Network)の略称。コンテンツをネット経由で配信するために最適化されたネットワークのことです。

では、次はWebアプリのコードを解説したいと思います。処理は大きく下記4工程に分かれます。

工程1. Webカメラを起動する
工程2. Webカメラの動画のキャプチャ画像を取得する
工程3. キャプチャ画像をbase64エンコードし、Vision APIのURLにPOSTする
工程4. 顔の座標位置を取り出し、画面に描画する

工程1. Webカメラを起動する

near-realtime-face-detection.html」の46行目~95行目に書いています。

$scope.startFilming関数から処理は始まります。

工程2. Webカメラの動画のキャプチャ画像を取得する

near-realtime-face-detection.html」の98行目~134行目に書いています。

工程3. キャプチャ画像をbase64エンコードし、Vision APIのURLにPOSTする

near-realtime-face-detection.html」の141行目~204行目に書いています。

工程4. 顔の座標位置を取り出し、画面に描画する

near-realtime-face-detection.html」の206行目~238行目に書いています。

まとめ

以上で誰でも作れるほぼリアルタイムで顔検知を行なうWebアプリの説明は終わりです。
Vision APIを使えば、簡単に作れますね。
Vision APIには顔検知機能以外にも、物体検知やOCRなどの機能もあるのでいろいろなアプリに利用できます。
例えば、物体検知をやりたい場合は、下記のように工程3の$scope.faceDetection関数で作成しているリクエストデータのrequests[0].featurest[0].typeの値に「LABEL_DETECTION」を指定して、顔検知で使用したURLと同じURLにリクエストを投げるだけです。
※返却値は、指定した機能によって異なりますので、その他OCR機能など詳細は公式ドキュメントを確認して下さい。

また、Googleが提供している機械学習のAPIとしては2016年7月20日現在Limited Previewではありますが、Google Cloud Speech APIという音声認識サービスもあり、今後ますますGoogleの機械学習分野のサービスが充実してくるのではないかと思います。

当社では当APIやGCPの各種機械学習サービスを利用したシステム開発を請け負っておりますので、「こんなこと出来る?」レベルでも構いませんので、是非お気軽にご相談ください。

 

 

関連記事

TensorFlowによる機械学習解説シリーズ -その1 TensorFlowの始め方-

コンピュータ囲碁プログラム「AlphaGo」が韓国のプロ棋士に4勝1敗で勝ち越したことで、最近ではよ

記事を読む

機械学習最前線!Cloud Machine Learning を始めてみた!

最近、機械学習・深層学習というワードをよく耳にするようになりましたね。機械学習は知っているけど、

記事を読む

ついにGAになった機械学習による音声認識サービス Cloud Speech APIを試してみよう!

みなさん、Cloud Speech APIというサービスをGoogleが出していることはご存

記事を読む

CLOUD VIDEO INTELLIGENCE APIのデモがあったので早速試してみた

動画の機械学習API「Cloud Video Intelligence API」が発表! Go

記事を読む

GAE/GOでVideo Intelligence APIを操作してみた!!〜事前準備編〜

先週のGCP Next 17’でGoogleから新しい機械学習APIが発表されました!その名

記事を読む

PAGE TOP ↑