Implementing WebRTC in mobile application

Hi,
This blog will provide you information to implement the WebRTC in mobile application using cordova. WebRTC is an open source project which allows realtime communication of audio, video and data in web browsers and mobile applications. WebRTC has several javascript APIs like getUserMedia(), RTCPeerConnection, RTCDataChannel, mediaRecorder. WebRTC uses RTCPeerConnection to communicate streaming data between browsers, but also needs a mechanism to coordinate communication and to send control messages, a process known as signaling. Signaling methods and protocols are not specified by WebRTC, so i used Node for signaling. I created a package.json file where i mentioned all the project dependencies. 

I used npm to install project dependencies as specified in package.json by  using " npm install" , after that i setup a messaging service on Node using socket.io and used that to create room and exchange message.After that we need to setup a server, i did this by creating a javascript file in same directory where node is installed. 

var os = require('os');
var nodeStatic = require('node-static');
var http = require('http');
var socketIO = require('socket.io');

var fileServer = new(nodeStatic.Server)();
var app = http.createServer(function(req, res) {
  fileServer.serve(req, res);
}).listen(8080);

var io = socketIO.listen(app);
io.sockets.on('connection', function(socket) {

  // convenience function to log server messages on the client
  function log() {
    var array = ['Message from server:'];
    array.push.apply(array, arguments);
    socket.emit('log', array);
  }

  socket.on('message', function(message) {
    log('Client said: ', message);
    // for a real app, would be room-only (not broadcast)
    socket.broadcast.emit('message', message);
  });

  socket.on('create or join', function(room) {
    log('Received request to create or join room ' + room);

    var numClients = io.sockets.sockets.length;
    log('Room ' + room + ' now has ' + numClients + ' client(s)');

    if (numClients === 1) {
      socket.join(room);
      log('Client ID ' + socket.id + ' created room ' + room);
      socket.emit('created', room, socket.id);

    } else if (numClients === 2) {
      log('Client ID ' + socket.id + ' joined room ' + room);
      io.sockets.in(room).emit('join', room);
      socket.join(room);
      socket.emit('joined', room, socket.id);
      io.sockets.in(room).emit('ready');
    } else { // max two clients
      socket.emit('full', room);
    }
  });

  socket.on('ipaddr', function() {
    var ifaces = os.networkInterfaces();
    for (var dev in ifaces) {
      ifaces[dev].forEach(function(details) {
        if (details.family === 'IPv4' && details.address !== '127.0.0.1') {
          socket.emit('ipaddr', details.address);
        }
      });
    }
  });

});

To start the server we need to run the command " node <javascript filename>" from the current working directory where the Node is installed. To allow the remote devices to connect for communication we need to specify the IP address and port number of machine where the server is runninig.

var socket = io.connect('http://<IP address>:<Port>');

and include the follwing path in your HTML page.

<script src="http://<IP address>:<Port>/socket.io/socket.io.js"></script>
 <script src="js/lib/adapter.js"></script>

adapter.js is a javascript file which is a shim to insulate apps from spec changes and prefix differences. You can get it from WebRTC official website.

To setup a video call first we need to get the user media.

Next we need to get the local stream, after that  we need to create peer connection

pc = new RTCPeerConnection(null);

Next we need to find an ICE candidate to conncet for communication. Once an ICE candidate is found an offer is created. SDP is a protocol that is used to announce sessions, manage session invitations, and perform other types of initiation tasks for multimedia sessions. A multimedia session is a set of multimedia senders and receivers and the data streams flowing from senders to receivers. When initiating multimedia teleconferences, voice-over-IP calls, streaming video, or other sessions, there is a requirement to convey media details, transport addresses, and other session description metadata to the participants. SDP provides a standard representation for such information, irrespective of how that information is transported.

You need to setup TURN and STUN server to communication through devices which are behind the firewall or on different network. You can use pubic STUN server provided by google or you can setup your own STUN or TURN server.

Thanks for reading this blog.