Building WebRTC Video Calling With PubNub

Since we wrote this post, we’ve made some changes to our what we do, and what we don’t do with WebRTC. Learn more here.

Building video calling apps is no small task. Learning about video codecs, signaling, and presence is just the beginning when it comes to implementation. At PubNub, we have partnered our technology with WebRTC to make integration fast and easy to build video chat software. Out of the box, our WebRTC Framework will power audio, video, and data communication between two browsers.

Want to get an idea of what it’ll look like when you’re finished? Take a look at our live, working demo and code walk through, or watch the video below, or keep reading.

Get Started by Installing the PubNub WebRTC SDK

The first step to building your own video calling app is to install both PubNub signing up for a free account and our WebRTC SDK. To install both of these, first download the WebRTC SDK to your local project somewhere. Then include both libraries:

Be sure to input your unique publish/subscribe keys you get from the Developer’s portal, for example:

Getting a List of Users to Call

The PubNub library comes with the functionality to see what users come online and offline with our Presence feature. To start, enable this functionality by visiting our Developer’s Portal and enabling Presence on your API key. This will allow your clients to start receiving join and leave events.

In our application, every user is subscribed to one channel. This means every user can see all the other users that are currently connected. This is done easily by using a channel named “phonebook”:

Currently the user data is stored in the data- attributes of the element itself. This makes it easy to work with as a prototype, but could be extended to an AngularJS scope or Backbone Collection easily.

Get the User Media

The first step in any WebRTC application is to get the stream from the user’s webcam. Luckily, the browser provides an easy to use way of getting this stream. The code for doing this uses the getUserMedia API:

Note here that the stream is stored for use in publishing to a WebRTC peer connection. When you make this call the user will have to allow your application to use the webcam. The callback will not be called until this has been done, so it may be good to notify the user that they need to allow this before moving on.

Calling a User with PubNub WebRTC Video

Once your application has the user stream you can now publish that stream to another user. Since the RTCPeerConnection requires you to publish your stream before the connection is made, the library provides methods for both subscribing and listen for new connections. The code below will take care of both cases and allow a completed call to be made:

This will take care of all the use cases when calling another user:

1. The user has called us and we want to react immediately to the call
2. We are calling another user by publishing our stream to them
3. We want to subscribe to another user before they call

Hanging Up a WebRTC Video Call

Hanging up the call is as simple as closing the peer connection. The other user tries to reconnect for a few seconds and then recognizes the call is dropped after that. The library provides an interface for both cases:

Using Other Logins

Our demo also allows you to login with any Google+ account. Since our users are identified by a unique user ID, this ID can be anything the developers provides. In this use case, we provide the unique user ID provided by the Google+ API.

Unfortunately this just gives us an ID for each user, so if we want to tell the user who is currently available for chat they will just see the numerical representation of each user. The way we get around this limitation is by including the user name in each unique user ID. Our user names now look like “1234567-John Doe”. Now we can call String.split(‘-’) to get the name and the ID separated so we can show the human readable form to the user.

WebRTC Video Calling In-Browser is Amazing

Now we can take this seemingly complex application and simplify the time to develop this so even one person can build it. The most amazing thing about this is that it is scalable from the beginning. Using the PubNub network allows your application to scale on a global level.

The RTCPeerConnection also abstracts away much of the complexity that deals with codecs and setting up a peer connection. We at PubNub hope to see a whole new wave of communication applications on the web! Check out the demo of our video calling application here.