Out of WebRTC’s three APIs - getUserMedia, RTCPeerConnection, RTCDataChannel - getUserMedia is ultimately the one that allows browsers to capture streaming voice and video in a few simple JavaScript commands. The real-time data that users generate with a computer’s microphone and webcam are retained by getUserMedia via a high-level JavaScript command. This lets the browser take care of the tricky backend procedures (such as retention, rendering, codec management) on its own.
With WebRTC, developers gain the freedom to incorporate Skype-like chat capabilities into their applications without requiring them to build complex media engines and communications platforms. Additionally, the getUserMedia API is built into every Chrome and Firefox browser, which means that your users will never have to download plugins or modify their software to get their browsers to understand the WebRTC JavaScript commands.
getUserMedia: The First Link In the Chain
Before RTCPeerConnection can route a browser’s real-time data to another browser, a user’s streaming media must be captured by getUserMedia. In theory, RTCDataChannel and RTCPeerConnection could work together to offer real-time text chats. But it is ultimately the audio and video streaming capabilities of getUserMedia that make WebRTC a breakthrough technology. Consider the way navigator.getUserMedia creates an audiovisual stream.
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 just a few lines of code, the browser is able to capture data from the user’s webcam and microphone. It turns this real-time audiovisual stream into a basic JavaScript object. Although most coding for WebRTC is done in JavaScript, the APIs essentially allow the application to treat these JavaScript objects as video and audio objects in HTML5. In other words, getUserMedia, RTCPeerConnection, and RTCDataChannel are ultimately HTML5 APIs that give JavaScript enhanced media capabilities.
In short, the getUserMedia API gives developers an easy way to turn real-time media streams into basic JavaScript objects that can be easily manipulated in code form. The streams themselves are highly customizable. Developers can tweak the size, quality, and other properties of each stream with relative ease. The following snippet enables HD quality for a WebRTC video feed.
Quality and size are set with relative ease. One of the most impressive features of WebRTC is its ability to remain entirely open source all while offering real-time media quality that rivals proprietary models. This is due to the power of Opus and VP8, getUserMedia’s mandatory open source codecs.
VP8 and Opus: The Open Source Solutions for getUserMedia
VP8, the video codec for getUserMedia, has unlimited frame and data rates. It’s width and height are 14 bits, which means the maximum resolution is 16384x16384 pixels. VP8 is often compared with H.264, a popular video codec that requires licensing royalties. But showing is perhaps better than telling. So why not give some WebRTC video applications a try? GetOnSIP is a WebRTC video chat client that we built with our own SIP stack, SIP.js.
Opus is an open, royalty-free, highly versatile audio codec required by WebRTC. Opus can manage VoIP, gaming chats, videoconferencing, and live music performances. For interactive speech and music transmission, it is generally considered the internet’s best codec. Opus uses technology from Skype’s SILK codec, which gives getUserMedia the ability to stream real-time audio content at a high quality.