UX Design and Development course

Camera and Video Control with HTML5

Client-side APIs on mobile and desktop devices are quickly providing the same APIs. Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop. One of those APIs is the getUserMedia API, providing developers access to the user's camera. Let me show you how to get simple camera access from within your browser!

The HTML

For our HTML, all we need to do is set some simply block elements in the DOM to interact with. First we need a video window so that we can see what the camera sees:

<video id="video" width="640" height="480" autoplay></video>

Next we need the button to take the photo:

<button id="snap">Snap Photo</button>

Don't forget, we need to use the <canvas> block element so that we can paint an image into the view:

<canvas id="canvas" width="640" height="480"></canvas>

Last, we need to add in some JavaScript:

<script type="text/javascript" src="photo.js"></script>

The final template could look something like the following:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset='utf-8'>
    <title>HTML5 Photo</title>

  </head>
  <body>
    <main>

      <header>
        <h1>HTML5 Photo</h1>
      </header>

      <video id="video" width="640" height="480" autoplay></video>
      <button id="snap">Snap Photo</button>
      <canvas id="canvas" width="640" height="480"></canvas>

    </main>

    <script type="text/javascript" src="photo.js"></script>
  </body>
</html>

Each of these elements should be created once confirmation of camera support is confirmed, but for the sake of this tutorial, I wanted to show you what the elements look like with basic HTML. Do note that the dimensions we're working with are 640x480.

The JavaScript

With the HTML elements above are already created, the JavaScript portion will look smaller than you think. The bulk of the code is the duplication needed for the different video listeners:

// Put event listeners into place
window.addEventListener("DOMContentLoaded", function() {
  // Grab elements, create settings, etc.
  var canvas = document.getElementById("canvas"),
    context = canvas.getContext("2d"),
    video = document.getElementById("video"),
    videoObj = { "video": true },
    errBack = function(error) {
      console.log("Video capture error: ", error.code);
    };

  // Put video listeners into place
  if(navigator.getUserMedia) { // Standard
    navigator.getUserMedia(videoObj, function(stream) {
      video.src = stream;
      video.play();
    }, errBack);
  } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
    navigator.webkitGetUserMedia(videoObj, function(stream){
      video.src = window.webkitURL.createObjectURL(stream);
      video.play();
    }, errBack);
  }
  else if(navigator.mozGetUserMedia) { // Firefox-prefixed
    navigator.mozGetUserMedia(videoObj, function(stream){
      video.src = window.URL.createObjectURL(stream);
      video.play();
    }, errBack);
  }

}, false);

Once it's been established that the browser supports getUserMedia, a simple method sets the video element's src to the user's live camera/webcam. Calling the play method of the video then enacts the element's live video connection. That's all that's required to connect your camera to the browser!

Taking a photo is only marginally more difficult. Simply add a click listener to a generic button and and draw an image from video! [Be sure to add this within the function, preferably just after the video listeners.]

// Trigger photo take
document.getElementById("snap").addEventListener("click", function() {
  context.drawImage(video, 0, 0, 640, 480);
});

Of course you could add some sexy image filters and make a billion dollars...but I'll save that for another post. At minimum you could convert the canvas snapshot to an image though! I'll talk about canvas image filters in the future...

Being able to access the camera within the browser without using third party software is an incredible advancement. Paired with canvas and a bit of JavaScript, the camera has become quickly and easily accessible. Not only it the camera accessible, but since canvas is ultra-flexible, we'll be able to add sexy Instagram-style image filters in the future. For now, however, simply accessing the camera in our browser moves us miles ahead. Have fun taking images within your browser!

original source

Capturing Audio & Video in HTML5

Introduction

Audio/Video capture has been the "Holy Grail" of web development for a long time. For many years we've had to rely on browser plugins (Flash or Silverlight) to get the job done. Come on!

HTML5 to the rescue. It might not be apparent, but the rise of HTML5 has brought a surge of access to device hardware. Geolocation (GPS), the Orientation API (accelerometer), WebGL (GPU), and the Web Audio API (audio hardware) are perfect examples. These features are ridiculously powerful, exposing high level JavaScript APIs that sit on top of the system's underlying hardware capabilities.

This tutorial introduces a new API, navigator.getUserMedia(), which allows web apps to access a user's camera and microphone.

The road to getUserMedia()

If you're not aware of its history, the way we arrived at the getUserMedia() API is an interesting tale.

Several variants of "Media Capture APIs" have evolved over the past few years. Many folks recognized the need to be able to access native devices on the web, but that led everyone and their mom to put together a new spec. Things got so messy that the W3C finally decided to form a working group. Their sole purpose? Make sense of the madness! The Device APIs Policy (DAP) Working Group has been tasked to consolidate + standardize the plethora of proposals.

I'll try to summarize what happened in 2011...

Source