More Related Content Similar to WebブラウザでP2Pを実現する、WebRTCのAPIと周辺技術 Similar to WebブラウザでP2Pを実現する、WebRTCのAPIと周辺技術 (20) 25. メディア接続
// メディアに関する設定
var constraint = {
audio: true,
video: true
};
navigator.webkitGetUserMedia(
constraint,
successCallback,
errorCallback
);
constraint:
audio: マイクを使うかどうか
video: カメラを使うかどうか
successCallback:
メディア接続成功時のコールバック
errorCallback:
メディア接続失敗時のコールバック
28. Offer / Answer Offer
Answer
Session Description Protocolの生成
Local / RemoteのSDPをセットする
電話での通話イメージに近い
29. Offer / Answer
Telephone
Bさんに電話しよう Aさんから着信だ
電話に出ようつながった
Phone Carrier Server
Offer送信
Local Descriptionセット Offer着信
Remote Description着信
Answer送信
Remote Descriptionセット
Local Descriptionセット
Answer着信
Remote Descriptionセット
① ②
③④
35. Signaling Server
var ws = require(‘websocket.io’);
var server = ws.listen(8124);
// 接続イベント
server.on(‘connection’, function(socket) {
socket.on(‘message’, function(data) {
console.log(‘Message received:’ + data);
// 接続者全員にブロードキャスト
server.client.forEach(function(client) {
client && client.send(data);
});
});
});
シンプルな
WebSocket
$ node server.js
37. SDP
SDP Sample
v=0
o=- 6636874602225569115 2 IN IP4 127.0.0.1
...
m=audio 1 RTP/SAVPF 111 103 104 0 8 106 105 13 126
...
m=video 1 RTP/SAVPF 100 116 117
...
a=sctpmap:5000 webrtc-datachannel 1024
a=ssrc:3712708814 cname:dgbXDOpXGNofSBNB
a=ssrc:3712708814 msid:RTCDataConnection RTCDataConnection
a=ssrc:3712708814 mslabel:RTCDataConnection
a=ssrc:3712708814 label:RTCDataConnection
43. IceCandidate sample
IceCandidate
mid: video, candidate: a=candidate:1574647786 1
udp 2113937151 xxx.xxx.xxx.xx 64219
typ host generation 0
mid: video, candidate: a=candidate:4102338623 1
udp 1845501695 yyy.yyy.yyy.yy 41073
typ srflx raddr xxx.xxx.xxx.xx rport 64219 generation 0
57. Universal Plug and Play
デバイスを接続するだけでネットワークに参加できる仕組み
動的にNAT変換テーブルを制御可能
モデム側で対応していないといけない
UPnP
60. Simple Traversal of UDP through NATs
RFC3489にて仕様策定
stun.l.google.com:19302
stun.services.mozilla.com
STUN
63. var PublicIP = ‘xxx.xxx.xxx.xxx’;
if ( Stun.hasReceivedFrom(defferentAddr, differentPort) ) {
return Stun.FullConeNATs;
} else if ( Stun.hasReceivedFrom(sameAddr, samePort) ) {
if ( Stun.isConstantIP(PublicIP) ) {
return Stun.SymmetricNATs;
}
if ( Stun.hasReceivedFrom(sameAddr, differrentPort) ) {
return Stun.AddressRestrictedNATs;
} else {
return Stun.PortRestrictedNATs;
}
}
STUN
Algorithm
66. STUN
UDP Hole Punching(1/3)
Local Machine A
P: 192.168.0.1:255
Local Machine B
P: 192.168.0.2:255
NAT-ANAT-B
IP:Port AIP:Port B
IP:PortA->IP:PortBへパケットを送信するが、
NAT-Bはこのパケットを破棄する
IP:PortB -> IP:PortA
へのパケットは
疎通可能になる(NAT-A)
67. STUN
UDP Hole Punching(2/3)
Local Machine A
P: 192.168.0.1:255
Local Machine B
P: 192.168.0.2:255
NAT-ANAT-B
IP:Port AIP:Port B
IP:PortB->IP:PortAへパケットを送信すると、
NAT-Aはこのパケットを受信する
IP:PortA -> IP:PortB
へのパケットは
疎通可能になる(NAT-B)
68. STUN
UDP Hole Punching(3/3)
Local Machine A
P: 192.168.0.1:255
Local Machine B
P: 192.168.0.2:255
NAT-ANAT-B
IP:Port AIP:Port B
IP:PortA->IP:PortBへ再度パケットを送信すると、
NAT-Bは今度はパケットを受信する
IP:PortA / IP:PortB
にUDPパケットの
穴が開いた状態
69. NATタイプによるP2P
NAT Type Full cone Address-Rest Port-Rest Symmetric
Full cone
Address-Rest
Port-Rest
Symmetric
P2P
Enables
Using UDP Hole Punching
70. Traversal Using Relay NAT
パケット送受信を外部サーバがRelay
することで、より完全なNAT越え問題を解決する
その特性より、主にSymmetric NATに対して有効で
あるプロトコル
RFC 5766にて仕様策定
TURN
72. TURN Relay Server
Local Machine
P: 192.168.0.1:5678
xxx.xxx.xxx.xx:34567 TURNTURN Server
Local Machine
P: 192.168.0.2:5678
Relay
73. NATタイプによるP2P
NAT Type Full cone Address-Rest Port-Rest Symmetric
Full cone
Address-Rest
Port-Rest
Symmetric
P2P
Enables
Using UDP Hole Punching
Using TURN Relay
78. function initializeDataChannel(dataChannel) {
dataChannel.onmessage = function(evt) {
var message = evt.data;
// do something
};
dataChannel.onopen = function() {
// do something
};
dataChannel.onclose = function() {
// do something
};
dataChannel.onerror = function() {
// do something
};
}
DataChannel生成(2/2)
WebSocketと
同じイベントI/F
80. Data Channel Transports
Reliable mode
SCTPプロトコルで転送
データの順序は保証され、再送制御も内部でかかる
Non-Reliable mode
RTPプロトコルで転送
データの順序は保証されず、再送制御も実装する必要がある
Channel間で互換性が保てない><
older
85. WebRTC - Overview
http://www.webrtc.org/
[PDF] ICE TURN/STUN tutorial
http://sdstrowes.co.uk/talks/20081031-ice-turn-stun-tutorial.pdf
WebRTC 1.0: Real-time Communication Between Browsers
http://www.w3.org/TR/webrtc/
WebRTC in the real world: STUN, TURN and signaling
http://www.html5rocks.com/en/tutorials/webrtc/infrastructure/
Interactive Connectivity Establishment (ICE):
A Protocol for Network Address Translator (NAT) Traversal for Offer/Answer Protocols
https://tools.ietf.org/html/rfc5245
SDP: Session Description Protocol
http://tools.ietf.org/html/rfc4566
STUN - Simple Traversal of User Datagram Protocol (UDP)
Through Network Address Translators (NATs
http://tools.ietf.org/html/rfc3489
Traversal Using Relays around NAT (TURN):
Relay Extensions to Session Traversal Utilities for NAT (STUN)
http://tools.ietf.org/html/rfc5766
Thanks!
Resources
