ContextQMD
Back to Webrtc Experiment

WebRTC for Beginners

docs/webrtc-for-beginners.html

latest7.9 KB
Original Source

This tutorial is out-dated (written in 2013). Please check this tutorial instead: https://codelabs.developers.google.com/codelabs/webrtc-web/#0

Suggestions

  1. If you're newcomer, newbie or beginner; you're suggested to try RTCMultiConnection.js or DataChannel.js libraries.

Getting USER MEDIA using Chrome media capture APIs

First of all: you need to get access to microphone and camera if you want to build a video streaming app.

var[streamToAttach](#addStream "To allow your friend hear your voice and see you: we will share your microphone and camera.");
navigator. **webkitGetUserMedia** ({ audio: **true** , video: **true** }, function (stream) {
    video.src = webkitURL. **createObjectURL** (stream);[streamToAttach](#addStream)= stream;
}, function(error) {
    alert(error);
});

Getting USER MEDIA using Firefox media capture APIs

var[streamToAttach](#addStream "To allow your friend hear your voice and see you: we will share your microphone and camera.");
navigator. **mozGetUserMedia** ({ audio: **true** , video: **true** }, function (stream) {
    video.mozSrcObject = stream;
    video.play();[streamToAttach](#addStream)= stream;
}, function(error) {
    alert(error);
});

There are following possible situations:

  1. A person wants to share camera with his friend(s): so, he will make an offer to his friend to join him.
    He is the offerer.
  2. A person who receives an offer from a friend: so, he will join him. He is the answerer.

There are so many other possible situations. Let go to the point.

Offerer

The first situation: a person wants to make an offer request to his friend. He will create offer sdp and send that sdp to his friend.

First of all: we need to open a peer connection:

varpeerConnection= new **webkitRTCPeerConnection** (
    { " **iceServers**": [{ "url": " **stun** :stun.l.google.com:19302" }] }
);

webkitRTCPeerConnection (or mozRTCPeerConnection ) constructor takes two objects (arguments):

  1. ICE servers (STUN or TURN)
  2. Optional (like RtpDataChannels)

For Firefox, you can use this STUN server:
{ " iceServers": [{ "url": " stun :stun.services.mozilla.com" }] }

Setting event handlers for peer connection object:

[peerConnection](#peerConnection). **onicecandidate** =[onicecandidate](#onicecandidate-func);[peerConnection](#peerConnection). **onaddstream** =[onaddstream](#onaddstream-func);[peerConnection](#peerConnection). **addStream** ([streamToAttach](#streamToAttach));

In simple words: onicecandidate returns locally generated ICE candidates so you can pass them over other peer(s) via XHR or Socket.

  • "locally-generated" means ice candidates that are trickled or gathered for your peer object; i.e. list of ice candidates that are returned by STUN/TURN servers; these ice candidates contains your public ipv4/ipv6 addresses as well as UDP random addresses; you need to share these ice candidates with target peer so WebRTC ICE Agent can use your ports to setup your connection with target peer!

onaddstream returns remote stream (microphone and camera of your friend!).

peerConnection.addStream attaches your local microphone and camera for other peer.

Creating Offer SDP

[peerConnection](#peerConnection). **createOffer** (function (sessionDescription) {[peerConnection](#peerConnection). **setLocalDescription** (sessionDescription);// POST-Offer-SDP-For-Other-Peer(sessionDescription. **sdp** , sessionDescription. **type** );}, function(error) {
    alert(error);
}, { ' **mandatory**': { ' **OfferToReceiveAudio**': true, ' **OfferToReceiveVideo**': true } });

Answerer

Assume that you sent offer sdp to your friend using XHR. Now, "process" that offer sdp and then create answer sdp and send it back to offerer:

setRemoteDescription!

[peerConnection](#peerConnection). **setRemoteDescription** (new **RTCSessionDescription** ([offerSDP](#offer-sdp)));

And to createAnswer...

[peerConnection](#peerConnection). **createAnswer** (function (sessionDescription) {[peerConnection](#peerConnection). **setLocalDescription** (sessionDescription);// POST-answer-SDP-back-to-Offerer(sessionDescription. **sdp** , sessionDescription. **type** );}, function(error) {
    alert(error);
}, { ' **mandatory**': { ' **OfferToReceiveAudio**': true, ' **OfferToReceiveVideo**': true } });

Offerer received answer sdp from answerer

setRemoteDescription!

[peerConnection](#peerConnection). **setRemoteDescription** (new **RTCSessionDescription** ([answerSDP](#answer-sdp)));

Offer/Answer exchange is done. What remaining is ICE candidates.

On getting locally generated ICE

function[onicecandidate](#onicecandidate)(event) {
    if (! [peerConnection](#peerConnection)|| !event || !event.candidate) return;
    var candidate = event. **candidate** ;// POST-ICE-to-other-Peer(candidate. **candidate** , candidate. **sdpMLineIndex** );}

On getting ICE sent by other peer

[peerConnection](#peerConnection). **addIceCandidate** (new **RTCIceCandidate** ({ **sdpMLineIndex** : candidate. **sdpMLineIndex** , **candidate** : candidate. **candidate** }));

onaddstream event handling

function[onaddstream](#onaddstream)(event) {
    if (!event) return;
    remote_video.src = webkitURL. **createObjectURL** (event. **stream** );
    // remote_video.mozSrcObject = event. **stream** ;
}

Wait until remote stream starts flowing

function[onaddstream](#onaddstream)(event) {
    if (!event) return;
    remote_video.src = webkitURL. **createObjectURL** (event. **stream** );
    // remote_video.mozSrcObject = event. **stream** ;[waitUntilRemoteStreamStartsFlowing](#waitUntilRemoteStreamStartsFlowing)();
}

function **waitUntilRemoteStreamStartsFlowing** ()
{
    if (!(remote_video. **readyState** <= HTMLMediaElement. **HAVE\_CURRENT\_DATA** || remote_video. **paused** || remote_video. **currentTime** <= 0)) 
    {// remote stream started flowing!} 
    else **setTimeout** ([waitUntilRemoteStreamStartsFlowing](#waitUntilRemoteStreamStartsFlowing), 50);
}

Single Page Demos

  1. Simplest Example!
  2. Simple Demo using Socket.io
  3. Simple Demo using WebSocket
  4. A few other single-page demos can be found here

Real Demos

  1. Simple demo using WebSockets / Source Code
  2. Simple demo using Socket.io / Source Code

Other Tutorials

  1. Are you interested in a "more" simple full-fledged guide? Read this tutorial.
  2. Are you interested in a "more" detailed guide? Read this tutorial.
  3. You can find many tutorials here: https://www.webrtc-experiment.com/#documentations

Latest Updates

Feedback

Send MessageEnter your email too; if you want "direct" reply!