WebRTC活用事例WebRTCを使ってこんなものつくりましたVideo Chat on The Map

VCMapWebRTC Meetup Tokyo #3https://atnd.org/events/53504

2014/08/01 金城 雄 Twitter @youkinjoh GitHub @youkinjoh SlideShare @You_Kinjoh

公開版

自己紹介 Twitter @youkinjoh GitHub @youkinjoh SlideShare @You_Kinjoh

きんじょう ゆう

金城 雄最近やっていることエモいスライドを作って公開。http://www.slideshare.net/You_Kinjoh/

http://vcmap.net/

顔検出Androidでは顔検出処理は重いので、Offを推奨。

ルーム名チャットルーム名。

物理演算位置が近くても重ならないよう物理演算を行なう。

デモ参加のお願いWebRTCが使える環境をご準備下さい

(Chrome推奨)

重要ハウリングを起こすので、

音量は切ってください

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

できる

デモ以下のURLにアクセスしてください。

for PChttp://bit.ly/rtcpcfor Androidhttp://bit.ly/rtcsm同じ場所からアクセスしても余り面白くないので、Tweet等で拡散してもらえませんか?

http://bit.ly/rtcpchttp://bit.ly/rtcsm

こんな感じで表示されます

http://bit.ly/rtcpchttp://bit.ly/rtcsm

残りの時間は技術解説

普通に実装すると...地図上に表示するため、映像の表示が小さくなる。

ユーザの位置が近いと映像が重なってしまう。

取得する映像のサイズとFPSの指定

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

取得する映像のサイズとFPSの指定

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

顔検出で顔を拡大clmtrackrを使用

https://github.com/auduno/clmtrackr/

物理演算処理で重ならないように

Box2DWebを使用

https://code.google.com/p/box2dweb/

CSS3で角を丸く顔を拡大しているので

四隅は不要

矩形よりも円形の方が物理演算処理が軽いという副作用も。

使っている技術一覧PeerJSNode.js + Socket.IOgetUserMediaconstraints

Google Maps APIGeolocation APIclmtrackrBox2DWebCSS3border-radius

最期に

作った動機

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

ありがとう WebRTCありがとう HTML5

何年も前から持っていたアイディア。HTML5(広義)の出現で、実現可能に。

実際に遊園地で

使ってみた結果

家族内でWebRTCが使える端末を

持っているのってオレだけじゃないか...!

完