Welcome!

WebRTC Authors: Pat Romanski, Daniel Keeney, Elizabeth White, Roger Strukhoff, Carmen Gonzalez

Related Topics: WebRTC, Java, Open Source, Web 2.0, Video, Open Web, Cloud Expo

WebRTC: Blog Post

Building Video Calling with PubNub and WebRTC

Learning about video codecs, signaling, and presence is just the beginning when it comes to implementation

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 and our WebRTC SDK. To install both of these, first download the WebRTC SDK to your local project somewhere. Then include both libraries:

<script src="http://cdn.pubnub.com/pubnub.min.js"></script>

<script src="http://pubnub.github.io/webrtc/webrtc-beta-pubnub.js"></script>

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":

pubnub.subscribe({
channel: ‘phonebook',
callback: function (message) {
// Do nothing in our callback
},
presence: function (data) {
if (data.action === "join" && data.uuid != myUuid) {
var parts = data.uuid.split(‘-');
var newUser = newUserTemplate({
name: parts[1]
id: parts[0]
});
userList.append(newUser);
} else if (data.action === "leave" and data.uuid != myUuid) {
var parts = data.uuid.split(‘-');<
var item = userList.find("li[data user=\"" + parts[0] + "\"]");
item.remove();}

});

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:

function gotStream(stream) {

document.querySelector(‘#self-call-video').src = URL.createObjectURL(stream);

myStream = stream; // Save the stream for later use

};

navigator.webkitGetUserMedia({ audio: true, video: true}, gotStream);

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
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 listening for new connections. The code below will take care of both cases and allow a completed call to be made:

function publishStream(uuid) {

pubnub.publish({

user: uuid,

stream: myStream

});


pubnub.subscribe({

user: uuid,

stream: function (data, event) {

document.querySelector(‘#call-video').src = URL.createObjectUrl(event.stream);

},

disconnect: function (uuid, pc) {

document.querySelector("#call-video").src = "";

$(document).trigger("call:end");

}

});

};


pubnub.onNewConnection(function (uuid) {

if (myStream != null) {

publishStream(uuid);

}

});


pubnub.subscribe({

channel: ‘answer',

callback: function (data) {

if (data.caller == myUuid) {

publishStream(data.callee);

}

}

});

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 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:

function hangUp() {

pubnub.closeConnection(currentCall, function () {

$(document).trigger("call:end");

}

};


pubnub.subscribe({

// ... Other subscribe code here

disconnect: function (uuid, peerConnection) {

hangUp();

// React to the disconnect

}

});

Using Other Logins
Our demo also allows you to log in with any Google+ account. Since our users are identified by a unique user ID, this ID can be anything the developers provide. 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 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.

More Stories By Dan Ristic

Dan Ristic is Developer Evangelist and Front End Engineer at PubNub. Dan is crazy about user interface development and has been programming on the web for five years. He grew up in Chicago and studied engineering at the University of Advancing Technology in Phoenix, AZ.

Comments (0)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


@ThingsExpo Stories
The definition of IoT is not new, in fact it’s been around for over a decade. What has changed is the public's awareness that the technology we use on a daily basis has caught up on the vision of an always on, always connected world. If you look into the details of what comprises the IoT, you’ll see that it includes everything from cloud computing, Big Data analytics, “Things,” Web communication, applications, network, storage, etc. It is essentially including everything connected online from hardware to software, or as we like to say, it’s an Internet of many different things. The difference ...

ARMONK, N.Y., Nov. 20, 2014 /PRNewswire/ --  IBM (NYSE: IBM) today announced that it is bringing a greater level of control, security and flexibility to cloud-based application development and delivery with a single-tenant version of Bluemix, IBM's platform-as-a-service. The new platform enables developers to build ap...

Cloud Expo 2014 TV commercials will feature @ThingsExpo, which was launched in June, 2014 at New York City's Javits Center as the largest 'Internet of Things' event in the world.
An entirely new security model is needed for the Internet of Things, or is it? Can we save some old and tested controls for this new and different environment? In his session at @ThingsExpo, New York's at the Javits Center, Davi Ottenheimer, EMC Senior Director of Trust, reviewed hands-on lessons with IoT devices and reveal a new risk balance you might not expect. Davi Ottenheimer, EMC Senior Director of Trust, has more than nineteen years' experience managing global security operations and assessments, including a decade of leading incident response and digital forensics. He is co-author of t...
The major cloud platforms defy a simple, side-by-side analysis. Each of the major IaaS public-cloud platforms offers their own unique strengths and functionality. Options for on-site private cloud are diverse as well, and must be designed and deployed while taking existing legacy architecture and infrastructure into account. Then the reality is that most enterprises are embarking on a hybrid cloud strategy and programs. In this Power Panel at 15th Cloud Expo (http://www.CloudComputingExpo.com), moderated by Ashar Baig, Research Director, Cloud, at Gigaom Research, Nate Gordon, Director of T...
Explosive growth in connected devices. Enormous amounts of data for collection and analysis. Critical use of data for split-second decision making and actionable information. All three are factors in making the Internet of Things a reality. Yet, any one factor would have an IT organization pondering its infrastructure strategy. How should your organization enhance its IT framework to enable an Internet of Things implementation? In his session at Internet of @ThingsExpo, James Kirkland, Chief Architect for the Internet of Things and Intelligent Systems at Red Hat, described how to revolutioniz...
Technology is enabling a new approach to collecting and using data. This approach, commonly referred to as the "Internet of Things" (IoT), enables businesses to use real-time data from all sorts of things including machines, devices and sensors to make better decisions, improve customer service, and lower the risk in the creation of new revenue opportunities. In his General Session at Internet of @ThingsExpo, Dave Wagstaff, Vice President and Chief Architect at BSQUARE Corporation, discuss the real benefits to focus on, how to understand the requirements of a successful solution, the flow of ...
The security devil is always in the details of the attack: the ones you've endured, the ones you prepare yourself to fend off, and the ones that, you fear, will catch you completely unaware and defenseless. The Internet of Things (IoT) is nothing if not an endless proliferation of details. It's the vision of a world in which continuous Internet connectivity and addressability is embedded into a growing range of human artifacts, into the natural world, and even into our smartphones, appliances, and physical persons. In the IoT vision, every new "thing" - sensor, actuator, data source, data con...
"BSQUARE is in the business of selling software solutions for smart connected devices. It's obvious that IoT has moved from being a technology to being a fundamental part of business, and in the last 18 months people have said let's figure out how to do it and let's put some focus on it, " explained Dave Wagstaff, VP & Chief Architect, at BSQUARE Corporation, in this SYS-CON.tv interview at @ThingsExpo, held Nov 4-6, 2014, at the Santa Clara Convention Center in Santa Clara, CA.
Focused on this fast-growing market’s needs, Vitesse Semiconductor Corporation (Nasdaq: VTSS), a leading provider of IC solutions to advance "Ethernet Everywhere" in Carrier, Enterprise and Internet of Things (IoT) networks, introduced its IStaX™ software (VSC6815SDK), a robust protocol stack to simplify deployment and management of Industrial-IoT network applications such as Industrial Ethernet switching, surveillance, video distribution, LCD signage, intelligent sensors, and metering equipment. Leveraging technologies proven in the Carrier and Enterprise markets, IStaX is designed to work ac...
"There is a natural synchronization between the business models, the IoT is there to support ,” explained Brendan O'Brien, Co-founder and Chief Architect of Aria Systems, in this SYS-CON.tv interview at the 15th International Cloud Expo®, held Nov 4–6, 2014, at the Santa Clara Convention Center in Santa Clara, CA.
C-Labs LLC, a leading provider of remote and mobile access for the Internet of Things (IoT), announced the appointment of John Traynor to the position of chief operating officer. Previously a strategic advisor to the firm, Mr. Traynor will now oversee sales, marketing, finance, and operations. Mr. Traynor is based out of the C-Labs office in Redmond, Washington. He reports to Chris Muench, Chief Executive Officer. Mr. Traynor brings valuable business leadership and technology industry expertise to C-Labs. With over 30 years' experience in the high-tech sector, John Traynor has held numerous...
Bit6 today issued a challenge to the technology community implementing Web Real Time Communication (WebRTC). To leap beyond WebRTC’s significant limitations and fully leverage its underlying value to accelerate innovation, application developers need to consider the entire communications ecosystem.
The 3rd International @ThingsExpo, co-located with the 16th International Cloud Expo - to be held June 9-11, 2015, at the Javits Center in New York City, NY - announces that it is now accepting Keynote Proposals. The Internet of Things (IoT) is the most profound change in personal and enterprise IT since the creation of the Worldwide Web more than 20 years ago. All major researchers estimate there will be tens of billions devices - computers, smartphones, tablets, and sensors - connected to the Internet by 2020. This number will continue to grow at a rapid pace for the next several decades.
The Internet of Things is not new. Historically, smart businesses have used its basic concept of leveraging data to drive better decision making and have capitalized on those insights to realize additional revenue opportunities. So, what has changed to make the Internet of Things one of the hottest topics in tech? In his session at @ThingsExpo, Chris Gray, Director, Embedded and Internet of Things, discussed the underlying factors that are driving the economics of intelligent systems. Discover how hardware commoditization, the ubiquitous nature of connectivity, and the emergence of Big Data a...
Almost everyone sees the potential of Internet of Things but how can businesses truly unlock that potential. The key will be in the ability to discover business insight in the midst of an ocean of Big Data generated from billions of embedded devices via Systems of Discover. Businesses will also need to ensure that they can sustain that insight by leveraging the cloud for global reach, scale and elasticity.
SYS-CON Events announced today that Windstream, a leading provider of advanced network and cloud communications, has been named “Silver Sponsor” of SYS-CON's 16th International Cloud Expo®, which will take place on June 9–11, 2015, at the Javits Center in New York, NY. Windstream (Nasdaq: WIN), a FORTUNE 500 and S&P 500 company, is a leading provider of advanced network communications, including cloud computing and managed services, to businesses nationwide. The company also offers broadband, phone and digital TV services to consumers primarily in rural areas.
SYS-CON Events announced today that IDenticard will exhibit at SYS-CON's 16th International Cloud Expo®, which will take place on June 9-11, 2015, at the Javits Center in New York City, NY. IDenticard™ is the security division of Brady Corp (NYSE: BRC), a $1.5 billion manufacturer of identification products. We have small-company values with the strength and stability of a major corporation. IDenticard offers local sales, support and service to our customers across the United States and Canada. Our partner network encompasses some 300 of the world's leading systems integrators and security s...
IoT is still a vague buzzword for many people. In his session at @ThingsExpo, Mike Kavis, Vice President & Principal Cloud Architect at Cloud Technology Partners, discussed the business value of IoT that goes far beyond the general public's perception that IoT is all about wearables and home consumer services. He also discussed how IoT is perceived by investors and how venture capitalist access this space. Other topics discussed were barriers to success, what is new, what is old, and what the future may hold. Mike Kavis is Vice President & Principal Cloud Architect at Cloud Technology Pa...
Cloud Expo 2014 TV commercials will feature @ThingsExpo, which was launched in June, 2014 at New York City's Javits Center as the largest 'Internet of Things' event in the world. The next @ThingsExpo will take place November 4-6, 2014, at the Santa Clara Convention Center, in Santa Clara, California. Since its launch in 2008, Cloud Expo TV commercials have been aired and CNBC, Fox News Network, and Bloomberg TV. Please enjoy our 2014 commercial.