Suche senden
Hochladen
Webrtc bootcamp handson
•
Als PPTX, PDF herunterladen
•
1 gefällt mir
•
1,503 views
M
mganeko
Folgen
WebRTC Conference Japan 2016の WebRTC Boot Camp ハンズオン資料です
Weniger lesen
Mehr lesen
Technologie
Melden
Teilen
Melden
Teilen
1 von 34
Jetzt herunterladen
Empfohlen
実践 WebRTC 〜最新事例と開発ノウハウの紹介〜
実践 WebRTC 〜最新事例と開発ノウハウの紹介〜
Yusuke Naka
WebRTC meetup Tokyo 1
WebRTC meetup Tokyo 1
mganeko
2013 WebRTC node
2013 WebRTC node
mganeko
2013 WebRTC 概説 & ワークショップ
2013 WebRTC 概説 & ワークショップ
mganeko
ブラウザでWebRTC - iOSゲートウェイ作ってみた
ブラウザでWebRTC - iOSゲートウェイ作ってみた
mganeko
Node.js with WebRTC DataChannel
Node.js with WebRTC DataChannel
mganeko
Infocom webrtc conference japan
Infocom webrtc conference japan
mganeko
WebRTC NextVersion時代のJavaScript開発
WebRTC NextVersion時代のJavaScript開発
Yusuke Naka
Empfohlen
実践 WebRTC 〜最新事例と開発ノウハウの紹介〜
実践 WebRTC 〜最新事例と開発ノウハウの紹介〜
Yusuke Naka
WebRTC meetup Tokyo 1
WebRTC meetup Tokyo 1
mganeko
2013 WebRTC node
2013 WebRTC node
mganeko
2013 WebRTC 概説 & ワークショップ
2013 WebRTC 概説 & ワークショップ
mganeko
ブラウザでWebRTC - iOSゲートウェイ作ってみた
ブラウザでWebRTC - iOSゲートウェイ作ってみた
mganeko
Node.js with WebRTC DataChannel
Node.js with WebRTC DataChannel
mganeko
Infocom webrtc conference japan
Infocom webrtc conference japan
mganeko
WebRTC NextVersion時代のJavaScript開発
WebRTC NextVersion時代のJavaScript開発
Yusuke Naka
WebRTC Boot Camp (WebRTC Conference Japan 2016) 事前公開版
WebRTC Boot Camp (WebRTC Conference Japan 2016) 事前公開版
You_Kinjoh
ラズパイでWebRTC ヾ(*´∀`*)ノキャッキャ uv4l-webrtc 軽くハックしてみたよ!
ラズパイでWebRTC ヾ(*´∀`*)ノキャッキャ uv4l-webrtc 軽くハックしてみたよ!
Kensaku Komatsu
5分でわかるWebRTCの仕組み - html5minutes vol.01
5分でわかるWebRTCの仕組み - html5minutes vol.01
西畑 一馬
WebRTC/ORTCの最新動向まるわかり!
WebRTC/ORTCの最新動向まるわかり!
Yusuke Naka
WebRTC SFU Mediasoup Sample update
WebRTC SFU Mediasoup Sample update
mganeko
WebRTCとPeer.jsを使った実装
WebRTCとPeer.jsを使った実装
Yuta Suzuki
SkyWayとWebRTC開発者コミュニティ4年間の軌跡とCMC_Meetupで学んだこと、実践したこと
SkyWayとWebRTC開発者コミュニティ4年間の軌跡とCMC_Meetupで学んだこと、実践したこと
Yusuke Naka
ORTCの仕様書をざっくり斜め読みする
ORTCの仕様書をざっくり斜め読みする
Yusuke Naka
MediaRecorder と WebM で、オレオレ Live Streaming
MediaRecorder と WebM で、オレオレ Live Streaming
mganeko
H.264で相互接続 - WebRTC Meetup Tokyo #10
H.264で相互接続 - WebRTC Meetup Tokyo #10
goforbroke
HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説
HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説
You_Kinjoh
WebRTCの技術解説 第二版 公開版 本編
WebRTCの技術解説 第二版 公開版 本編
Contest Ntt-west
WebRTC getStats - WebRTC Meetup Tokyo 5 LT
WebRTC getStats - WebRTC Meetup Tokyo 5 LT
mganeko
WebRTCのオーディオ処理の謎、誰か教えて!
WebRTCのオーディオ処理の謎、誰か教えて!
mganeko
WebRTCを利用した遠隔リアルタイム映像処理フレームワークの実装
WebRTCを利用した遠隔リアルタイム映像処理フレームワークの実装
tnoho
SkyWayで作るボイスチャット
SkyWayで作るボイスチャット
tioken
Google Meet でもバーチャル背景を使いたい (WebRTC Meetup Online)
Google Meet でもバーチャル背景を使いたい (WebRTC Meetup Online)
mganeko
WebRTCの技術解説 第四版 公開版
WebRTCの技術解説 第四版 公開版
You_Kinjoh
WebRTCとSFU
WebRTCとSFU
Saki Homma
HTML5の基礎と応用 ~Open Web Platform~ WebSocket / WebRTC / Web Audio API / WebGL 第三版
HTML5の基礎と応用 ~Open Web Platform~ WebSocket / WebRTC / Web Audio API / WebGL 第三版
You_Kinjoh
Value Added Services and WebRTC
Value Added Services and WebRTC
Dialogic Inc.
はじめてのWebRTC/ORTC
はじめてのWebRTC/ORTC
Yusuke Naka
Weitere ähnliche Inhalte
Was ist angesagt?
WebRTC Boot Camp (WebRTC Conference Japan 2016) 事前公開版
WebRTC Boot Camp (WebRTC Conference Japan 2016) 事前公開版
You_Kinjoh
ラズパイでWebRTC ヾ(*´∀`*)ノキャッキャ uv4l-webrtc 軽くハックしてみたよ!
ラズパイでWebRTC ヾ(*´∀`*)ノキャッキャ uv4l-webrtc 軽くハックしてみたよ!
Kensaku Komatsu
5分でわかるWebRTCの仕組み - html5minutes vol.01
5分でわかるWebRTCの仕組み - html5minutes vol.01
西畑 一馬
WebRTC/ORTCの最新動向まるわかり!
WebRTC/ORTCの最新動向まるわかり!
Yusuke Naka
WebRTC SFU Mediasoup Sample update
WebRTC SFU Mediasoup Sample update
mganeko
WebRTCとPeer.jsを使った実装
WebRTCとPeer.jsを使った実装
Yuta Suzuki
SkyWayとWebRTC開発者コミュニティ4年間の軌跡とCMC_Meetupで学んだこと、実践したこと
SkyWayとWebRTC開発者コミュニティ4年間の軌跡とCMC_Meetupで学んだこと、実践したこと
Yusuke Naka
ORTCの仕様書をざっくり斜め読みする
ORTCの仕様書をざっくり斜め読みする
Yusuke Naka
MediaRecorder と WebM で、オレオレ Live Streaming
MediaRecorder と WebM で、オレオレ Live Streaming
mganeko
H.264で相互接続 - WebRTC Meetup Tokyo #10
H.264で相互接続 - WebRTC Meetup Tokyo #10
goforbroke
HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説
HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説
You_Kinjoh
WebRTCの技術解説 第二版 公開版 本編
WebRTCの技術解説 第二版 公開版 本編
Contest Ntt-west
WebRTC getStats - WebRTC Meetup Tokyo 5 LT
WebRTC getStats - WebRTC Meetup Tokyo 5 LT
mganeko
WebRTCのオーディオ処理の謎、誰か教えて!
WebRTCのオーディオ処理の謎、誰か教えて!
mganeko
WebRTCを利用した遠隔リアルタイム映像処理フレームワークの実装
WebRTCを利用した遠隔リアルタイム映像処理フレームワークの実装
tnoho
SkyWayで作るボイスチャット
SkyWayで作るボイスチャット
tioken
Google Meet でもバーチャル背景を使いたい (WebRTC Meetup Online)
Google Meet でもバーチャル背景を使いたい (WebRTC Meetup Online)
mganeko
Was ist angesagt?
(17)
WebRTC Boot Camp (WebRTC Conference Japan 2016) 事前公開版
WebRTC Boot Camp (WebRTC Conference Japan 2016) 事前公開版
ラズパイでWebRTC ヾ(*´∀`*)ノキャッキャ uv4l-webrtc 軽くハックしてみたよ!
ラズパイでWebRTC ヾ(*´∀`*)ノキャッキャ uv4l-webrtc 軽くハックしてみたよ!
5分でわかるWebRTCの仕組み - html5minutes vol.01
5分でわかるWebRTCの仕組み - html5minutes vol.01
WebRTC/ORTCの最新動向まるわかり!
WebRTC/ORTCの最新動向まるわかり!
WebRTC SFU Mediasoup Sample update
WebRTC SFU Mediasoup Sample update
WebRTCとPeer.jsを使った実装
WebRTCとPeer.jsを使った実装
SkyWayとWebRTC開発者コミュニティ4年間の軌跡とCMC_Meetupで学んだこと、実践したこと
SkyWayとWebRTC開発者コミュニティ4年間の軌跡とCMC_Meetupで学んだこと、実践したこと
ORTCの仕様書をざっくり斜め読みする
ORTCの仕様書をざっくり斜め読みする
MediaRecorder と WebM で、オレオレ Live Streaming
MediaRecorder と WebM で、オレオレ Live Streaming
H.264で相互接続 - WebRTC Meetup Tokyo #10
H.264で相互接続 - WebRTC Meetup Tokyo #10
HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説
HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説
WebRTCの技術解説 第二版 公開版 本編
WebRTCの技術解説 第二版 公開版 本編
WebRTC getStats - WebRTC Meetup Tokyo 5 LT
WebRTC getStats - WebRTC Meetup Tokyo 5 LT
WebRTCのオーディオ処理の謎、誰か教えて!
WebRTCのオーディオ処理の謎、誰か教えて!
WebRTCを利用した遠隔リアルタイム映像処理フレームワークの実装
WebRTCを利用した遠隔リアルタイム映像処理フレームワークの実装
SkyWayで作るボイスチャット
SkyWayで作るボイスチャット
Google Meet でもバーチャル背景を使いたい (WebRTC Meetup Online)
Google Meet でもバーチャル背景を使いたい (WebRTC Meetup Online)
Andere mochten auch
WebRTCの技術解説 第四版 公開版
WebRTCの技術解説 第四版 公開版
You_Kinjoh
WebRTCとSFU
WebRTCとSFU
Saki Homma
HTML5の基礎と応用 ~Open Web Platform~ WebSocket / WebRTC / Web Audio API / WebGL 第三版
HTML5の基礎と応用 ~Open Web Platform~ WebSocket / WebRTC / Web Audio API / WebGL 第三版
You_Kinjoh
Value Added Services and WebRTC
Value Added Services and WebRTC
Dialogic Inc.
はじめてのWebRTC/ORTC
はじめてのWebRTC/ORTC
Yusuke Naka
SFUの話
SFUの話
tnoho
WebRTCの技術解説 公開版
WebRTCの技術解説 公開版
Contest Ntt-west
WebRTC開発者向けプラットフォーム SkyWayの裏側
WebRTC開発者向けプラットフォーム SkyWayの裏側
Yusuke Naka
Andere mochten auch
(8)
WebRTCの技術解説 第四版 公開版
WebRTCの技術解説 第四版 公開版
WebRTCとSFU
WebRTCとSFU
HTML5の基礎と応用 ~Open Web Platform~ WebSocket / WebRTC / Web Audio API / WebGL 第三版
HTML5の基礎と応用 ~Open Web Platform~ WebSocket / WebRTC / Web Audio API / WebGL 第三版
Value Added Services and WebRTC
Value Added Services and WebRTC
はじめてのWebRTC/ORTC
はじめてのWebRTC/ORTC
SFUの話
SFUの話
WebRTCの技術解説 公開版
WebRTCの技術解説 公開版
WebRTC開発者向けプラットフォーム SkyWayの裏側
WebRTC開発者向けプラットフォーム SkyWayの裏側
Ähnlich wie Webrtc bootcamp handson
WebRTC on Native App
WebRTC on Native App
WebRTCConferenceJapan
Chromebook 「だけ」で WebRTCを動かそう
Chromebook 「だけ」で WebRTCを動かそう
mganeko
Node.js x Headless Chrome for WeRTC MCU / Node.js x Chrome headless で、お手軽WebR...
Node.js x Headless Chrome for WeRTC MCU / Node.js x Chrome headless で、お手軽WebR...
mganeko
Introduction to Magnum (JP)
Introduction to Magnum (JP)
Motohiro OTSUKA
いよいよ始められる Java EEでのWebSocket #jjug #jjug_ccc #ccc_r21
いよいよ始められる Java EEでのWebSocket #jjug #jjug_ccc #ccc_r21
Takakiyo Tanaka
OpenContrailのソースコードを探検しよう!
OpenContrailのソースコードを探検しよう!
Takashi Sogabe
今だからこそ知りたい Docker Compose/Swarm 入門
今だからこそ知りたい Docker Compose/Swarm 入門
Masahito Zembutsu
How to run P4 BMv2
How to run P4 BMv2
Kentaro Ebisawa
VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発
Yuta Matsumura
Let's begin WebRTC
Let's begin WebRTC
yoshikawa_t
EchoyaGinhanazeSu_inoka.pptx
EchoyaGinhanazeSu_inoka.pptx
keink
WebRTC SFU mediasoup sample
WebRTC SFU mediasoup sample
mganeko
WebRTCとORTCについて整理しておこう
WebRTCとORTCについて整理しておこう
彰 村地
マルチクラウド環境でモビンギはどのようにコンテナを動かしているか
マルチクラウド環境でモビンギはどのようにコンテナを動かしているか
Masafumi Noguchi
WebRTCがよく分からないから調べて試してみた
WebRTCがよく分からないから調べて試してみた
toru tom
hbstudy37 doc
hbstudy37 doc
Fujishiro Takuya
Clrh 20140906 lt
Clrh 20140906 lt
Tomoyuki Obi
CI/CD Pipeline を考える 〜KubeCon 2017 + CyberAgent の最大公倍数〜
CI/CD Pipeline を考える 〜KubeCon 2017 + CyberAgent の最大公倍数〜
Masaya Aoyama
Firefox OS and Web server
Firefox OS and Web server
Tomoaki Konno
130329 04
130329 04
openrtm
Ähnlich wie Webrtc bootcamp handson
(20)
WebRTC on Native App
WebRTC on Native App
Chromebook 「だけ」で WebRTCを動かそう
Chromebook 「だけ」で WebRTCを動かそう
Node.js x Headless Chrome for WeRTC MCU / Node.js x Chrome headless で、お手軽WebR...
Node.js x Headless Chrome for WeRTC MCU / Node.js x Chrome headless で、お手軽WebR...
Introduction to Magnum (JP)
Introduction to Magnum (JP)
いよいよ始められる Java EEでのWebSocket #jjug #jjug_ccc #ccc_r21
いよいよ始められる Java EEでのWebSocket #jjug #jjug_ccc #ccc_r21
OpenContrailのソースコードを探検しよう!
OpenContrailのソースコードを探検しよう!
今だからこそ知りたい Docker Compose/Swarm 入門
今だからこそ知りたい Docker Compose/Swarm 入門
How to run P4 BMv2
How to run P4 BMv2
VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発
Let's begin WebRTC
Let's begin WebRTC
EchoyaGinhanazeSu_inoka.pptx
EchoyaGinhanazeSu_inoka.pptx
WebRTC SFU mediasoup sample
WebRTC SFU mediasoup sample
WebRTCとORTCについて整理しておこう
WebRTCとORTCについて整理しておこう
マルチクラウド環境でモビンギはどのようにコンテナを動かしているか
マルチクラウド環境でモビンギはどのようにコンテナを動かしているか
WebRTCがよく分からないから調べて試してみた
WebRTCがよく分からないから調べて試してみた
hbstudy37 doc
hbstudy37 doc
Clrh 20140906 lt
Clrh 20140906 lt
CI/CD Pipeline を考える 〜KubeCon 2017 + CyberAgent の最大公倍数〜
CI/CD Pipeline を考える 〜KubeCon 2017 + CyberAgent の最大公倍数〜
Firefox OS and Web server
Firefox OS and Web server
130329 04
130329 04
Mehr von mganeko
Amazon Kinesis Video Streams WebRTC 使ってみた
Amazon Kinesis Video Streams WebRTC 使ってみた
mganeko
Build Node.js-WASM/WASI Tiny compiler with Node.js
Build Node.js-WASM/WASI Tiny compiler with Node.js
mganeko
Node.jsでつくるNode.js ミニインタープリター&コンパイラー
Node.jsでつくるNode.js ミニインタープリター&コンパイラー
mganeko
Skywayのビデオチャットを録画しよう。そう、ブラウザでね
Skywayのビデオチャットを録画しよう。そう、ブラウザでね
mganeko
WebRTC mediasoup on raspberrypi3
WebRTC mediasoup on raspberrypi3
mganeko
Inside of 聖徳玉子 by O2
Inside of 聖徳玉子 by O2
mganeko
WebRTC Build MCU on browser
WebRTC Build MCU on browser
mganeko
PeerConnectionリレーとMediaRecorder
PeerConnectionリレーとMediaRecorder
mganeko
ここがつらいよWebRTC - WebRTC開発の落とし穴
ここがつらいよWebRTC - WebRTC開発の落とし穴
mganeko
WebRTC multitrack / multistream
WebRTC multitrack / multistream
mganeko
WebRTC UserMedia Catalog: いろんなユーザメディア(MediaStream)を使ってみよう
WebRTC UserMedia Catalog: いろんなユーザメディア(MediaStream)を使ってみよう
mganeko
WebRTC multistream
WebRTC multistream
mganeko
Inside WebM
Inside WebM
mganeko
Nodeで操るKurentoメディアサーバー ( Kurento + WebRTC + Node.js )
Nodeで操るKurentoメディアサーバー ( Kurento + WebRTC + Node.js )
mganeko
WebRTC Summit 2014 NewYork 参加報告
WebRTC Summit 2014 NewYork 参加報告
mganeko
Mehr von mganeko
(15)
Amazon Kinesis Video Streams WebRTC 使ってみた
Amazon Kinesis Video Streams WebRTC 使ってみた
Build Node.js-WASM/WASI Tiny compiler with Node.js
Build Node.js-WASM/WASI Tiny compiler with Node.js
Node.jsでつくるNode.js ミニインタープリター&コンパイラー
Node.jsでつくるNode.js ミニインタープリター&コンパイラー
Skywayのビデオチャットを録画しよう。そう、ブラウザでね
Skywayのビデオチャットを録画しよう。そう、ブラウザでね
WebRTC mediasoup on raspberrypi3
WebRTC mediasoup on raspberrypi3
Inside of 聖徳玉子 by O2
Inside of 聖徳玉子 by O2
WebRTC Build MCU on browser
WebRTC Build MCU on browser
PeerConnectionリレーとMediaRecorder
PeerConnectionリレーとMediaRecorder
ここがつらいよWebRTC - WebRTC開発の落とし穴
ここがつらいよWebRTC - WebRTC開発の落とし穴
WebRTC multitrack / multistream
WebRTC multitrack / multistream
WebRTC UserMedia Catalog: いろんなユーザメディア(MediaStream)を使ってみよう
WebRTC UserMedia Catalog: いろんなユーザメディア(MediaStream)を使ってみよう
WebRTC multistream
WebRTC multistream
Inside WebM
Inside WebM
Nodeで操るKurentoメディアサーバー ( Kurento + WebRTC + Node.js )
Nodeで操るKurentoメディアサーバー ( Kurento + WebRTC + Node.js )
WebRTC Summit 2014 NewYork 参加報告
WebRTC Summit 2014 NewYork 参加報告
Kürzlich hochgeladen
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
WSO2
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Toru Tamaki
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Toru Tamaki
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
atsushi061452
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
sn679259
Kürzlich hochgeladen
(10)
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
Webrtc bootcamp handson
1.
WebRTC Conference Japan
2016 WebRTC Boot Camp ハンズオン インフォコム株式会社 がねこまさし
2.
リソース • スライドのURL – http://www.slideshare.net/mganeko/webrtc- bootcamp-handson –
短縮 http://goo.gl/cA9CV5 • 元になるソースコード – https://github.com/mganeko/bootcamp – 短縮 https://goo.gl/HfXTmT • 参考 – WebRTCを試すために必要なもの (Qiita) • http://goo.gl/hSfYc9 – お手軽なWebサーバーの立て方 (Qiita) • http://goo.gl/0C18j5
3.
PART 1 カメラを使ってみよう
4.
navigator.getUserMedia() • カメラの映像/マイクの音声を取得できます • ベンダーブレフィックスが付いています –
Chrome: navigator.webkitGetUserMedia() – Firefox: navigator.mozGetUserMedia() • 最新の仕様では、navigator.MediaDevices.getUserMedia() – ※今日は使いません • ユーザに許可を求めるダイアログが表示されます • 取得に成功するとMediaStream オブジェクトが得られます • ※Chrome 47からは https://〜でしか利用できなくなりました – http://localhost は例外として利用できます
5.
コード例 // プレフィックスを吸収する navigator.getUserMedia =
navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; // カメラの映像を取得する場合 navigator.getUserMedia( {video : true}, function(stream) { // 成功時のコールバック }, function(err) { // エラー時のコールバック } );
6.
マイクの音声も取得する場合 // カメラの映像とマイクの音声を取得する場合 navigator.getUserMedia( {video
: true, audio: true}, function(stream) { // 成功時のコールバック }, function(err) { // エラー時のコールバック } ); ※会場でやるとうるさいので、今日は音声無しでお願いします
7.
映像をvideo要素で再生 • window.URL.createObjectURL(stream) でURL を取得 –
blob://〜 という表記のURLを返す • video要素のsrc に指定して再生 video.src = window.URL.createObjectURL(stream); video.play();
8.
実際にやってみよう(1)(2) • media_0.html をエディタで開いてください •
startCamera() 関数の (1), (2) を記述してみて ください • [start]ボタンを押して、試してみましょう
9.
解答例 function startCamera() { //
(1) getUserMediaを使って、cameraからメディアストリームを取得してください // また、それをlocalStreamにセットしておいてください navigator.getUserMedia( {video : true}, function(stream) { // success localStream = stream; // (2) それを localVideo に表示してください localVideo.src = window.URL.createObjectURL(localStream); localVideo.play(); }, function(err) { // error console.error('getUserMedia error', err); } ); }
10.
映像の停止 • video.pause() • window.URL.revokeObjectURL(url)
でURLを解放 • ストリームを停止 – MediaStream.stop() はChrome 47から使えなくなりました – MediaTrack.stop() を使う必要があります MediaStream MediaTrack MediaTrack
11.
実際にやってみよう(3)(4) • 先ほどの続きで、stopCamera() 関数の
(3), (4) を記述してみてくだい – MediaStreamを停止させるための関数を stopStream(stream) として用意していますので、 ご利用ください • [start]→[stop]ボタンを押して、試してみましょ う
12.
解答例 function stopCamera() { //
(3) localVideoの再生を停止させてください localVideo.pause(); window.URL.revokeObjectURL(localVideo.src); localVideo.src = ''; // Firefox ではWARNING // (4) メディアストリームを停止させてください stopStream(localStream); localStream = null; }
13.
参考:新しい getUserMedia • Media
Capture and Streamsでは、新しいAPIが定義され ています – http://www.w3.org/TR/mediacapture-streams/ • navigator.MediaDevices.getUserMedia() • Promiseを返します navigator.mediaDevices.getUserMedia( {video: true} ).then(function (stream) { // 成功時の処理 }).catch(function (reason) { // 例外時の処理 });
14.
PART 2 通信してみよう
15.
RTCPeerConnection • WebRTC通信には、RTCPeerConnetionを使用 – ブラウザとブラウザの間で直接Peer-to-Peer通信を行う –
UDP/IPを使用 • TCP/IPのようにパケットの到着は保障しない • オーバーヘッドが少ない • 通信のリアルタイム性を重視 • UDPのポート番号は動的に割り振られる(49152 ~ 65535) • ベンダーブレフィックスが付いている – Chrome: window.webkitRTCPeerConnetion – Firefox: window.mozRTCPeerConnection
16.
RTCPeerConnection • Peer-to-Peer 通信を確立するために、2種類の情報を 交換する –
SDP (Session Description Protocol) – ICE Candidate (Interactive Connectivity Establishment Candidate) • SDP ... 通信するPeerの能力や、条件について – 映像、音声、データーの有無 – 使いたいコーデック、使いたい帯域幅、など – 通信を始める側: Offer – 通信に応答する側: Answer • ICE Candidate – 通信に使う経路の情報
17.
SDP と ICE •
ICE Candidate…経路の情報を示す。複数ある場合も多い • P2Pによる直接通信 • STUNによる、NAT通過のためのポートマッピング – → 最終的にはP2Pになる • TURNによる、リレーサーバーを介した中継通信 SDP SDPICE
18.
ご注意 • ICE Candidate
を収集するには、デバイスが ネットワークに繋がっている必要があります – ネットワーク無し、localhostのみだとICE candidate が収集できない • ハンズオンは、テザリング等でデバイスをネッ トワークに接続してから、実行してください – 外部と実際には通信しませんが、外部と接続でき るネットワークが必要です
19.
シグナリング • 最初は通信相手のことをお互い知らない • 情報をなんらかの方法で交換する必要あり –
→ シグナリング • 通常は仲介役となるサーバーを用意 – → シグナリングサーバー • 今日は、仲介役は「あなた」 – → 手動でシグナリング
20.
デモ
21.
SDPの交換の概略: Offer側 • Offer
SDP を生成 – RTCPeerConnection.createOffer() • 自分のSDPを覚える – RTCPeerConnection.setLocalDescription() • 相手に送る • 相手から Answer SDP を受け取ったら、それを覚える – RTCPeerConnection.setRemoteDescription() ※非同期処理になるので、コールバックを使って記述
22.
SDPの交換の概略: Answer側 • 相手から
Offer SDP を受け取ったら、それを覚える – RTCPeerConnection.setRemoteDescription() • Answer SDP を生成 – RTCPeerConnection.createAnswer() • 自分のSDPを覚える – RTCPeerConnection.setLocalDescription() • 相手に送り返す ※非同期処理になるので、コールバックを使って記述
23.
コードの概略 // プレフィックスを吸収する RTCPeerConnection =
window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection; // PeerConnectionオブジェクトを生成する var peerConnection = new RTCPeerConnection({"iceServers":[]}); // iceServersは NAT/Firewall越えを行う場合に指定 // 今回は指定は空っぽでOK // Offer SDPを生成する peerConnection.createOffer( function(sessionDescription) { // 成功した場合 }, function(err) { // 失敗した場合 }, {} // オプション指定 );
24.
コードの概略(続き) // Answer SDPを生成する peerConnection.createAnswer( function(sessionDescription)
{ // 成功した場合 }, function(err) { // 失敗した場合 }, {} // オプション指定 ); // SDP を受け取った場合 peerConnection.setRemoteDescription(sessionDescription, function() { // 成功 }, function(err) { // 失敗 } );
25.
ICE Candidateの交換の概略 • ICE
Candidate (通信経路の候補)は複数個ある • 非同期に順々に収集される – RTCPeerConnection.onicecandidate() • 早く見つかったものから随時交換… Trcikle ICE – 早く繋がるケースが多い • 全て見つけてから、まとめて交換… Vanilla ICE – 処理はシンプル。※今日はこちらを利用
26.
Trickle ICE によるシグナリング
27.
Vanilla ICE によるシグナリング
28.
コードの概略 peerConection.onicecandidate = function
(evt) { if (evt.candidate) { // 個々のcandidateを収集をした時の処理 // Trikle ICE の場合、ここで処理する } else { // 全てのICE candidateが収集し終わったタイミング // Vanilla ICE の場合、ここで処理する var sdpWithICE = peerConnection.localDescription.sdp; } };
29.
手動シグナリングをやってみよう (1)〜(7) • hand_vanilla_0.html をエディタで開いてください •
makeOffer()関数の(1),(2)を記述してみてください • setOfferText()関数の(3),(4)を記述してみてください • makeAnswer()関数の(5),(6)を記述してみてください • setAnswerText()関数の(7)を記述してみてください
30.
解答例 function makeOffer() { //
(1) createOfferを呼び出して、Offer SDPを生成する peerConnection.createOffer(function (sessionDescription) { // in case of success // (2) 生成されたSDPを、peerConnetionにセットする // ※Vanilla ICEを用いるため、すぐにはOfferを相手に送信しない peerConnection.setLocalDescription(sessionDescription, function() { console.log('setLocalDescription() succsess'); // ※Trickle ICEの場合は、このタイミングでOffer SDPを相手に送信する // ※Vanilla ICEの場合には、まだ送らない }, function(err) { console.error('setLocalDescription() ERROR: ', err); } ); console.log('-- Create Offer SDP --'); console.log(sessionDescription); }, function (err) { // in case of error console.error('Create Offer failed:', err); }, mediaConstraints); }
31.
解答例 // Offerを受け取る function setOfferText(text)
{ // SDPの文字列からRTCSessionDescriptionのオブジェクトを生成 var offer = new RTCSessionDescription({ type : 'offer', sdp : text, }); // (3) 生成したオブジェクトを、peerConnetionにセットする // 相手側のSDPをセットする peerConnection.setRemoteDescription(offer, function() { console.log('setRemoteDescription(offer) succsess'); // (4) さらに、適切なタイミングで用意している関数 makeAnswer() を呼び出す // コールバックが呼ばれたら、Answerを生成する makeAnswer(); }, function(err) { console.error('setRemoteDescription(offer) ERROR: ', err); } ); }
32.
解答例 // Answer を生成する function
makeAnswer() { // (5) createAnswerを呼び出して、Answer SDPを生成する peerConnection.createAnswer(function (sessionDescription) { // in case of success // (6) 生成されたSDPを、peerConnetionにセットする // ※Vanilla ICEを用いるため、すぐにはOfferを相手に送信しない peerConnection.setLocalDescription(sessionDescription, function() { console.log('setLocalDescription() succsess'); // ※Trickle ICEの場合は、このタイミングでAnswer SDPを相手に送信する // ※Vanilla ICEの場合には、まだ送らない }, function(err) { console.error('setLocalDescription() ERROR: ', err); } ); console.log(sessionDescription); }, function (err) { // in case of error console.error('Create Answer failed:', err); }, mediaConstraints); }
33.
解答例 // Answerを受け取る function setAnswerText(text)
{ // SDPの文字列からRTCSessionDescriptionのオブジェクトを生成 var answer = new RTCSessionDescription({ type : 'answer', sdp : text, }); // (7) 生成したオブジェクトを、peerConnetionにセットする // 相手側のSDPをセットする peerConnection.setRemoteDescription(answer, function() { console.log('setRemoteDescription(answer) succsess'); }, function(err) { console.error('setRemoteDescription(answer) ERROR: ', err); } ); }
34.
Thank you! 34 END
Jetzt herunterladen