WebRTC: Video telephony without a browser plugin

Signaling Server

JavaScript is also used for the signaling server, but server-side on Node.js. On Ubuntu Linux, you can install Node.js (currently version 0.8) and its package manager Npm with the

sudo apt-get install nodejs npm

command. The signaling server also requires the Connect modules (version 2.7.2 or later) as well as version 1.0.8 of WebSocket. Because WebSocket depends on node-gyp, you first need to install this:

npm install -g node-gyp

Then, you can install websocket and connect:

sudo npm install connect websocket

Listing 8 shows the code for the signaling server in Node.js. Lines 2 to 4 integrate the required modules. The channels variable (line 5) stores the connected clients in a field.

Listing 8

Signaling Server for Node.js

01 #!/usr/bin/env node
02 var http = require('http'),
03     connect = require('connect'),
04     WebSocketServer = require('websocket').server,
05     channels = [],
06     app = connect().use(connect.static('../'));
07
08 var wsServer = new WebSocketServer({
09   httpServer:new http.createServer(app).listen(6655)
10 });
11
12 wsServer.on('request', function(req) {
13   var thisChannel = req.accept('webrtc', req.origin);
14   channels.push(thisChannel);
15   thisChannel.on('message', function(msg) {
16     channels.forEach(function(channel) {
17       if (channel !== thisChannel) {
18         console.log(msg.utf8Data)
19         channel.sendUTF(msg.utf8Data);
20       }
21     });
22   });
23   thisChannel.on('close', function() {
24     channels = channels.filter(function(channel) {
25    return (channel !== thisChannel)?true:false;
26     });
27   });
28 });

In the next line, the app variable accepts a connect application with the static module added on top. Static tells Node.js to respond to HTTP requests, such as http://localhost:6655/webrtc.html, by returning the webrtc.html file from the ../ directory.

The WebSocket server binds an httpServer object in line 9. As an argument in the call to the createServer() method, the app variable passes the application logic from the connect application to the httpServer object. The listen() method tells the HTTP server to listen on port 6655.

Connection Events

The callback function in lines 12 to 28 of Listing 8 describes the response of the signaling server when setting up a connection via the WebSocket protocol. To do this, the on() method in line 12 binds the callback function from the second argument to the instance of the request event. In line 13, the callback function stores a valid connection in the thisChannel variable; line 14 adds it to the list of existing connections.

Lines 15 to 22 define a callback function for processing an incoming message. In the loop across all connections (lines 16-21), the sendUTF() method forwards the message to all other connections. Lines 23 to 27 remove the client from the list on terminating the connection.

As Figure 7 shows, you can watch the signaling server at work: Thanks to console.log(msg.utf8Data) in line 18, it writes its output to the console.

Figure 7: The signaling server forwards messages from one client to the other as a router.

If you want WebRTC to work over the Internet, you need to send the session descriptions in Listing 5 to the connected browser via the WebSocket protocol and the signaling server, as shown in Figures 1 and 5. Listing 9 shows the HTML document for this example. In contrast to Listing 4, it binds webrtc.js instead of localwebrtc.js.

Listing 9

HTML for WebRTC via the Internet

01 <html>
02 <head>
03   <link rel="stylesheet" href="css/styles.css"/>
04   <script src="js/core.js"></script>
05   <script src="js/webrtc.js"></script>
06 </head>
07 <body>
08   <p id="msg"></p>
09   <video id="local" autoplay></video>
10   <video id="remote" autoplay></video>
11 </body>
12 </html>

Listing 10 shows the JavaScript code for webrtc.js: Line 8 opens a connection to the WebSocket server and stores it in the channel variable. After opening the connection, the code executes the callback function from lines 9 through 15. Within this function, line 10 creates a new peer object and stores it in the global variable pc. Line 11 uses the addStream() method to add the media stream, stream, from the request in line 4 to the peer object.

Listing 10

webrtc.js: WebRTC via the Internet

01 document.addEventListener('DOMContentLoaded', function() {
02   var serv = pc = null,
03       url = 'ws://'+location.host;
04   navigator.mozGetUserMedia(
05     {video:true, audio:true},
06     function(stream) {
07       connectStream(stream, "#local");
08       var channel = new WebSocket(url, 'webrtc');
09       channel.onopen = function() {
10         pc = new mozRTCPeerConnection(serv);
11         pc.addStream(stream);
12         pc.onicecandidate = onice(pc);
13         pc.onaddstream = onadd();
14         pc.createOffer(desc(pc, channel, "offer"));
15       };
16       channel.onmessage = function(msg) {
17         var sig = JSON.parse(msg.data);
18         switch(sig.command) {
19           case "offer":
20             pc = new mozRTCPeerConnection(serv);
21             pc.addStream(stream);
22             pc.setRemoteDescription(new mozRTCSessionDescription(sig.data));
23             pc.onicecandidate = onice(pc);
24             pc.onaddstream = onadd();
25             pc.createAnswer(desc(pc, channel, "answer"));
26           break;
27           case "answer":
28             pc.setRemoteDescription(new mozRTCSessionDescription(sig.data));
29           break;
30           case "ice":
31             pc.addIceCandidate(new mozRTCIceCandidate(sig.data));
32           break;
33         }
34       };
35     },
36     error
37   );
38 });

The next two lines create the callback functions for the onicecandidate and onaddstream events in the connection setup. The event handling for onicecandidate is in line 12, which calls the onice() function in Listing 11. Like the onadd() function in Listing 6, it returns a callback function. When called, the send() function (Listing 13) sends an ICE candidate. Finally, line 14 in Listing 10 uses createOffer() to generate a session description and passes it to the callback function from the call to desc() (Listing 12). In doing so, line 3 of Listing 12 stores the session description in the peer object, pc, and the next line forwards it via the signaling server.

Listing 11

Event Handler

01 function onice(channel) {
02   return function(evt) {
03    if (evt.candidate) {
04      send(channel, {command:"ice", data:evt.candidate});
05     }
06   }
07 }

Listing 12

Session Description

01 function desc(pc, channel, comm) {
02   return function(desc) {
03     pc.setLocalDescription(desc);
04     send(channel, {command:comm, data:desc});
05   };
06 }

Listing 13

Serializing Objects

01 function send(channel, msg) {
02   channel.send(JSON.stringify(msg));
03 }

Receiving and Sending

However, if the browser receives an external message via the WebSocket connection, the callback function in lines 16 to 34 of Listing 10 sees some action. It transforms the incoming JSON message into a JavaScript object that processes the subsequent switch statement, depending on the message type.

Listing 13 shows the send() function, which uses a method with the same name in line 2 from the WebSocket object to send a message. Before that happens, stringify() converts it to a string in JSON format.

Buy this article as PDF

Express-Checkout as PDF
Price $2.95
(incl. VAT)

Buy Linux Magazine

SINGLE ISSUES
 
SUBSCRIPTIONS
 
TABLET & SMARTPHONE APPS
Get it on Google Play

US / Canada

Get it on Google Play

UK / Australia

Related content

  • Post-PRISM Privacy

    Linux users didn't need the recent NSA eavesdropping scandal to convince them that securing communication was a good idea. Free software developers have been creating secure tools for years that offer similar functionalities to all of those popular but very leaky services with ridiculous names.

  • Streaming with Icecast

    For live Internet radio, you need a streaming server. We’ll show you how to get started with Icecast, an open source streaming alternative for Linux.

  • Web Cryptography API

    The controversial Web Cryptography API offers flexible encryption for web applications, but it also lays the groundwork for content providers to implement more powerful access restrictions through DRM.

  • Downloading Web Video

    With the right tools, you can store YouTube movies on your hard disk and view them when Internet access is unsatisfactory or unavailable.

  • MythTV

    MythTV and its extensive ecosystem of add-ons let you turn your Linux computer into a full-featured home media center.

comments powered by Disqus

Direct Download

Read full article as PDF:

Price $2.95

News