WebRTC Book Demo Code Download

You can download all the demo code in this zip file, or cut and paste the individual files below.

server.js code

// Copyright 2013 Digital Codex LLC
// You may use this code for your own education.  If you use it
// largely intact, or develop something from it, don't claim
// that your code came first.  You are using this code completely
// at your own risk.  If you rely on it to work in any particular
// way, you're an idiot and we won't be held responsible.

var http = require("http");
var url = require("url");
var fs = require('fs');

var log = require("./log").log;
var serveFileDir = "";

// Sets the path to the static files (HTML, JS, etc.)
function setServeFilePath(p) {
  serveFilePath = p;
}
exports.serveFilePath = setServeFilePath;

// Creates a handler to collect POSTed data and to route the
// request based on the path name
function start(handle, port) {
  function onRequest(req, res) {
    var urldata = url.parse(req.url,true),
        pathname = urldata.pathname,
        info = {"res": res,
                "query": urldata.query,
                "postData":""};
 
    log("Request for " + pathname + " received");
    req.setEncoding("utf8");
    req.addListener("data", function(postDataChunk) {
      info.postData += postDataChunk;
      log("Received POST data chunk '"+ postDataChunk + "'.");
    });
    req.addListener("end", function() {
      route(handle, pathname, info);
    });
  }

http.createServer(onRequest).listen(port);
 
  log("Server started on port " + port);
}

exports.start = start;

// Determines whether requested path is a static file or a custom
// path with its own handler
function route(handle, pathname, info) {
  log("About to route a request for " + pathname);
  // Check if path after leading slash is an existing file that
  // can be served
  var filepath = createFilePath(pathname);
  log("Attempting to locate " + filepath);
  fs.stat(filepath, function(err, stats) {
    if (!err && stats.isFile()) {  // serve file
      serveFile(filepath, info);
    } else {  // must be custom path
      handleCustom(handle, pathname, info);
    }
  });
}

// This function adds the serveFilePath to the beginning of the
// given pathname after removing .., ~, and other such
// problematic syntax bits from a security perspective.
// ** There is no claim that this is now secure **
function createFilePath(pathname) {
  var components = pathname.substr(1).split('/');
  var filtered = new Array(),
      temp;

for(var i=0, len = components.length; i < len; i++) {
    temp = components[i];
    if (temp == "..") continue;    // no updir
    if (temp == "") continue;      // no root
    temp = temp.replace(/~/g,'');   // no userdir
    filtered.push(temp);
  }
  return (serveFilePath + "/" + filtered.join("/"));
}

// Opens, reads, and sends to the client the contents of the
// named file
function serveFile(filepath, info) {
  var res = info.res,
      query = info.query;

log("Serving file " + filepath);
  fs.open(filepath, 'r', function(err, fd) {
    if (err) {log(err.message);
              noHandlerErr(filepath, res);
              return;}
    var readBuffer = new Buffer(20480);
    fs.read(fd, readBuffer, 0, 20480, 0,
      function(err, readBytes) {
        if (err) {log(err.message);
                  fs.close(fd);
                  noHandlerErr(filepath, res);
                  return;}
        log('just read ' + readBytes + ' bytes');
        if (readBytes > 0) {
          res.writeHead(200,
                        {"Content-Type": contentType(filepath)});
          res.write(
            addQuery(readBuffer.toString('utf8', 0, readBytes),
                     query));
        }
        res.end();
      });
    });
}

// Determine content type of fetched file
function contentType(filepath) {
  var index = filepath.lastIndexOf('.');

if (index >= 0) {
    switch (filepath.substr(index+1)) {
      case "html":  return ("text/html");
      case "js":  return ("application/javascript");
      case "css":  return ("text/css");
      case "txt":  return ("text/plain");
      default:  return ("text/html");
    }
  }
  return ("text/html");
}

// Intended to be used on an HTML file, this function replaces
// the first empty script block in the file with an object
// representing all query parameters included on the URI of the
// request
function addQuery(str, q) {
  if (q) {
    return str.replace('<script></script>',
                       '<script>var queryparams = ' +
                         JSON.stringify(q) + ';</script>');
  } else {
    return str;
  }
}

// Confirm handler for non-file path, then execute it
function handleCustom(handle, pathname, info) {
  if (typeof handle[pathname] == 'function') {
    handle[pathname](info);
  } else {
    noHandlerErr(pathname, info.res);
  }
}

// If no handler is defined for the request, return 404
function noHandlerErr(pathname, res) {
  log("No request handler found for " + pathname);
  res.writeHead(404, {"Content-Type": "text/plain"});
  res.write("404 Page Not Found");
  res.end();
}

serverXHRSignalingChannel.js code

var log = require("./log").log;

var connections = {},
    partner = {},
    messagesFor = {};

// queue the sending of a json response
function webrtcResponse(response, res) {
  log("replying with webrtc response " +
      JSON.stringify(response));
  res.writeHead(200, {"Content-Type":"application/json"});
  res.write(JSON.stringify(response));
  res.end();
}

// send an error as the json WebRTC response
function webrtcError(err, res) {
  log("replying with webrtc error:  " + err);
  webrtcResponse({"err": err}, res);
}

// handle XML HTTP Request to connect using a given key
function connect(info) {
  var res = info.res,
      query = info.query,
      thisconnection,
      newID = function() {
        // create large random number unlikely to be repeated
        // soon in server's lifetime
        return Math.floor(Math.random()*1000000000);
      },
      connectFirstParty = function() {
        if (thisconnection.status == "connected") {
          // delete pairing and any stored messages
          delete partner[thisconnection.ids[0]];
          delete partner[thisconnection.ids[1]];
          delete messagesFor[thisconnection.ids[0]];
          delete messagesFor[thisconnection.ids[1]];
        }
        connections[query.key] = {};
        thisconnection = connections[query.key];
        thisconnection.status = "waiting";
        thisconnection.ids = [newID()];
        webrtcResponse({"id":thisconnection.ids[0],
                        "status":thisconnection.status}, res);
      },
      connectSecondParty = function() {
        thisconnection.ids[1] = newID();
        partner[thisconnection.ids[0]] = thisconnection.ids[1];
        partner[thisconnection.ids[1]] = thisconnection.ids[0];
        messagesFor[thisconnection.ids[0]] = [];
        messagesFor[thisconnection.ids[1]] = [];
        thisconnection.status = "connected";
        webrtcResponse({"id":thisconnection.ids[1],
                        "status":thisconnection.status}, res);
      };

log("Request handler 'connect' was called.");
  if (query && query.key) {
    var thisconnection = connections[query.key] ||
                         {status:"new"};
    if (thisconnection.status == "waiting") { // first half ready
      connectSecondParty(); return;
    } else { // must be new or status of "connected"
      connectFirstParty(); return;
    }
  } else {
    webrtcError("No recognizable query key", res);
  }
}
exports.connect = connect;

// Queues message in info.postData.message for sending to the
// partner of the id in info.postData.id
function sendMessage(info) {
  log("postData received is ***" + info.postData + "***");
  var postData = JSON.parse(info.postData),
      res = info.res;

if (typeof postData === "undefined") {
    webrtcError("No posted data in JSON format!", res);
    return;
  }
  if (typeof (postData.message) === "undefined") {
    webrtcError("No message received", res);
    return;
  }
  if (typeof (postData.id) === "undefined") {
    webrtcError("No id received with message", res);
    return;
  }
  if (typeof (partner[postData.id]) === "undefined") {
    webrtcError("Invalid id " + postData.id, res);
    return;
  }
  if (typeof (messagesFor[partner[postData.id]]) ===
              "undefined") {
    webrtcError("Invalid id " + postData.id, res);
    return;
  }
  messagesFor[partner[postData.id]].push(postData.message);
  log("Saving message ***" + postData.message +
      "*** for delivery to id " + partner[postData.id]);
  webrtcResponse("Saving message ***" + postData.message +
                 "*** for delivery to id " +
                 partner[postData.id], res);
}
exports.send = sendMessage;

// Returns all messages queued for info.postData.id
function getMessages(info) {
  var postData = JSON.parse(info.postData),
      res = info.res;

if (typeof postData === "undefined") {
    webrtcError("No posted data in JSON format!", res);
    return;
  }
  if (typeof (postData.id) === "undefined") {
    webrtcError("No id received on get", res);
    return;
  }
  if (typeof (messagesFor[postData.id]) === "undefined") {
    webrtcError("Invalid id " + postData.id, res);
    return;
  }

log("Sending messages ***" +
      JSON.stringify(messagesFor[postData.id]) + "*** to id " +
      postData.id);
  webrtcResponse({'msgs':messagesFor[postData.id]}, res);
  messagesFor[postData.id] = [];
}
exports.get = getMessages;

index.js code

log.js code

clientXHRSignaling.js code

// This code creates the client-side commands for an XML HTTP
// Request-based signaling channel for WebRTC.

// The signaling channel assumes a 2-person connection via a
// shared key.  Every connection attempt toggles the state
// between "waiting" and "connected", meaning that if 2 browsers
// are connected and another tries to connect the existing
// connection will be severed and the new browser will be
// "waiting".

var createSignalingChannel = function(key, handlers) {

var id, status, doNothing = function(){},
  handlers = handlers || {},
  initHandler = function(h) {
    return ((typeof h === 'function') && h) || doNothing;
  },
  waitingHandler = initHandler(handlers.onWaiting),
  connectedHandler = initHandler(handlers.onConnected),
  messageHandler = initHandler(handlers.onMessage);

// Set up connection with signaling server
function connect(failureCB) {
  var failureCB = (typeof failureCB === 'function') ||
                  function() {};

// Handle connection response, which should be error or status
  //  of "connected" or "waiting"
  function handler() {
    if(this.readyState == this.DONE) {
      if(this.status == 200 && this.response != null) {
        var res = JSON.parse(this.response);
        if (res.err) {
          failureCB("error:  " + res.err);
          return;
        }

// if no error, save status and server-generated id,
        // then start asynchronouse polling for messages
        id = res.id;
        status = res.status;
        poll();

// run user-provided handlers for waiting and connected
        // states
        if (status === "waiting") {
          waitingHandler();
        } else {
	  connectedHandler();
        }
        return;
      } else {
        failureCB("HTTP error:  " + this.status);
        return;
      }
    }
  }

// open XHR and send the connection request with the key
  var client = new XMLHttpRequest();
  client.onreadystatechange = handler;
  client.open("GET", "/connect?key=" + key);
  client.send();
}

// poll() waits n ms between gets to the server.  n is at 10 ms
// for 10 tries, then 100 ms for 10 tries, then 1000 ms from then
// on. n is reset to 10 ms if a message is actually received.
function poll() {
  var msgs;
  var pollWaitDelay = (function() {
    var delay = 10, counter = 1;

function reset() {
      delay = 10;
      counter = 1;
    }

function value() {
      return delay;
    }

return {reset: reset, increase: increase, value: value};
  }());

// getLoop is defined and used immediately here.  It retrieves
  // messages from the server and then schedules itself to run
  // again after pollWaitDelay.value() milliseconds.
  (function getLoop() {
    get(function (response) {
      var i, msgs = (response && response.msgs) || [];

// if messages property exists, then we are connected   
      if (response.msgs && (status !== "connected")) {
        // switch status to connected since it is now!
        status = "connected";
        connectedHandler();
      }
      if (msgs.length > 0) {           // we got messages
        pollWaitDelay.reset();
        for (i=0; i<msgs.length; i+=1) {
          handleMessage(msgs[i]);
        }
      } else {                         // didn't get any messages
        pollWaitDelay.increase();
      }

// now set timer to check again
      setTimeout(getLoop, pollWaitDelay.value());
    });
  }());
}

// This function is part of the polling setup to check for
// messages from the other browser.  It is called by getLoop()
// inside poll().
function get(getResponseHandler) {

// response should either be error or a JSON object.  If the
  // latter, send it to the user-provided handler.
  function handler() {
    if(this.readyState == this.DONE) {
      if(this.status == 200 && this.response != null) {
        var res = JSON.parse(this.response);
        if (res.err) {
          getResponseHandler("error:  " + res.err);
          return;
        }
        getResponseHandler(res);
        return res;
      } else {
        getResponseHandler("HTTP error:  " + this.status);
        return;
      }
    }
  }

// open XHR and request messages for my id
  var client = new XMLHttpRequest();
  client.onreadystatechange = handler;
  client.open("POST", "/get");
  client.send(JSON.stringify({"id":id}));
}

// Schedule incoming messages for asynchronous handling.
// This is used by getLoop() in poll().
function handleMessage(msg) {   // process message asynchronously
  setTimeout(function () {messageHandler(msg);}, 0);
}

// Send a message to the other browser on the signaling channel
function send(msg, responseHandler) {
  var reponseHandler = responseHandler || function() {};

// parse response and send to handler
  function handler() {
    if(this.readyState == this.DONE) {
      if(this.status == 200 && this.response != null) {
        var res = JSON.parse(this.response);
        if (res.err) {
          responseHandler("error:  " + res.err);
          return;
        }
        responseHandler(res);
        return;
      } else {
        responseHandler("HTTP error:  " + this.status);
        return;
      }
    }
  }

// open XHR and send my id and message as JSON string
  var client = new XMLHttpRequest();
  client.onreadystatechange = handler;
  client.open("POST", "/send");
  var sendData = {"id":id, "message":msg};
  client.send(JSON.stringify(sendData));
}

return {
  connect:  connect,
  send:  send
};

};

index.html

<html>
<head>
  <meta http-equiv="Content-Type"
        content="text/html; charset=UTF-8" />
  <style>
    video {
      width:  320px;
      height:  240px;
      border:  1px solid black;
    }
    div {
      display:  inline-block;
    }
  </style>
</head>
<body>

<script></script>

<script src="extra/adapter.js" type="text/javascript"></script>
<script
  src="https://webrtc.googlecode.com/svn/stable/samples/js/base/adapter.js"
  type="text/javascript"></script>

<script src="clientXHRSignalingChannel.js"
        type="text/javascript"></script>

////////////////////////////
// This is the main routine.
////////////////////////////

// This kicks off acquisition of local media.  Also, it can
// automatically start the signaling channel.
window.onload = function () {

// auto-connect signaling channel if key provided in URI
  if (queryparams && queryparams['key']) {
    document.getElementById("key").value = queryparams['key'];
    connect();
  }

myVideo = document.getElementById("myVideo");
  yourVideo = document.getElementById("yourVideo");
  
  getMedia();

//  connect() calls createPC() when connected.
  //  attachMedia() is called when both createPC() and getMedia()
  //  have succeeded.
};

/////////////////////
// This next section is for setting up the signaling channel.
/////////////////////

// This routine connects to the web server and sets up the
// signaling channel.  It is called either automatically on doc
// load or when the user clicks on the "Connect" button.
function connect() {
  var errorCB, scHandlers, handleMsg;

// First, get the key used to connect
  key = document.getElementById("key").value;

// This is the handler for all messages received on the
  // signaling channel.
  handleMsg = function (msg) {
    // First, we post the message on-screen
    var msgE = document.getElementById("inmessages");
    msgE.innerHTML = JSON.stringify(msg) + "<br/>" +
                     msgE.innerHTML;

// Then, we take action based on the kind of message
    if (msg.type === "offer") {
      pc.setRemoteDescription(new RTCSessionDescription(msg));
      answer();
    } else if (msg.type === "answer") {
      pc.setRemoteDescription(new RTCSessionDescription(msg));
    } else if (msg.type === "candidate") {
      pc.addIceCandidate(
        new RTCIceCandidate({sdpMLineIndex:msg.mlineindex,
                             candidate:msg.candidate}));
    }
  };

// handlers for signaling channel
  scHandlers = {
    'onWaiting' : function () {
      setStatus("Waiting");
      // weWaited will be used later for auto-call
      weWaited = true;
    },
    'onConnected': function () {
      setStatus("Connected");
      // set up the RTC Peer Connection since we're connected
      createPC();
    },
    'onMessage': handleMsg
  };

// Finally, create signaling channel
  signalingChannel = createSignalingChannel(key, scHandlers);
  errorCB = function (msg) {
    document.getElementById("response").innerHTML = msg;
  };

// and connect.
  signalingChannel.connect(errorCB);
}

// This routine sends a message on the signaling channel, either
// by explicit call or by the user clicking on the Send button.
function send(msg) {
  var handler = function (res) {
    document.getElementById("response").innerHTML = res;
    return;
  },

// Get message if not passed in
  msg = msg || document.getElementById("message").value;

// post it on-screen
  msgE = document.getElementById("outmessages");
  msgE.innerHTML = JSON.stringify(msg) + "<br/>" +
                   msgE.innerHTML;

// and send on signaling channel
  signalingChannel.send(msg, handler);
}

/////////////////////////////
// This next section is for getting local media
/////////////////////////////

function getMedia() {
  getUserMedia({"audio":true, "video":true},
               gotUserMedia, didntGetUserMedia);
}

function gotUserMedia(stream) {
  myVideoStream = stream;
  haveLocalMedia = true;

// display my local video to me
  attachMediaStream(myVideo, myVideoStream);
  // wait for RTCPeerConnection to be created
  attachMediaIfReady();
}

function didntGetUserMedia() {
  console.log("couldn't get video");
}

//////////////////////////////
// This next section is for setting up the RTC Peer Connection
//////////////////////////////

function createPC() {
  pc = new RTCPeerConnection(
    {iceServers:[{url:"stun:stun.l.google.com:19302"}]});
  pc.onicecandidate = onIceCandidate;
  pc.onaddstream = onRemoteStreamAdded;
  pc.onremovestream = onRemoteStreamRemoved;

// wait for local media to be ready
  attachMediaIfReady();
}

// When our browser has another candidate, send it to the peer
function onIceCandidate(e) {
  if (e.candidate) {
    send({type:  'candidate',
          mlineindex:  e.candidate.sdpMLineIndex,
          candidate:  e.candidate.candidate});
  }
}

// When our browser detects that the other side has added the
// media stream, show it on screen
function onRemoteStreamAdded(e) {
  yourVideoStream = e.stream;
  attachMediaStream(yourVideo, yourVideoStream);
  setStatus("On call");
}

// Yes, we do nothing if the remote side removes the stream.
// This is a *simple* demo, after all.
function onRemoteStreamRemoved(e) {}

///////////////////////////////////
// This next section is for attaching local media to the Peer
// Connection.
///////////////////////////////////

// This guard routine effectively synchronizes completion of two
// async activities:  the creation of the Peer Connection and
// acquisition of local media.
function attachMediaIfReady() {
  // If RTCPeerConnection is ready and we have local media,
  // proceed.
  if (pc && haveLocalMedia) {attachMedia();}
}

// This routine adds our local media stream to the Peer
// Connection.  Note that this does not cause any media to flow.
// All it does is to let the browser know to include this stream
// in its next SDP description.
function attachMedia() {
  pc.addStream(myVideoStream);
  setStatus("Ready for call");

// auto-call if truthy value for call param in URI
  // but also make sure we were the last to connect (to increase
  // chances that everything is set up properly at both ends)
  if (queryparams && queryparams['call'] && !weWaited) {
    call();
  }

}

////////////////////////////
// This next section is for calling and answering
////////////////////////////

// This generates the session description for an offer
function call() {
  pc.createOffer(gotDescription, doNothing, constraints);
}

// and this generates it for an answer.
function answer() {
  pc.createAnswer(gotDescription, doNothing, constraints);
}

// In either case, once we get the session description we tell
// our browser to use it as our local description and then send
// it to the other browser.  It is the setting of the local
// description that allows the browser to send media and prepare
// to receive from the other side.
function gotDescription(localDesc) {
  pc.setLocalDescription(localDesc);
  send(localDesc);
}

////////////////////////////////////
// This section is for changing the UI based on application
// progress.
////////////////////////////////////

// This function hides, displays, and fills various UI elements
// to give the user some idea of how the browser is progressing
// at setting up the signaling channel, getting local media,
// creating the peer connection, and actually connecting
// media (calling).
function setStatus(str) {
  var statuslineE = document.getElementById("statusline"),
      statusE = document.getElementById("status"),
      sendE = document.getElementById("send"),
      connectE = document.getElementById("connect"),
      callE = document.getElementById("call"),
      scMessageE = document.getElementById("scMessage");

switch (str) {
    case 'Waiting':
      statuslineE.style.display = "inline";
      statusE.innerHTML =
        "Waiting for peer signaling connection";
      sendE.style.display = "none";
      connectE.style.display = "none";
      break;
    case 'Connected':
      statuslineE.style.display = "inline";
      statusE.innerHTML =
        "Peer signaling connected, waiting for local media";
      sendE.style.display = "inline";
      connectE.style.display = "none";
      scMessageE.style.display = "inline-block";
      break;
    case 'Ready for call':
      statusE.innerHTML = "Ready for call";
      callE.style.display = "inline";
      break;
    case 'On call':
      statusE.innerHTML = "On call";
      callE.style.display = "none";
      break;
    default:
  }
}

</script>

<div id="setup">
  <p>WebRTC Demo</p>
  <p>Key:
    <input type="text" name="key" id="key"/>
    <button id="connect" onclick="connect()">Connect</button>
    <span id="statusline" style="display:none">Status:
      <span id="status">Disconnected</span>
    </span>
    <button id="call" style="display:none"
            onclick = "call()">Call</button>
  </p>
</div>

<div id="scMessage" style="float:right;display:none">
  <p>Message:
    <input type="text" width="100%" name="message" id="message"/>
    <button id="send" style="display:none"
            onclick="send()">Send</button>
  </p>

<p>Response:  <span id="response"></span></p>
</div>

<br/>

<div style="width:45%;vertical-align:top">
  <div>
    <video id="myVideo" autoplay="autoplay" controls
           muted="true"/>
  </div>
  <p><b>Outgoing Messages</b>
     <br/>
     <span id="outmessages"></span>
  </p>
</div>

<div style="width:45%;vertical-align:top">
  <div>
    <video id="yourVideo" autoplay="autoplay" controls />
  </div>
  <p><b>Incoming Messages</b>
     <br/>
     <span id="inmessages"></span>
  </p>
</div>

</body>
</html>