Suche senden
Hochladen
WebRTC活用事例 WebRTCを使ってこんなものつくりました VCMap - Video Chat on The Map
•
3 gefällt mir
•
3,178 views
Y
You_Kinjoh
Folgen
Technologie
Melden
Teilen
Melden
Teilen
1 von 24
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
WebRTCの話
WebRTCの話
You_Kinjoh
getUserMedia
getUserMedia
Yusuke Naka
HTML5によるリアルタイムコミュニケーション WebRTCの概説
HTML5によるリアルタイムコミュニケーション WebRTCの概説
You_Kinjoh
SkyWay Vision & Mission
SkyWay Vision & Mission
Yoshiki Mizushima
WebRTC Build MCU on browser
WebRTC Build MCU on browser
mganeko
Chrome Extensionでスクリーンシェアをやってみる
Chrome Extensionでスクリーンシェアをやってみる
Yusuke Naka
PeerConnectionリレーとMediaRecorder
PeerConnectionリレーとMediaRecorder
mganeko
注目の最新技術「WebRTC」とは? -技術概要と事例紹介-
注目の最新技術「WebRTC」とは? -技術概要と事例紹介-
Yusuke Naka
Empfohlen
WebRTCの話
WebRTCの話
You_Kinjoh
getUserMedia
getUserMedia
Yusuke Naka
HTML5によるリアルタイムコミュニケーション WebRTCの概説
HTML5によるリアルタイムコミュニケーション WebRTCの概説
You_Kinjoh
SkyWay Vision & Mission
SkyWay Vision & Mission
Yoshiki Mizushima
WebRTC Build MCU on browser
WebRTC Build MCU on browser
mganeko
Chrome Extensionでスクリーンシェアをやってみる
Chrome Extensionでスクリーンシェアをやってみる
Yusuke Naka
PeerConnectionリレーとMediaRecorder
PeerConnectionリレーとMediaRecorder
mganeko
注目の最新技術「WebRTC」とは? -技術概要と事例紹介-
注目の最新技術「WebRTC」とは? -技術概要と事例紹介-
Yusuke Naka
5分で分るWebRTCコーデックウォーズ
5分で分るWebRTCコーデックウォーズ
Yusuke Naka
WebRTC SFU mediasoup sample
WebRTC SFU mediasoup sample
mganeko
VyOSの開発とか運用の話
VyOSの開発とか運用の話
Shintaro Hasunuma
2013 WebRTC node
2013 WebRTC node
mganeko
ここがつらいよWebRTC - WebRTC開発の落とし穴
ここがつらいよWebRTC - WebRTC開発の落とし穴
mganeko
スマホ(Android・iPhone)でWebRTC
スマホ(Android・iPhone)でWebRTC
Natsuki Yamanaka
Async awaitでの繰り返し処理についての小話
Async awaitでの繰り返し処理についての小話
Masakazu Muraoka
知ってると得するかもしれないConstraintsたち
知ってると得するかもしれないConstraintsたち
Kensaku Komatsu
Git運用ダメ出し会 - ネクストスケープ 2014/05/27 パワーランチ資料
Git運用ダメ出し会 - ネクストスケープ 2014/05/27 パワーランチ資料
mihararyosuke
SIerは如何にしてGitHub Enterpriseを導入するにようになったか
SIerは如何にしてGitHub Enterpriseを導入するにようになったか
You_Kinjoh
WebRTC開発者向けプラットフォーム SkyWayの裏側
WebRTC開発者向けプラットフォーム SkyWayの裏側
Yusuke Naka
WebRTC on Edge
WebRTC on Edge
Saki Homma
いまさら触るAwt
いまさら触るAwt
Keiichi Kobayashi
SkyWayで作るボイスチャット
SkyWayで作るボイスチャット
tioken
WebRTCとSFU
WebRTCとSFU
Saki Homma
Thing.jsについて
Thing.jsについて
Masakazu Muraoka
JavaユーザのためのVSCodeのススメ
JavaユーザのためのVSCodeのススメ
Satoshi Takami
【社内勉強会】弊社でGit!実案件での運用
【社内勉強会】弊社でGit!実案件での運用
Reimi Kuramochi Chiba
TwYM
TwYM
Kuniaki Igarashi
20130216
20130216
komarineko
Skywayのビデオチャットを録画しよう。そう、ブラウザでね
Skywayのビデオチャットを録画しよう。そう、ブラウザでね
mganeko
Mozilla Hubsが拓く新世代WebVRのススメ #HubsScrum
Mozilla Hubsが拓く新世代WebVRのススメ #HubsScrum
GREE VR Studio Lab
Weitere ähnliche Inhalte
Was ist angesagt?
5分で分るWebRTCコーデックウォーズ
5分で分るWebRTCコーデックウォーズ
Yusuke Naka
WebRTC SFU mediasoup sample
WebRTC SFU mediasoup sample
mganeko
VyOSの開発とか運用の話
VyOSの開発とか運用の話
Shintaro Hasunuma
2013 WebRTC node
2013 WebRTC node
mganeko
ここがつらいよWebRTC - WebRTC開発の落とし穴
ここがつらいよWebRTC - WebRTC開発の落とし穴
mganeko
スマホ(Android・iPhone)でWebRTC
スマホ(Android・iPhone)でWebRTC
Natsuki Yamanaka
Async awaitでの繰り返し処理についての小話
Async awaitでの繰り返し処理についての小話
Masakazu Muraoka
知ってると得するかもしれないConstraintsたち
知ってると得するかもしれないConstraintsたち
Kensaku Komatsu
Git運用ダメ出し会 - ネクストスケープ 2014/05/27 パワーランチ資料
Git運用ダメ出し会 - ネクストスケープ 2014/05/27 パワーランチ資料
mihararyosuke
SIerは如何にしてGitHub Enterpriseを導入するにようになったか
SIerは如何にしてGitHub Enterpriseを導入するにようになったか
You_Kinjoh
WebRTC開発者向けプラットフォーム SkyWayの裏側
WebRTC開発者向けプラットフォーム SkyWayの裏側
Yusuke Naka
WebRTC on Edge
WebRTC on Edge
Saki Homma
いまさら触るAwt
いまさら触るAwt
Keiichi Kobayashi
SkyWayで作るボイスチャット
SkyWayで作るボイスチャット
tioken
WebRTCとSFU
WebRTCとSFU
Saki Homma
Thing.jsについて
Thing.jsについて
Masakazu Muraoka
JavaユーザのためのVSCodeのススメ
JavaユーザのためのVSCodeのススメ
Satoshi Takami
【社内勉強会】弊社でGit!実案件での運用
【社内勉強会】弊社でGit!実案件での運用
Reimi Kuramochi Chiba
Was ist angesagt?
(18)
5分で分るWebRTCコーデックウォーズ
5分で分るWebRTCコーデックウォーズ
WebRTC SFU mediasoup sample
WebRTC SFU mediasoup sample
VyOSの開発とか運用の話
VyOSの開発とか運用の話
2013 WebRTC node
2013 WebRTC node
ここがつらいよWebRTC - WebRTC開発の落とし穴
ここがつらいよWebRTC - WebRTC開発の落とし穴
スマホ(Android・iPhone)でWebRTC
スマホ(Android・iPhone)でWebRTC
Async awaitでの繰り返し処理についての小話
Async awaitでの繰り返し処理についての小話
知ってると得するかもしれないConstraintsたち
知ってると得するかもしれないConstraintsたち
Git運用ダメ出し会 - ネクストスケープ 2014/05/27 パワーランチ資料
Git運用ダメ出し会 - ネクストスケープ 2014/05/27 パワーランチ資料
SIerは如何にしてGitHub Enterpriseを導入するにようになったか
SIerは如何にしてGitHub Enterpriseを導入するにようになったか
WebRTC開発者向けプラットフォーム SkyWayの裏側
WebRTC開発者向けプラットフォーム SkyWayの裏側
WebRTC on Edge
WebRTC on Edge
いまさら触るAwt
いまさら触るAwt
SkyWayで作るボイスチャット
SkyWayで作るボイスチャット
WebRTCとSFU
WebRTCとSFU
Thing.jsについて
Thing.jsについて
JavaユーザのためのVSCodeのススメ
JavaユーザのためのVSCodeのススメ
【社内勉強会】弊社でGit!実案件での運用
【社内勉強会】弊社でGit!実案件での運用
Ähnlich wie WebRTC活用事例 WebRTCを使ってこんなものつくりました VCMap - Video Chat on The Map
TwYM
TwYM
Kuniaki Igarashi
20130216
20130216
komarineko
Skywayのビデオチャットを録画しよう。そう、ブラウザでね
Skywayのビデオチャットを録画しよう。そう、ブラウザでね
mganeko
Mozilla Hubsが拓く新世代WebVRのススメ #HubsScrum
Mozilla Hubsが拓く新世代WebVRのススメ #HubsScrum
GREE VR Studio Lab
リモートデバッグツール Weinerをつかってみた
リモートデバッグツール Weinerをつかってみた
Masakazu Muraoka
うしちゃん WebRTC Chat on SkyWayの開発コードw
うしちゃん WebRTC Chat on SkyWayの開発コードw
Kensaku Komatsu
JavaScriptで ごく普通にhttp通信をする 〜esp8266+espruinoでhttp getリクエストをするテスト〜
JavaScriptで ごく普通にhttp通信をする 〜esp8266+espruinoでhttp getリクエストをするテスト〜
Masakazu Muraoka
Tizen web app について調べたよ
Tizen web app について調べたよ
Naruto TAKAHASHI
Microsoft Copilot Studio.pdf
Microsoft Copilot Studio.pdf
Tomokazu Kizawa
ひとつひとつ組み上げてみていくビデオチャットアプリのアーキテクチャ
ひとつひとつ組み上げてみていくビデオチャットアプリのアーキテクチャ
Koki Kumagai
とっとるびー第29回発表資料(RICOH THETAの全天球画像を部分転送して遠隔地のOculusでみる)
とっとるびー第29回発表資料(RICOH THETAの全天球画像を部分転送して遠隔地のOculusでみる)
mecha mogera
Webによるデバイスを用いたリアルタイムサービスの可能性(神戸ITフェスティバル版)
Webによるデバイスを用いたリアルタイムサービスの可能性(神戸ITフェスティバル版)
Kensaku Komatsu
THETA プラグインでWebRTC やってみた
THETA プラグインでWebRTC やってみた
Hideki Shiro
一年ツイッター
一年ツイッター
XMLProJ2014
今時のオンプレなgithubクローン環境構築
今時のオンプレなgithubクローン環境構築
You&I
いまさら聞けないHTML5概要
いまさら聞けないHTML5概要
yoshikawa_t
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
Masakazu Muraoka
Html5概要 & デモ
Html5概要 & デモ
yoshikawa_t
Gaiaのソースコードに見るちょっと未来のweb app開発
Gaiaのソースコードに見るちょっと未来のweb app開発
Masakazu Muraoka
GitHub Actionsを使ってAPI外部公開時の作業を自動化した話
GitHub Actionsを使ってAPI外部公開時の作業を自動化した話
KainumaRyo
Ähnlich wie WebRTC活用事例 WebRTCを使ってこんなものつくりました VCMap - Video Chat on The Map
(20)
TwYM
TwYM
20130216
20130216
Skywayのビデオチャットを録画しよう。そう、ブラウザでね
Skywayのビデオチャットを録画しよう。そう、ブラウザでね
Mozilla Hubsが拓く新世代WebVRのススメ #HubsScrum
Mozilla Hubsが拓く新世代WebVRのススメ #HubsScrum
リモートデバッグツール Weinerをつかってみた
リモートデバッグツール Weinerをつかってみた
うしちゃん WebRTC Chat on SkyWayの開発コードw
うしちゃん WebRTC Chat on SkyWayの開発コードw
JavaScriptで ごく普通にhttp通信をする 〜esp8266+espruinoでhttp getリクエストをするテスト〜
JavaScriptで ごく普通にhttp通信をする 〜esp8266+espruinoでhttp getリクエストをするテスト〜
Tizen web app について調べたよ
Tizen web app について調べたよ
Microsoft Copilot Studio.pdf
Microsoft Copilot Studio.pdf
ひとつひとつ組み上げてみていくビデオチャットアプリのアーキテクチャ
ひとつひとつ組み上げてみていくビデオチャットアプリのアーキテクチャ
とっとるびー第29回発表資料(RICOH THETAの全天球画像を部分転送して遠隔地のOculusでみる)
とっとるびー第29回発表資料(RICOH THETAの全天球画像を部分転送して遠隔地のOculusでみる)
Webによるデバイスを用いたリアルタイムサービスの可能性(神戸ITフェスティバル版)
Webによるデバイスを用いたリアルタイムサービスの可能性(神戸ITフェスティバル版)
THETA プラグインでWebRTC やってみた
THETA プラグインでWebRTC やってみた
一年ツイッター
一年ツイッター
今時のオンプレなgithubクローン環境構築
今時のオンプレなgithubクローン環境構築
いまさら聞けないHTML5概要
いまさら聞けないHTML5概要
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
Html5概要 & デモ
Html5概要 & デモ
Gaiaのソースコードに見るちょっと未来のweb app開発
Gaiaのソースコードに見るちょっと未来のweb app開発
GitHub Actionsを使ってAPI外部公開時の作業を自動化した話
GitHub Actionsを使ってAPI外部公開時の作業を自動化した話
Mehr von You_Kinjoh
WebRTCの技術解説 第四版 公開版
WebRTCの技術解説 第四版 公開版
You_Kinjoh
WebRTC Boot Camp (WebRTC Conference Japan 2016) 事前公開版
WebRTC Boot Camp (WebRTC Conference Japan 2016) 事前公開版
You_Kinjoh
HTML5の基礎と応用 ~Open Web Platform~ WebSocket / WebRTC / Web Audio API / WebGL 第三版
HTML5の基礎と応用 ~Open Web Platform~ WebSocket / WebRTC / Web Audio API / WebGL 第三版
You_Kinjoh
IT技術系書籍読書会のしおり
IT技術系書籍読書会のしおり
You_Kinjoh
HTML5の基礎と応用 ~Open Web Platform~ WebSocket / WebRTC / Web Audio API / WebGL 第二版
HTML5の基礎と応用 ~Open Web Platform~ WebSocket / WebRTC / Web Audio API / WebGL 第二版
You_Kinjoh
HTML5の基礎と応用 ~Open Web Platform~
HTML5の基礎と応用 ~Open Web Platform~
You_Kinjoh
HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説
HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説
You_Kinjoh
WebSocketのキホン
WebSocketのキホン
You_Kinjoh
Mehr von You_Kinjoh
(8)
WebRTCの技術解説 第四版 公開版
WebRTCの技術解説 第四版 公開版
WebRTC Boot Camp (WebRTC Conference Japan 2016) 事前公開版
WebRTC Boot Camp (WebRTC Conference Japan 2016) 事前公開版
HTML5の基礎と応用 ~Open Web Platform~ WebSocket / WebRTC / Web Audio API / WebGL 第三版
HTML5の基礎と応用 ~Open Web Platform~ WebSocket / WebRTC / Web Audio API / WebGL 第三版
IT技術系書籍読書会のしおり
IT技術系書籍読書会のしおり
HTML5の基礎と応用 ~Open Web Platform~ WebSocket / WebRTC / Web Audio API / WebGL 第二版
HTML5の基礎と応用 ~Open Web Platform~ WebSocket / WebRTC / Web Audio API / WebGL 第二版
HTML5の基礎と応用 ~Open Web Platform~
HTML5の基礎と応用 ~Open Web Platform~
HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説
HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説
WebSocketのキホン
WebSocketのキホン
Kürzlich hochgeladen
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
Hiroki Ichikura
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
Toru Tamaki
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
sugiuralab
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Yuma Ohgami
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
iPride Co., Ltd.
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
taisei2219
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
Toru Tamaki
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
Ryo Sasaki
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
Toru Tamaki
Kürzlich hochgeladen
(9)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
WebRTC活用事例 WebRTCを使ってこんなものつくりました VCMap - Video Chat on The Map
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.
完
Jetzt herunterladen