Peer js + clmtrackrでつくるモテるアプリ

1. vol.2

2. モテるプログラマー
JavaScriptで
になる！

3. 永井 ひろかず
@tabibits
FB: nagaihirokazu
株式会社 アラタナ
製品開発・品質管理 マネジャー
(遊び人)

5. モテたいを真剣に考える

10. モテない現実

11. モテない現実
モテると思えない

12. 魅力がない
モテない現実
モテると思えない

13. 魅力がない
モテない現実
モテると思えない
負のスパイラル

14. モテる装置
JavaScriptで
を作ってみた！

15. demo
http://nagai.gehirn.ne.jp/face/index.html

16. 使った技術 その①
Web RTC

17. 使った技術 その①
WebRTC (Web Real-Time
Communication)とはW3Cが提唱する
リアルタイムコミュニケーション用のAPIの
定義で、プラグイン無しでウェブブラウザ
間のボイスチャット、ビデオチャット、ファ
イル共有ができる。 - wikipediaより

18. 使った技術 その①
つまり、
P2PがWEBブラウザアプリで実装できる。
Internet
P2P…サーバーを介さずに直接データのやり取りをする。高速。

19. 使った技術 その①
だけど、実装は結構めんどい。
Internet
A B C

20. 使った技術 その①
だけど、実装は結構めんどい。
Internet
A B C

21. 使った技術 その①
だけど、実装は結構めんどい。
Internet
プライベートアドレスA B C

22. 使った技術 その①
だけど、実装は結構めんどい。
Internet
プライベートアドレス
グローバルアドレス
A B C

23. 使った技術 その①
だけど、実装は結構めんどい。
Internet
プライベートアドレス
グローバルアドレス
A B C
ポート番号で
PCを振り分け

24. 使った技術 その①
だけど、実装は結構めんどい。
Internet
プライベートアドレス
グローバルアドレス
グローバルアドレスと
ポート番号がわからないと
通信できない。
A B C
ポート番号で
PCを振り分け

25. 使った技術 その①
そこで、2台のサーバーを設置
Internet
A B C

26. 使った技術 その①
Internet
A B C
ICEサーバー Signalingサーバー

27. 使った技術 その①
Internet
A B C
ICEサーバー Signalingサーバー
自分の
グローバルアドレスと
ポート番号を教えてくれ
る

28. 使った技術 その①
Internet
A B C
ICEサーバー Signalingサーバー
自分の
グローバルアドレスと
ポート番号を教えてくれ
る
自分の
グローバルアドレスと
ポート番号を相手PCにPush
してくれる

29. 使った技術 その①
Internet
A B C
ICEサーバー Signalingサーバー
Aの
G add
PortNo

30. 使った技術 その①
Internet
A B C
ICEサーバー Signalingサーバー
Aの
G add
PortNo

31. 使った技術 その①
Internet
A B C
ICEサーバー Signalingサーバー
Aの
G add
PortNo

32. 使った技術 その①
Internet
A B C
ICEサーバー Signalingサーバー
Aの
G add
PortNo

33. 使った技術 その①
めんどい！

34. 使った技術 その①
そんな「めんどい」を
全部肩代わりしてくれるのが、

35. 使った技術 その①
ソースを見る
https://github.com/hironagai/peerjs

36. 使った技術 その②
clmTrackr

37. 使った技術 その②

38. 使った技術 その②

39. demo
https://hironagai.github.io/clmtrackr_sample/

40. PEERJS
http://peerjs.com/
clmtrackr
https://github.com/auduno/clmtrackr
https://auduno.github.io/clmtrackr/examples/facedeform.html
顔認証を使ったサービス
https://futureself.orange.com/
http://ava-sessions.com/