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

2,329 views

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,329
On SlideShare
0
From Embeds
0
Number of Embeds
324
Actions
Shares
0
Downloads
20
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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

  1. 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. 2. 自己紹介 Twitter @youkinjoh GitHub @youkinjoh SlideShare @You_Kinjoh きんじょう ゆう 金城 雄 最近やっていること エモいスライドを作って公開。 http://www.slideshare.net/You_Kinjoh/
  3. 3. http://vcmap.net/ 顔検出 Androidでは 顔検出処理は 重いので、 Offを推奨。 ルーム名 チャット ルーム名。 物理演算 位置が近くても 重ならないよう 物理演算を 行なう。
  4. 4. デモ参加のお願い WebRTCが 使える環境を ご準備下さい (Chrome推奨)
  5. 5. 重要 ハウリングを 起こすので、 音量は 切ってください
  6. 6. どういうもの? お互いの位置を 確認しながら ビデオチャット できる
  7. 7. デモ 以下のURLにアクセスしてください。 for PC http://bit.ly/rtcpc for Android http://bit.ly/rtcsm 同じ場所からアクセスしても余り面白くないので、 Tweet等で拡散してもらえませんか?
  8. 8. http://bit.ly/rtcpc http://bit.ly/rtcsm
  9. 9. こんな感じで 表示されます http://bit.ly/rtcpc http://bit.ly/rtcsm
  10. 10. 残りの時間は 技術解説
  11. 11. 普通に実装すると... 地図上に表示するため、 映像の表示が小さくなる。 ユーザの位置が近いと 映像が重なってしまう。
  12. 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. 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. 14. 顔検出で顔を拡大 clmtrackrを使用 https://github.com/auduno/clmtrackr/
  15. 15. 物理演算処理で 重ならないように Box2DWebを使用 https://code.google.com/p/box2dweb/
  16. 16. CSS3で角を丸く 顔を拡大しているので 四隅は不要 矩形よりも円形の方が物理演算処理が軽いという副作用も。
  17. 17. 使っている技術一覧 PeerJS Node.js + Socket.IO getUserMedia constraints Google Maps API Geolocation API clmtrackr Box2DWeb CSS3 border-radius
  18. 18. 最期に
  19. 19. 作った動機
  20. 20. 屋外型アウトレットや 遊園地で別行動をとると、 待ち合わせしにくい。 アウトレット 店名が他言語・造語が多く、店名を聞いて も表記がわからず店舗一覧から探せない。 遊園地 広過ぎ 店舗番号で位置を知らせるという方法もありますが...。
  21. 21. ありがとう WebRTC ありがとう HTML5 何年も前から 持っていたアイディア。 HTML5(広義)の出現で、 実現可能に。
  22. 22. 実際に 遊園地で 使ってみた結果
  23. 23. 家族内で WebRTCが使える端末を 持っているのって オレだけじゃないか...!
  24. 24.

×