WebRTC

.
,
. , -
, ,
.

.
p2p- Flash
Player,
(chanks) ,
, ( )
ffmpeg/FMS/Wowza/ . -
. Flash p2p-
(- Flash
Player
?). . Opera ( -
).
.
, Flash p2p-
. ,
(.. ,
P2P-).
Flash p2p .
,
. , , ,
.
- , (Adobe
Cirrus) ( ,
Cumulus).
( 2012-
).

WebRTC Web Real-Time Communication, Google.

( ).
:
1. - (, ) getUserMedia

2. , -- (peer to peer, p2p)

MediaStreams
3.
- DataChannel
DataChannel
( ),
:

 Chrome Firefox

-.
WebRTC
Flash p2p.
Flash p2p Video: http://videotell.lazyflash.ru/
WebRTC: https://vibler-demos.appspot.com/
, WebRTC ,
- . .. WebRTC
, -,
.
DataChannel. , , -
-
, ,
-.
, .
.

:
http://webrtc.lazyflash.ru/getUserMedia.html ( Google
Chrome) , .
1.
navigator.webkitGetUserMedia({video:true}, gotStream, notStream );
( , Firefox
-. ).
-.
/.
.
, , ,
( ). ,
{video:true,audio:true}.
, ,
.
stream.
, ,
/ .
2. , gotStream(stream).
- HTML5-
<video id=vid>. : video.src =
webkitURL.createObjectURL(stream);

 webkitURL
createObjectURL(stream),
blob-,
- video.src.
( Firefox )
, WebRTC.
,
,
, , ( ).
: http://webrtc.lazyflash.ru/constraintsand-stats.html (. cameraConstraints() )

PeerConnection MediaStreams
WebRTC -
. 3
:

1. - ( )
2. - PeerConnection
3. PeerConnection
(, , )


( ).
: http://webrtc.lazyflash.ru/pc1.html
, (
). ,
,
.
PeerConnection .
-, , PeerConnection.
, .
, - . ,
,

( ,
).
, Ctrl+Shift+I,
.

:
This appears to be Chrome adapter.js:47 js-,

77.786: Requesting local stream pc1.html:51 getUserMedia()

80.522: Received local stream pc1.html:51
-
90.329: Starting call pc1.html:51
90.329: Using Video device: USB2.0 Camera pc1.html:51
, USB2.0 Camera
90.330: Using Audio device: Default pc1.html:51
,
90.330: Created local peer connection object pc1 pc1.html:51
90.331: Created remote peer connection object pc2 pc1.html:51
90.335: Adding Local Stream to peer connection pc1.html:51 -
90.354: Offer from pc1

* *

90.377: Received remote stream pc1.html:51 -

90.383: Answer from pc2 -

* *
90.404: Local ICE candidate: -

90.406: Remote ICE candidate: -

, .
.
(Ctrl+U).
start(), .
, ,
,
navigator.webkitGetUserMedia({video:true}, gotStream, notStream );
getUserMedia({audio:true,video:true},
gotStream,function(){});
:
// Call into getUserMedia via the polyfill (adapter.js).

, js-,

.
js/adapter.js
gotStream() adapter.js,
-. ,
localStream,
-
.
. call().
:
var servers = null;
pc1 = new RTCPeerConnection(servers);
trace("Created local peer connection object pc1");
pc1.onicecandidate = iceCallback1;
pc2 = new RTCPeerConnection(servers);
trace("Created remote peer connection object pc2");
pc2.onicecandidate = iceCallback2;
pc2.onaddstream = gotRemoteStream;

 PeerConnection,
. , .

PeerConnection-
, , PeerConnection (
- .) (local)
(remote). , ,
(broadcaster )
(receiver , ).
, .

, .. .
var servers = null;
pc1 = new RTCPeerConnection(servers);
trace("Created local peer connection object pc1");
pc1.onicecandidate = iceCallback1;

,
. , call()
, pc1.
pc1.addStream(localstream);
trace("Adding Local Stream to peer connection");
pc1.createOffer(gotDescription1);

, (pc1) -
localStream, addStream(localStream).
, - pc1
.
(offer),
pc1.createOffer(gotDescription1). pc1
.
.
, ip , /
. ,
.
pc1.createOffer()
gotDescription1. .
.
function gotDescription1(desc)
{

pc1.setLocalDescription(desc);
trace("Offer from pc1 \n" + desc.sdp);
pc2.setRemoteDescription(desc);
// Since the "remote" side has no media stream we need
// to pass in the right constraints in order for it to
// accept the incoming offer of audio and video.
pc2.createAnswer(gotDescription2, null, sdpConstraints);
}
desc.
. ,
- (local session
description), (remote session description).
, :
v=0
o=- 2232116005 2 IN IP4 127.0.0.1
s=t=0 0
a=group:BUNDLE audio video
a=msid-semantic: WMS 60mUiThE2LHYFStjJllfNve6hItyvYfwcXO0
( . .

http://webrtc.lazyflash.ru/pc1.html)

, ,
, .
gotDescription1(desc) pc1
(desc) :
pc1.setLocalDescription(desc);
pc2
:
pc2.setRemoteDescription(desc);
/-, ip, , .
pc1 . pc1
-, .
.
, , pc2.
, call(), , pc2.
pc2 = new RTCPeerConnection(servers);
trace("Created remote peer connection object pc2");
pc2.onicecandidate = iceCallback2;
pc2.onaddstream = gotRemoteStream;

 :
pc2 = new RTCPeerConnection(servers);
(, servers? , )
:
pc2.onicecandidate = iceCallback2;
pc2.onaddstream = gotRemoteStream;
onICECandidate NAT,
.
onAddStream , .
, pc2
. , call() . ,
, , gotDescription1(desc)
pc2. .
pc2.setRemoteDescription(desc);
// Since the "remote" side has no media stream we need
// to pass in the right constraints in order for it to
// accept the incoming offer of audio and video.
pc2.createAnswer(gotDescription2, null, sdpConstraints);
, pc2 desc
:
pc2.setRemoteDescription(desc);
, pc2 ( !),
(answer), (pc1),
(pc2) . :
pc2.createAnswer(gotDescription2, null, sdpConstraints);
createAnswer() .
( ), .
, ,
, - ( / ) .
. ( createOffer()).
http://webrtc.lazyflash.ru/pc1.html
function gotDescription2(desc)
{
pc2.setLocalDescription(desc);
trace("Answer from pc2 \n" + desc.sdp);

pc1.setRemoteDescription(desc);
}
(desc). (pc2)
:
pc2.setLocalDescription(desc);
(pc1) :
pc1.setRemoteDescription(desc);
.
:

pc1 ( createOffer()) (
), ( -) pc2, (
pc2 ).
, pc2 ( createAnswer()), (
), ( -)
pc1 ( pc1 ).
,
NAT. , , .

NAT
NAT Hole Punching - WebRTC-.
, , ,
OSI. , web ,
. ,
.
OSI - 7- , :
, , , , ,
. (

 : http://ru.wikipedia.org/wiki/__OSI),
,
.
, / 0/1.
, ,
. , , (
OSI).
JPEG .
, (
), .
, , -
, , .
-
, .
, ,
.
, ( , , ),
, - ,
, .
, -
( ,
).
OSI.
, -, ,
.
,
, . , , -
. - (),
. , , ,
, ..
. , ,
- , .
, ?
. ,
, .
.
. , .
, , ,
. , , ,
. ,

 , ,
.
. web (HTTP,
FTP .). WebRTC ,
.
,
. , - , -
?
, , , . ?
, ,
.
. ,
, ,
(.. ,
).
, .
, , , ,
, , -, -,
. ,
, .
,
. , , Windows,
Android.
, (
2000-,
). ,
, .
, , , web-.
, .
, , -, ,
.
NAT.
NAT?
NAT (Network Address Translation - ). ,
ip- .
(, : http://ru.wikipedia.org/wiki/NAT).
, , NAT Ethernet- WiFi-,
-,
, .
:

 Home WiFi Router NAT.

ip-,
-, . ,
ip- .
ip- .

 , , ,
- ,
ip-. p2p-
, , , :

 , -
, ,
, - -
.
NAT. WebRTC ICE (Interactive Connectivity Establishment ).
: ,
, (STUN). STUN- ,
, . .
( STUN : http://ru.wikipedia.org/wiki/STUN,
RFC 3489: http://tools.ietf.org/html/rfc3489). :

, STUN-,
,
.
STUN- (pc1, pc2 js-)
onICECandidate. call() ,
. :
pc1.onicecandidate = iceCallback1;
pc2 = new RTCPeerConnection(servers);

trace("Created remote peer connection object pc2");

pc2.onicecandidate = iceCallback2;
onICECandidate iceCallback1
iceCallback2. , , ICE.
function iceCallback1(event)
{
if (event.candidate)
{
pc2.addIceCandidate(new RTCIceCandidate(event.candidate));
trace("Local ICE candidate: \n" + event.candidate.candidate);
}
}
ICE- (ICE Candidates) ,
STUN-.
NAT. ICE-,
-.
, iceCallback1 pc1. ,
pc2.
iceCallback2 pc2,
pc1.
http://webrtc.lazyflash.ru/pc1.html STUN-
,
.
ICE- ,
-. ,
, ,
.. - .. ,
-
, .
( , : https://viblerdemos.appspot.com) .
WebSocket (
, SockJS).

STUN- TURN-
http://webrtc.lazyflash.ru/pc1.html
STUN/ TURN-, ..
.
https://vibler-demos.appspot.com STUN Google:

function createPeerConnection()
{
var pc_config = {"iceServers": [{"url":
"stun:stun.l.google.com:19302"}]};
try {
// Create an RTCPeerConnection via the polyfill (adapter.js).
pc = new RTCPeerConnection(pc_config);
pc.onicecandidate = onIceCandidate;

. STUN- 85%
.
TURN- -
15% . :

, T D
NAT
T D ICE- TURN. TURN-
.
STUN/TURN-
: http://numb.viagenie.ca
STUN- Google: stun.l.google.com:19302

 js- TURN- ( )
:
{"url":"turn:<>@numb.viagenie.ca:3478","credential":"<>"}
STUN- VPN,
STUN-
.

_
. :
, DataChannels, ,
WebRTC-.