How to Access Audio and Video when Coding with JavaScript

By Chris Minnick, Eva Holland

How do you access audio and video when coding with JavaScript? Prior to HTML5, the only way for a web page to use a camera connected to a computer or built into a computer was through the use of plugins, such as Flash.

One of the major goals of HTML5 is to eliminate the need for plugins, with their constant updates and security issues. Since HTML5 was first proposed, there have been several attempts to define a standard for using input from cameras.

The latest and greatest API for enabling live video and audio communications through web browsers is called webRTC (web Real Time Communications).

At the heart of webRTC is navigator.getUserMedia(), which does exactly what its name would imply: It gets media (audio and video) from the user (well, from the user’s device, specifically).

getUserMedia is currently supported in Chrome, Opera, and Firefox. If you want to use it in other browsers, such as Safari or Internet Explorer, you’ll need to use a tool called a polyfill.

The first parameter of getUserMedia is an object with properties indicating what type of media you want to access. For example, if you want to access both video and audio, you would use the following object as the first parameter:

{video: true, audio: true}

The other parameters that getUserMedia takes are a success callback and an error callback. Here’s a sample use of getUserMedia.

<!DOCTYPE html>
<html>
<head>
 <title>Get the Media</title>
 <style type=“text/css”>
 html, body, #map-canvas { height: 100%; margin: 0; padding: 0;}
 </style>
 <script>
 window.addEventListener(‘DOMContentLoaded’, function() {
 var v = document.getElementById(‘v’);
 navigator.getUserMedia = (navigator.getUserMedia ||
       navigator.webkitGetUserMedia ||
       navigator.mozGetUserMedia ||
       navigator.msGetUserMedia);
 if (navigator.getUserMedia) {
  // Request access to video only
  navigator.getUserMedia(
  {
   video:true,
   audio:false
  },
  function(stream) {
   var url = window.URL || window.webkitURL;
   v.src = url ? url.createObjectURL(stream) : stream;
   v.play();
  },
  function(error) {
   alert(‘Something went wrong. (error code ‘ + error.code + ‘)’);
   return;
  }
  );
 } else {
  alert(‘Sorry, the browser you are using doesn’t support getUserMedia’);
  return;
 };
 });

</script> </head> <body> <video id = “v”/> </body> </html>

Examine the code’s key lines:

window.addEventListener(‘DOMContentLoaded’, function() {

An event listener that waits until the DOM is loaded before running the rest of the code is

var v = document.getElementById(‘v’);

The preceding line creates a new variable, called v, to hold a reference to the video element with an id =v:

navigator.getUserMedia = (navigator.getUserMedia ||
   navigator.webkitGetUserMedia ||
   navigator.mozGetUserMedia ||
   navigator.msGetUserMedia);

getUserMedia is an experimental technology still not fully standardized. Because of this, web browsers have different implementations of it, which they indicate by using vendor prefixes. This statement sets the value of the standard navigator.getUserMedia object to the vendor prefixed version supported by the user’s current browser. So, when you’re using Firefox and call navigator.getUserMedia, you’re actually calling navigator.mozGetUserMedia:

if (navigator.getUserMedia) {

which checks to see whether the user’s browser supports getUserMedia:

navigator.getUserMedia(

Call the getUserMedia method:

{
 video:true,
 audio:false
}

The first parameter is an object telling which media you want to access:

function(stream) {

The success callback runs if the request to getUserMedia succeeds. It takes a single argument:

var url = window.URL || window.webkitURL;
v.src = url ? url.createObjectURL(stream) : stream;

The preceding two lines smooth out the differences between how different browsers handle the media stream object. The second line features our pal, the ternary operator! This statement sets the src property of the video element to either url.createObjectUrl(stream) or to stream, depending on which method is supported by the browser:

v.play();

Finally, the video is played. If your computer supports getUserMedia and you have a camera, you’ll see video of yourself (or whatever the camera is pointing at) at this point:

function(error) {
 alert(‘Something went wrong. (error code ‘ + error.code + ‘)’);
 return;
}

The preceding code is an error callback. If the browser does support getUserMedia(), but the user doesn’t allow the browser to access the camera, this function will run and print out a specific error message:

else {
 alert(‘Sorry, the browser you are using doesn’t support getUserMedia’);
 return;
};

The preceding code is the else condition. If the user’s browser doesn’t support getUserMedia(), this alert will be displayed:

If the user’s browser does support getUserMedia, the user has a camera, and they allow the app to access the camera, the app will display live video in the browser window.

Success! The browser is displaying live video without a plugin.
Success! The browser is displaying live video without a plugin.