SlideShare a Scribd company logo
1 of 13
Download to read offline
WebRTC概説(P2P)
WebRTCとは
• Web Real Time Communications

http://www.webrtc.org/
• 映像,音声,テキストなどRTCに必要な機能を提供す
るAPI

ex.)ビデオチャット,テキストチャットなど
• プラグインレスでブラウザはAPIを使える
• 部品としてアプリに組込みが可能
なぜWebRTC?
• WebRTC readyなデバイスはユーザの手元
• ユーザとのダイレクトなチャネルができる
• または,既存のサービスを補うチャネル
• 参考:http://www.disruptive-analysis.com/webrtc.htm
提供中のサービス一例
• Aamzon Mayday
• Twilio
• Tokbox
• Skyway
• 他にも沢山
• P2P

デバイス同士で直接通話
• 通話確立後はデバイスのみで
通信する(=サーバ負荷低)
WebRTCのつなぎ方
Media
Media
Webアプリ Webアプリ
• リレー接続(TURN)

サーバ-クライアント型
• 通話中はサーバをMediaが通る
(=サーバ負荷高)
• 会議システムなどで利用
WebRTCの主な仕様
• Media Capture and Streams

http://www.w3.org/TR/mediacapture-streams/
• デバイスからカメラやマイクのメディアストリームを
える仕組み
• WebRTC 1.0: Real-time Communication Between
Browsers

http://www.w3.org/TR/webrtc/
• デバイス同士をJS APIで繋ぐ仕組み
仕様が実現していること
• カメラ,マイクを使ってメディ
アを取得する
• P2Pを実現する仕組み

STUNサーバを使ったNAT越え
• P2Pでメディア(映像・音声)・
データ(テキスト・バイナリ)を
送る仕組み
• リレー接続(TURN)でNAT越え

今回はP2Pだけ
Signalingサーバ
Webサーバ
STUNサーバ
NAT
通話ができる仕組み
(TrickleICE+P2Pの場合)
通話ができる仕組み(アクセス)
Signalingサーバ
Webサーバ
STUNサーバ
①デバイスからWebアプリのURLにアクセス.

②Webアプリで指定されたSignalingサーバにアクセス
①①
② ②
③発呼側からSDP Offerを送信

④対向のデバイスはSDP Offerを登録,SDP Answerを返信
通話ができる仕組み(Signaling)
Signalingサーバ
Webサーバ
STUNサーバ
③ ③
④④
⑤自身のグローバルIP/ポートを問い合わせ

⑥自身のグローバルIP/ポートの組合せを受け取る
通話ができる仕組み(STUN)
Signalingサーバ
Webサーバ
STUNサーバ
⑤ ⑤
⑥⑥
⑦自身のグローバルIP/ポートの組合せを対向に通知

→通信の準備が完了
通話ができる仕組み(ICE)
Signalingサーバ
Webサーバ
STUNサーバ
⑦ ⑦
⑧対向のグローバルIP/ポート宛の通話にチャレンジ

(繋がらなければ,TURNサーバを用意してリレー接続)
通話ができる仕組み
Signalingサーバ
Webサーバ
STUNサーバ
⑧
MediaChannel(ビデオ,音声)
DataChannel(テキスト,バイナリ)

More Related Content

What's hot

HTML5によるリアルタイムコミュニケーション WebRTCの概説
HTML5によるリアルタイムコミュニケーション WebRTCの概説HTML5によるリアルタイムコミュニケーション WebRTCの概説
HTML5によるリアルタイムコミュニケーション WebRTCの概説
You_Kinjoh
 

What's hot (20)

ブラウザでWebRTC - iOSゲートウェイ作ってみた
ブラウザでWebRTC - iOSゲートウェイ作ってみたブラウザでWebRTC - iOSゲートウェイ作ってみた
ブラウザでWebRTC - iOSゲートウェイ作ってみた
 
WebRTC SFU mediasoup sample
WebRTC SFU mediasoup sampleWebRTC SFU mediasoup sample
WebRTC SFU mediasoup sample
 
H.264で相互接続 - WebRTC Meetup Tokyo #10
H.264で相互接続 - WebRTC Meetup Tokyo #10H.264で相互接続 - WebRTC Meetup Tokyo #10
H.264で相互接続 - WebRTC Meetup Tokyo #10
 
Infocom webrtc conference japan
Infocom webrtc conference japanInfocom webrtc conference japan
Infocom webrtc conference japan
 
WebRTC Boot Camp (WebRTC Conference Japan 2016) 事前公開版
WebRTC Boot Camp (WebRTC Conference Japan 2016) 事前公開版WebRTC Boot Camp (WebRTC Conference Japan 2016) 事前公開版
WebRTC Boot Camp (WebRTC Conference Japan 2016) 事前公開版
 
ラズパイでWebRTC ヾ(*´∀`*)ノキャッキャ uv4l-webrtc 軽くハックしてみたよ!
ラズパイでWebRTC ヾ(*´∀`*)ノキャッキャ    uv4l-webrtc 軽くハックしてみたよ!ラズパイでWebRTC ヾ(*´∀`*)ノキャッキャ    uv4l-webrtc 軽くハックしてみたよ!
ラズパイでWebRTC ヾ(*´∀`*)ノキャッキャ uv4l-webrtc 軽くハックしてみたよ!
 
色々なデバイスの映像を使ったWebブラウザでのWebRTC映像中継(GotAPIからのWebRTC利用)
色々なデバイスの映像を使ったWebブラウザでのWebRTC映像中継(GotAPIからのWebRTC利用) 色々なデバイスの映像を使ったWebブラウザでのWebRTC映像中継(GotAPIからのWebRTC利用)
色々なデバイスの映像を使ったWebブラウザでのWebRTC映像中継(GotAPIからのWebRTC利用)
 
スマホ(Android・iPhone)でWebRTC
スマホ(Android・iPhone)でWebRTCスマホ(Android・iPhone)でWebRTC
スマホ(Android・iPhone)でWebRTC
 
HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説
HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説
HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説
 
WebRTC/ORTCの最新動向まるわかり!
WebRTC/ORTCの最新動向まるわかり!WebRTC/ORTCの最新動向まるわかり!
WebRTC/ORTCの最新動向まるわかり!
 
MediaRecorder と WebM で、オレオレ Live Streaming
MediaRecorder と WebM で、オレオレ Live StreamingMediaRecorder と WebM で、オレオレ Live Streaming
MediaRecorder と WebM で、オレオレ Live Streaming
 
WebRTC on Edge
WebRTC on EdgeWebRTC on Edge
WebRTC on Edge
 
Breakouts で Presentation API の 拡張提案したよ
Breakouts でPresentation API の拡張提案したよBreakouts でPresentation API の拡張提案したよ
Breakouts で Presentation API の 拡張提案したよ
 
WebRTC mediasoup on raspberrypi3
WebRTC mediasoup on raspberrypi3WebRTC mediasoup on raspberrypi3
WebRTC mediasoup on raspberrypi3
 
SkyWay Vision & Mission
SkyWay Vision & MissionSkyWay Vision & Mission
SkyWay Vision & Mission
 
HTML5によるリアルタイムコミュニケーション WebRTCの概説
HTML5によるリアルタイムコミュニケーション WebRTCの概説HTML5によるリアルタイムコミュニケーション WebRTCの概説
HTML5によるリアルタイムコミュニケーション WebRTCの概説
 
スマートフォンでの WebRTC活用
スマートフォンでのWebRTC活用スマートフォンでのWebRTC活用
スマートフォンでの WebRTC活用
 
実践 WebRTC 〜最新事例と開発ノウハウの紹介〜
実践 WebRTC 〜最新事例と開発ノウハウの紹介〜実践 WebRTC 〜最新事例と開発ノウハウの紹介〜
実践 WebRTC 〜最新事例と開発ノウハウの紹介〜
 
SkyWayで作るボイスチャット
SkyWayで作るボイスチャットSkyWayで作るボイスチャット
SkyWayで作るボイスチャット
 
WebRTC Build MCU on browser
WebRTC Build MCU on browserWebRTC Build MCU on browser
WebRTC Build MCU on browser
 

Similar to WebRTC概説(P2P)

レポート
レポートレポート
レポート
xin song
 
レポート
レポートレポート
レポート
xin song
 
SkyWayとWebRTC開発者コミュニティ4年間の軌跡とCMC_Meetupで学んだこと、実践したこと
SkyWayとWebRTC開発者コミュニティ4年間の軌跡とCMC_Meetupで学んだこと、実践したことSkyWayとWebRTC開発者コミュニティ4年間の軌跡とCMC_Meetupで学んだこと、実践したこと
SkyWayとWebRTC開発者コミュニティ4年間の軌跡とCMC_Meetupで学んだこと、実践したこと
Yusuke Naka
 
HTML5 Japan Cup (5jCup) WebRTC賞
HTML5 Japan Cup (5jCup) WebRTC賞HTML5 Japan Cup (5jCup) WebRTC賞
HTML5 Japan Cup (5jCup) WebRTC賞
Ryosuke Otsuya
 

Similar to WebRTC概説(P2P) (20)

ビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探る
ビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探るビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探る
ビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探る
 
Vuzix Developer Conference
Vuzix Developer ConferenceVuzix Developer Conference
Vuzix Developer Conference
 
レポート
レポートレポート
レポート
 
レポート
レポートレポート
レポート
 
Real time Media streaming Web technologies
Real time Media streaming Web technologiesReal time Media streaming Web technologies
Real time Media streaming Web technologies
 
5分でわかるWebRTCの仕組み - html5minutes vol.01
5分でわかるWebRTCの仕組み - html5minutes vol.015分でわかるWebRTCの仕組み - html5minutes vol.01
5分でわかるWebRTCの仕組み - html5minutes vol.01
 
WebRTC再び
WebRTC再びWebRTC再び
WebRTC再び
 
About WebRTC
About WebRTCAbout WebRTC
About WebRTC
 
Magic Leap で WebRTC 触ってみた
Magic Leap で WebRTC 触ってみたMagic Leap で WebRTC 触ってみた
Magic Leap で WebRTC 触ってみた
 
ブラウザからWeb OSへ〜Web - TV連携事例からその可能性を探る〜
ブラウザからWeb OSへ〜Web - TV連携事例からその可能性を探る〜ブラウザからWeb OSへ〜Web - TV連携事例からその可能性を探る〜
ブラウザからWeb OSへ〜Web - TV連携事例からその可能性を探る〜
 
最新Web 通信系API総まくり!WebRTC, Streams, Push api etc.
最新Web 通信系API総まくり!WebRTC, Streams, Push api etc.最新Web 通信系API総まくり!WebRTC, Streams, Push api etc.
最新Web 通信系API総まくり!WebRTC, Streams, Push api etc.
 
WebRTCとPeer.jsを使った実装
WebRTCとPeer.jsを使った実装WebRTCとPeer.jsを使った実装
WebRTCとPeer.jsを使った実装
 
2013 WebRTC node
2013 WebRTC node2013 WebRTC node
2013 WebRTC node
 
SkyWayとWebRTC開発者コミュニティ4年間の軌跡とCMC_Meetupで学んだこと、実践したこと
SkyWayとWebRTC開発者コミュニティ4年間の軌跡とCMC_Meetupで学んだこと、実践したことSkyWayとWebRTC開発者コミュニティ4年間の軌跡とCMC_Meetupで学んだこと、実践したこと
SkyWayとWebRTC開発者コミュニティ4年間の軌跡とCMC_Meetupで学んだこと、実践したこと
 
Web of Thingsの現状とWebRTC活用の可能性
Web of Thingsの現状とWebRTC活用の可能性Web of Thingsの現状とWebRTC活用の可能性
Web of Thingsの現状とWebRTC活用の可能性
 
WebRTCについて
WebRTCについてWebRTCについて
WebRTCについて
 
HTML5 Japan Cup (5jCup) WebRTC賞
HTML5 Japan Cup (5jCup) WebRTC賞HTML5 Japan Cup (5jCup) WebRTC賞
HTML5 Japan Cup (5jCup) WebRTC賞
 
Web OSで可能になる世界
Web OSで可能になる世界Web OSで可能になる世界
Web OSで可能になる世界
 
Kilimanjaro Event
Kilimanjaro EventKilimanjaro Event
Kilimanjaro Event
 
HCL Sametime V12 概要
HCL Sametime V12 概要HCL Sametime V12 概要
HCL Sametime V12 概要
 

WebRTC概説(P2P)