WebRTC is comprised of three HTML5 APIs - getUserMedia, RTCPeerConnection, and RTCDataChannel - that are built into Chrome and Firefox. In this sense, WebRTC and HTML5 are inseparably linked. But WebRTC developers will actually spend a majority of their time coding in JavaScript. The WebRTC APIs essentially allow JavaScript to generate real-time video and voice streams that can be treated like standard video and audio objects in HTML5. This gives developers a chance to incorporate streaming media into their applications using nothing more than HTML5 capabilities that are already built into Chrome and Firefox browsers.
getUserMedia
The ability to capture and pass real-time data from the computer’s webcam and microphone to other browsers used to be technically demanding before WebRTC and HTML5. Now WebRTC’s navigator.getUserMedia() command allows browsers to easily retain and transmit this sort of data to other peers (i.e. browsers). In the following example, a computer’s streaming webcam data is turned into a JavaScript object by WebRTC’s navigator.getUserMedia() command.
navigator.getUserMedia({audio: false, video: true}, function(stream) {
var video = document.getElementById(‘myVideo’);
video.src = window.URL.createObjectURL(stream);
video.play();
}, function (error) {
console.log(‘something bad happened’);
});
In five lines of JavaScript code, a user’s webcam data is captured, rendered, and displayed by the browser itself. There are no codecs to be licensed, no plugins, no third party software, and no need to code your own media playback engines. That’s because navigator.getUserMedia is built into Chrome and Firefox. Of course, your own WebRTC applications will be more complex and require several other considerations (which we’ll cover) than this simple example. But the fact remains that WebRTC and HTML5 can now access streaming audio and video via a simple JavaScript command.
RTCPeerConnection
getUserMedia is responsible for capturing real-time data from webcams and microphones in WebRTC and HTML5. It sometimes seems more glamorous than the other WebRTC APIs because its exceptional effects are more immediately seen and heard in the development process. But just as crucial are the server-side considerations that actually connect peers (i.e. browsers) to each other. RTCPeerConnection is the API that allows users to ‘find’ each other across the elaborate maze of the internet. RTCPeerConnection finds other peers by utilizing an external signaling mechanism that is not built into the WebRTC API. These signaling platforms, such as OnSIP's, use sophisticated architectures that allow WebRTC packets to traverse NATs, firewalls, and other implementations that might erroneously filter them.
var callerPC = new RTCPeerConnection();
callerPC.addStream(localStream);
callerPC.createOffer(gotSDP);
function gotSDP(description) {
callerPC.setLocalDescription(description);
/* Now the description must be sent to the peer.
This tells the peer how to connect. It could be anything,
but here we’ll name this method ‘invite’ */
invite(description);
}
In the following example, the variable callerPC takes on the value of a new RTCPeerConnection. The function gotSDP records the local conditions of the browser (such as codec type) and passes the information back to createOffer, which then offers the other browser these initial conditions in an SDP packet. If the other browser shares the same WebRTC and HTML5 capabilities, real-time data can be exchanged.
RTCDataChannel
The WebRTC HTML5 APIs can be used for data sharing purposes beyond real-time media, although the groundbreaking effects of WebRTC will be seen most clearly in the realm of communications. But the peer to peer nature of WebRTC ensures that it can also be used to share more traditional forms of data (ex. filesharing) entirely in the browser. This is where the RTCDataChannel API is useful. In addition to sending data with low latency and high throughput, RTCDataChannel can also be used to enhance the capabilities of RTCPeerConnection. This is an early example of the code used to create data channels in SIP.js, OnSIP’s open source SIP JavaScript stack.
WebRTC, HTML5 and OnSIP
WebRTC’s powerful APIs offer developers unprecedented options in the realm of real-time communications. The ability to capture and transmit real-time data from from a webcam and a microphone using a simple JavaScript command makes it very easy to incorporate communications into browser-based web apps. The server-side considerations are more tricky, but that’s where OnSIP comes in. OnSIP has a mature SIP-based signaling platform that allows you to scale your application, bridge compatibility gaps between endpoints, broker connections behind firewalls, and track and report communication. Let us do the heavy lifting so you can focus on utilizing the unprecedented ease of the getUserMedia API.