With the update of our Web Phone this month, we wanted to give you some more background on the features of WebRTC, the project that lays the groundwork through which our browser-based phone completes voice calls.
WebRTC, the well-known project managed by Google, makes it easy to transmit audio, video, and data through a web browser. Our developers at VirtualPBX have used its APIs – application programming interfaces – to create a phone that runs in desktop and mobile browsers. And you can use it to create your own business applications that manage audiovisual information and transmit data.
How is this accomplished? Three of the basic APIs you use in your Javascript control the bulk of what takes place in an application.
getUserMedia to Access Hardware
The first part of establishing any type of browser-to-browser connection is understanding what devices are involved. Therefore, the first WebRTC feature we’ll look at is the getUserMedia API.
Take a look at this HTML5 Rocks article that shows how getUserMedia can identify and request to access an individual’s camera and microphone before starting a call.
As a developer, you’ll only need to pass parameters to getUserMedia like these:
{audio: true}
or
{video:true, audio:true}
The first request would have getUserMedia ask to use a microphone, and the second would ask to use the camera and microphone. For the developer, WebRTC hides a lot of code behind the scenes so requests like this are easy to initiate.
If you’ve ever seen your browser ask for permission to use your camera, the action behind that request could be initiated by getUserMedia.
RTCPeerConnection to Establish a Connection
What comes next is establishing a connection between two (or more) peers so information can be shared between them. This second primary WebRTC feature is the RTCPeerConnection API.
The most basic RTCPeerConnection code looks like this:
var connection = RTCPeerConnection(config);
The config part of that example requires more detail like the servers you want to use to help establish a connection. Ultimately, you will create the connection with that request and then handle audio and video streams with code that resembles this example:
pc.addTrack(track);
The screenshot here shows a code snippet presented in the Mozilla Developer Network article that expands upon the syntax for the addTrack function, which is part of RTCPeerConnection.
In short, you will use RTCPeerConnection to establish a connection between users and then refer to the getUserMedia audio and video devices; then you’ll add those devices to media tracks that keep audio and video connections active between your users.
RTCDataChannel for Arbitrary Data
When building a WebRTC application, you might also want to let your users share text or files. To do this, you’ll need to use the RTCDataChannel API.
This final feature of WebRTC we’ll cover in this article is presented in detail again at the Mozilla Developer Network.
Once you establish a connection with RTCPeerConnection, as is shown above, the next step is to create a data channel within that connection:
sendChannel = connection.createDataChannel("sendChannel");
What has happened here is that a channel called sendChannel has been created within the connection configuration (referenced previously, inside this article’s section RTCPeerConnection to Establish a Connection). sendChannel can now be monitored so the application knows when the data channel is open or closed:
sendChannel.onopen = handleSendChannelStatusChange;
sendChannel.onclose = handleSendChannelStatusChange;
Features of WebRTC You Will Use
While this article barely scratches the surface of what you can accomplish with the WebRTC project, we hope that it gives you a glimpse into the ease of creating applications with it.
Keep in mind that there are many layers beneath getUserMedia, RTCPeerConnection, and RTCDataChannel. These three APIs only ask developers to input a handful of options to create a connection between users. What happens in the background involves interfacing with web browsers, connecting to servers, handling codecs, and managing the flow of data between peers. Developers don’t have to manually do any of the heavy lifting.
What’s most impressive is the disparity between the underlying complexity of WebRTC’s back-end and the user interface in applications like our Web Phone. If you’re in the market for a new phone system and want to see what our Web Phone can offer, let our Sales Team lead you through a Personal Tour of our phone system.