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

Preview:

Citation preview

vol.2

モテるプログラマーJava

Scriptで

になる!

永井 ひろかず

@tabibits FB: nagaihirokazu

株式会社 アラタナ 製品開発・品質管理 マネジャー

(遊び人)

モテたいを真剣に考える

モテない現実

モテない現実

モテると思えない

魅力がない

モテない現実

モテると思えない

魅力がない

モテない現実

モテると思えない

負のスパイラル

モテる装置Java

Scriptで

を作ってみた!

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

使った技術 その①

Web RTC

使った技術 その①

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

使った技術 その①

つまり、 P2PがWEBブラウザアプリで実装できる。

Internet

P2P…サーバーを介さずに直接データのやり取りをする。高速。

使った技術 その①

だけど、実装は結構めんどい。

Internet

A B C

使った技術 その①

だけど、実装は結構めんどい。

Internet

A B C

使った技術 その①

だけど、実装は結構めんどい。

Internet

プライベートアドレスA B C

使った技術 その①

だけど、実装は結構めんどい。

Internet

プライベートアドレス

グローバルアドレス

A B C

使った技術 その①

だけど、実装は結構めんどい。

Internet

プライベートアドレス

グローバルアドレス

A B C

ポート番号で PCを振り分け

使った技術 その①

だけど、実装は結構めんどい。

Internet

プライベートアドレス

グローバルアドレスグローバルアドレスと

ポート番号がわからないと 通信できない。

A B C

ポート番号で PCを振り分け

使った技術 その①

そこで、2台のサーバーを設置

Internet

A B C

使った技術 その①

Internet

A B C

ICEサーバー Signalingサーバー

使った技術 その①

Internet

A B C

ICEサーバー Signalingサーバー

自分の グローバルアドレスと ポート番号を教えてくれ

使った技術 その①

Internet

A B C

ICEサーバー Signalingサーバー

自分の グローバルアドレスと ポート番号を教えてくれ

自分の グローバルアドレスと

ポート番号を相手PCにPushしてくれる

使った技術 その①

Internet

A B C

ICEサーバー Signalingサーバー

Aの G add PortNo

使った技術 その①

Internet

A B C

ICEサーバー Signalingサーバー

Aの G add PortNo

使った技術 その①

Internet

A B C

ICEサーバー Signalingサーバー

Aの G add PortNo

使った技術 その①

Internet

A B C

ICEサーバー Signalingサーバー

Aの G add PortNo

使った技術 その①

めんどい!

使った技術 その①

そんな「めんどい」を 全部肩代わりしてくれるのが、

使った技術 その①

ソースを見る https://github.com/hironagai/peerjs

使った技術 その②

clmTrackr

使った技術 その②

使った技術 その②

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

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/

Recommended