Sharable

システム&ウェブのシェアラブル

Googleハングアウトで笑顔認識アプリを作ってみた

2013年5月22日

シェアードオブジェクトの勉強としてGoogleハングアウトアプリで笑顔を認識するアプリを作りました。
笑顔の認識自体は勉強の範囲外だったので、大したロジックではありません。
口角のY座標や上唇と下唇のY座標から笑顔を算出しているだけなので、うなずいたりしてもカウント
されてしまう程度のものです。

アプリの趣旨としては、笑顔を認識して笑顔になった回数をカウントします。
それを参加者でシェアして皆のトータル笑顔数を算出する、というものです。

gapi.hangout

使ったGoogleハングアウトAPIは以下の通りです。

  • gapi.hangout.getEnabledParticipants
  • gapi.hangout.getLocalParticipant
  • gapi.hangout.onAppVisible.add
  • gapi.hangout.onParticipantsAdded.add
  • gapi.hangout.av.effects.FaceTrackingData
  • gapi.hangout.av.effects.onFaceTrackingDataChanged.add
  • gapi.hangout.data.onStateChanged.add
  • gapi.hangout.data.getKeys
  • gapi.hangout.data.getValue
  • gapi.hangout.data.submitDelta
  • gapi.hangout.data.setValue

このうちgapi.hangout.data系が今回の目的のシェアオブジェクトです。
gapi.hangout.av.effects系は笑顔の認識に使いました。

gapi.hangout.dataの勉強コード

ではコードを記載しておきます。
ちょっと長いですが、重要なのは色がついてる行です。

https://gist.github.com/soylatte/5625491.js

下記のようにonApiReadyのコールバックとして呼び出します。

gapi.hangout.onApiReady.add(smily());

43行目:gapi.hangout.data.onStateChanged.add(関数)

これが「シェアードオブジェクトに値がセットされたら次の関数を実行する」というイベントリスナー登録です。
うっかりこの中でgapi.hangout.data.submitDeltaやgapi.hangout.data.setValue、gapi.hangout.data.clearValueを実行すると永遠とイベントリスナーが呼び出されてしまうので注意。

104行目: gapi.hangout.data.submitDelta(udpates, removes)

これを実行することで値がシェアードオブジェクトにセットされます。コレの代わりにgapi.hangout.data.setValue(key, value)を利用してもいいのですが、今回は

・「ユーザー別の笑顔」と「合計の笑顔」の2つをシェアードオブジェクトにセットしたかった
・stateChangeEventは1度だけ呼び出したかった

という理由からsubmitDelta関数を利用しました。
setValueで2つ登録すると、stateChangeEventが2回よばれるので、注意してください。

また、setValue(key, value)を使う時に第二引数であるvalueはString型でないとExceptionが吐かれます。
なので、数値を引数に指定する際は

setValue(key, ""+num)

のようにStringに直して、取得する際は

parseInt(getValue(key))

としてStringを数値に戻して利用する必要があります。

Googleハングアウト笑顔認識アプリ

※真顔⇒笑顔、とするのがカウントされるコツです、、、。

Start a Hangout

追記 2013/06/02
いまエラー発生しててどんなに素敵に笑っても認識しません。悪いのはあなたの笑顔ではないですm(__)m

追記 2013/06/03
直りました。APIの場所が変わったみたいで、PATHを変えてあげたら動きました。相変わらず笑顔判定は厳し目ですけども。
変更前=//talkgadget.google.com/hangouts/_/api/hangout.js
変更後=//plus.google.com/hangouts/_/api/v1/hangout.js

このエントリーをはてなブックマークに追加