In this part we will focus on handling multiple devices.

In some cases, users may have more than one camera or microphone attached to their device. This is especially the case on mobile devices that often have a front-facing camera and a rear-facing one. In this case, you want to search through the available cameras or microphones and select the appropriate device for your user's needs. Fortunately, to do this, an API called MediaSourceTrack is exposed to the browser.

With MediaSourceTrack, we can ask for a list of devices and select the one we need:

MediaStreamTrack.getSources(function(sources) {
    var audioSource = null;
    var videoSource = null;
    for (var i = 0; i < sources.length; ++i) {
      var source = sources[i];
      if(source.kind === "audio") {
        console.log("Microphone found:", source.label, source.id);
        audioSource = source.id;
      } else if (source.kind === "video") {
        console.log("Camera found:", source.label, source.id);
        videoSource = source.id;
      } else {
        console.log("Unknown source found:", source);
      }
    }
    var constraints = {
      audio: {
        optional: [{sourceId: audioSource}]
      },
      video: {
        optional: [{sourceId: videoSource}]
      }
    };
    navigator.getUserMedia(constraints, function (stream) {
      var video = document.querySelector('video');
      video.src = window.URL.createObjectURL(stream);
    }, function (error) {
      console.log("Raised an error when capturing:", error);
    });
  });

This code calls getSources on MediaSourceTrack, which will give you a list of sources attached to the user's device. You can then iterate through them and select the one preferable to your application. If you open the development console while running this code, you will see the devices currently connected to the computer printed out as shown below

The source may also contain information such as which direction it faces to help with selection. With more progress and time, the browser could potentially provide a lot more information about the supported resolutions, frames per second (fps), and more about the different devices available. Always be sure to research the latest updates on the getUserMedia and MediaStreamTrack API to see which browsers have added more features.

Creating a photo booth application

One of the best parts of the Web is that everything works together. This makes creating complex applications, such as a photo booth application, easy with other APIs like Canvas. A photo booth application allows you to see yourself on the screen while being able to capture pictures of yourself, much like a real photo booth. The Canvas API is a set of arbitrary methods to draw lines, shapes, and images on the screen. This is popularized through the use of Canvas for games and other interactive applications across the Web.

In this project, we are going to use the Canvas API to draw a frame of our video to the screen. It will take the current feed in our video element, translate it into a single image, and draw that image to a <canvas> element. We will set up our project with a simple HTML file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Learning WebRTC - Chapter 2: Get User Media</title>
    <style>
      video, canvas {
        border: 1px solid gray;
        width: 480px;
        height: 320px;
      }
    </style>
  </head>
  <body>
    <video autoplay></video>
    <canvas></canvas>
    <button id="capture">Capture</button>
    <script src="photobooth.js"></script>
  </body>
</html>

All we have done is added a canvas to the page and are now looking for the photobooth.js file. Our JavaScript file is where the functionality lies:

function hasUserMedia() {
  return !!(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
}
if (hasUserMedia()) {
  navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
  var video = document.querySelector('video'),
      canvas = document.querySelector('canvas'),
      streaming = false;
  navigator.getUserMedia({
    video: true,
    audio: false
  }, function (stream) {
    video.src = window.URL.createObjectURL(stream);
    streaming = true;
  }, function (error) {
    console.log("Raised an error when capturing:", error);
  });
  document.querySelector('#capture').addEventListener('click', function (event) {
    if (streaming) {
      canvas.width = video.clientWidth;
      canvas.height = video.clientHeight;
      var context = canvas.getContext('2d');
      context.drawImage(video, 0, 0);
    }
  });
} else {
  alert("Sorry, your browser does not support getUserMedia.");
}

Now, you should be able to click on the Capture button and capture one frame of the video feed on the canvas. The image will show up as a single frame inside the <canvas> element. You can keep taking pictures to replace the image over and over again.