WEB RTC
peer 2 peer
& media
Real time communications
consist of 3 API's:
Get media data
Send media data
Send arbitrary data
get user Media
Web cam
Mic
Screen cap
Sensors data
Peripheral devices
get user media
// request media stream from browser
navigator.getUserMedia(constraints, successCallback, errorCallback);
// Specify which streams exactly do we want
var constraints = {audio: false, video: true};
// And what to do when we get them
function successCallback(stream) { var video = document.querySelector("video"); // Special URL Object video.src = window.URL.createObjectURL(stream); video.play(); }
Sending Media data
handled by browser
Codecs & compression
Packet loss handling
Echo cancellation
Noise reduction
Image cleaning
Jitter buffering
Gain control
But need to know receivers capabilities
Signaling
Not part of web-rtc
Need to find and connect 2 peers:
Exchange Addresses
Capabilities
Session control
If we were on the same machine
let pc1 = RTCPeerConnection(config);
let pc2 = RTCPeerConnection(config);
pc1_navigator.getUserMedia(constraints, function (pc1Stream){
pc1.addStream(pc1Stream);
pc1.createOffer(function /*offerReady*/ (offerDescription){
pc1.setLocalDescription(offerDescription);
pc2.setRemoteDescription(offerDescription);
pc2.createAnswer(function /*answerReady*/ (pc2Description){
pc1.setRemoteDescription(pc2Description);
});
});
});
pc2.onaddstream = function /*gotRemoteStream*/(e){
vid2.src = URL.createObjectURL(e.stream);
}
Session establishment
let signalingChannel = createSignalingChannel(); let myPc = new RTCPeerConnection(configuration); myPc.onaddstream = function /*incomingStreamCallback*/(e) { videoElem.src = URL.createObjectURL(e.stream);
} // need to know my own capabilities [ from navigator.getUserMedia()
myPc.addStream(localStream); // When I know my own capabilities myPc.createOffer(offerReadyCallback);
function offerReadyCallback(offer) {
myPc.setLocalDescription(offer);
signalingChannel.sendOfferToBob(offer, gotAnswerFromBobCB);
}
function gotAnswerFromBobCB(bobsDescription) {
myPc.setRemoteDescription(bobsDescription);
}
Ideally
CORPORATELY
What is my ip . com port
fallback: Turn
arbitrary app data
// RTCPeerConnection setup and offer-answer exchange omitted
var dataChannel1 = pc1.createDataChannel("channelName");
var dataChannel2 = pc2.createDataChannel("channelName");
dataChannel.onmessage = function(e) {
console.log(e.data);
};
dataChannel2.send("Hello world");
Topology ?
Topology ?
Topology ?
More information
Excellent tutorial (15 min to read)
Great video from Google I/O conf 2013
WEB RTC
By intval
WEB RTC
- 885