1. WebRTC活用事例
WebRTCを使ってこんなものつくりました
Video Chat on The Map
VCMap
WebRTC Meetup Tokyo #3
https://atnd.org/events/53504
2014/08/01 金城 雄
Twitter @youkinjoh
GitHub @youkinjoh
SlideShare @You_Kinjoh
公開版

2. 自己紹介
Twitter @youkinjoh
GitHub @youkinjoh
SlideShare @You_Kinjoh
きんじょう ゆう
金城 雄
最近やっていること
エモいスライドを作って公開。
http://www.slideshare.net/You_Kinjoh/

3. http://vcmap.net/
顔検出
Androidでは
顔検出処理は
重いので、
Offを推奨。
ルーム名
チャット
ルーム名。
物理演算
位置が近くても
重ならないよう
物理演算を
行なう。

4. デモ参加のお願い
WebRTCが
使える環境を
ご準備下さい
(Chrome推奨)

5. 重要
ハウリングを
起こすので、
音量は
切ってください

6. どういうもの?
お互いの位置を
確認しながら
ビデオチャット
できる

7. デモ
以下のURLにアクセスしてください。
for PC
http://bit.ly/rtcpc
for Android
http://bit.ly/rtcsm
同じ場所からアクセスしても余り面白くないので、
Tweet等で拡散してもらえませんか?

8. http://bit.ly/rtcpc
http://bit.ly/rtcsm

9. こんな感じで
表示されます
http://bit.ly/rtcpc
http://bit.ly/rtcsm

10. 残りの時間は
技術解説

11. 普通に実装すると...
地図上に表示するため、
映像の表示が小さくなる。
ユーザの位置が近いと
映像が重なってしまう。

12. 取得する映像の
サイズとFPSの指定
var constraints = {
video: {
mandatory: {
maxWidth: 320, maxHeight: 320,
maxFrameRate: 15
},
optional: [{facingMode: 'user'}]
},
audio: true
};
navigator.getUserMedia(
constraints, onSuccess, onError
);
今のところChromeのみ。仕様やHPBNに書かれている方法では何故か動作しない。

13. 取得する映像の
サイズとFPSの指定
var constraints = {
video: {
mandatory: {
maxWidth: 320, maxHeight: 320,
maxFrameRate: 15
},
optional: [{facingMode: 'user'}]
},
audio: true
};
navigator.getUserMedia(
constraints, onSuccess, onError
);
今のところChromeのみ。仕様やHPBNに書かれている方法では何故か動作しない。

14. 顔検出で顔を拡大
clmtrackrを使用
https://github.com/auduno/clmtrackr/

15. 物理演算処理で
重ならないように
Box2DWebを使用
https://code.google.com/p/box2dweb/

16. CSS3で角を丸く
顔を拡大しているので
四隅は不要
矩形よりも円形の方が物理演算処理が軽いという副作用も。

17. 使っている技術一覧
PeerJS
Node.js + Socket.IO
getUserMedia
constraints
Google Maps API
Geolocation API
clmtrackr
Box2DWeb
CSS3
border-radius

18. 最期に

19. 作った動機

20. 屋外型アウトレットや
遊園地で別行動をとると、
待ち合わせしにくい。
アウトレット
店名が他言語・造語が多く、店名を聞いて
も表記がわからず店舗一覧から探せない。
遊園地
広過ぎ
店舗番号で位置を知らせるという方法もありますが...。

21. ありがとう WebRTC
ありがとう HTML5
何年も前から
持っていたアイディア。
HTML5(広義)の出現で、
実現可能に。

22. 実際に
遊園地で
使ってみた結果

23. 家族内で
WebRTCが使える端末を
持っているのって
オレだけじゃないか...!

24. 完