カメラを利用したアプリを作って约1000人で游んだ话
- 2. Profile. ~ 2015/08 istyle.inc テクノロジー本部 R&D 部技術開発部 チーフエンジニア 久保田 賢二朗 ● PHP(Laravel/Phalcon) ● JavaScript(Vue.js,/Svelte) ● Golang ● HHVM/Hack kenjiro kubota
- 5. なぜ作ることになったのか
- 9. ● 多く笑顔を撮った人 ● 多く撮られた人 の二部門の上位を目指す。 ~ ルール ~ 制限時間は10分
- 11. 利用したもの
- 15. ● Vue CLI ● Vue Router ● Vuex ● Vuetify ● qrcode.vue ● vue-qrcode-reader ● @vue/cli-plugin-pwa clmtrackr
- 16. clmtrackr https://github.com/auduno/clmtrackr JavaScriptのフェイストラッキングライブラリ。以下の表 情認識もできる。 ● 怒り ● 嫌悪 ● 恐れ ● 悲しみ ● 驚き ● 喜び 今回はこの中の「喜び」の数値を利用し、喜び値が上がっ たタイミングでシャッターを切る
- 17. clmtrackrを実際に使ってみて??? ● 眉毛のラインまで判定するのでメガネ?前髪が長いなど、遮るものがあると判定 がされない ● フェイスラインまで判定するので頬を覆うような髪型が（同上 ● 固定されたWebカメラなどでは精度が良いが、スマホカメラだと動きが激しいの で認識が悪い ● 判定できる対象は1つなので複数人同時に写っててもどれかが判定されるだけ ● ↑のように実は判定が厳しいので閾値をゆるくしてガバガバ判定にしてました！
- 19. 奥别产搁罢颁の扱い
- 20. 奥别产搁罢颁の扱い
- 21. 奥别产搁罢颁の扱い
- 26. まとめ
- 27. ● Vueには豊富なライブラリや知見に溢れているのでググれば 大抵なんとかなります。 ● VueCLIのおかげでWebpackの設定で四苦八苦することがな かった（規模も小さいアプリだったのでほぼ初期設定でOK） ● WebRTCは結構手軽に扱えました。ブラウザでデバイスの情 報を利用するのは面白いです。 ● Firebaseがすごい。
- 28. おまけ
- 31. smile score > 1.0 smile score > 0.2 ※写真はぼかし加工しています。
- 32. スコアの分布
- 34. thanks:)