Enviar búsqueda
Cargar
WebRTC活用事例 WebRTCを使ってこんなものつくりました VCMap - Video Chat on The Map
•
3 recomendaciones
•
3,178 vistas
Y
You_Kinjoh
Seguir
Tecnología
Denunciar
Compartir
Denunciar
Compartir
1 de 24
Descargar ahora
Descargar para leer sin conexión
Recomendados
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
Recomendados
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
Más contenido relacionado
La actualidad más candente
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
La actualidad más candente
(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!実案件での運用
Similar a 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
Similar a 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外部公開時の作業を自動化した話
Más de 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
Más de 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のキホン
Último
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Toru Tamaki
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Hiroshi Tomioka
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Toru Tamaki
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
atsushi061452
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
Último
(11)
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
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.
完
Descargar ahora