Basic usage of the webcam

The getUserMedia API is useful for controlling a webcam video stream. This chapter presents the most interesting parts, related to the <video> and <audio> elements.

While this API is one component of the WebRTC specification and therefore not considered a “real” part of the HTML5 specification, we still consider it relevant to the “multimedia” part of this course. The getUserMedia API, when dealing with video streams, is always used in conjunction with the <video> element.

TYPICAL USE OF THE GETUSERMEDIA API WITH A WEBCAM

The main idea is to set the src attribute of a <video> element to the live video stream object coming out of the webcam. To get this stream, you’ll have to call the navigator.getUserMedia(params, onSuccess, onError) method from the getUserMedia API.

The stream is passed as a parameter to the onSuccess() callback, as in this typical example:

  1. <video id=“myVideo”autoplay>Fallback msg here.</video>
  2.    function onSuccess(stream) {
  3.      var output = document.getElementById(‘myVideo’);
  4.      // use the default webcam if more than one are connected
  5.      output.src = window.URL.createObjectURL(stream.getTracks()[0]);
  6.    }
  7.    function onError() {
  8.      // getUserMedia API not supported, or another application is using the webcam!
  9.    }
  10.  
  11.    if (navigator.getUserMedia) {
  12.      navigator.getUserMedia({video:true}, onSuccess, onError);
  13.    }

HTTPS is mandatory: for getUserMedia to work, it is mandatory to access the page that contains the JavaScript code through https:// otherwise you will get an error message. Notice that all examples on jsbin use https://jsbin.com/&#8230;.

SIMPLE WEB CAMERA DISPLAY THAT WORKS ON ALL BROWSERS WITH SUPPORT FOR THE GETUSERMEDIA API

This example is available online: JS Bin example

More on getUserMedia

Let’s see some more examples of what we can do with the getUserMedia API: start/stop the webcam, take a screenshot from the current video stream from the webcam, and apply CSS effects in real time. And at the end, we give links to some cool examples available on the Web.

HOW TO STOP/RELEASE THE WEBCAM

Online version at JS Bin

OTHER EXAMPLES THAT MIX IN WHAT WE’VE SEEN IN PREVIOUS CHAPTERS, BUT THIS TIME WITH A LIVE VIDEO STREAM

Applying CSS effects on a video element with a live webcam

Try this example that shows how to use the getUserMedia API – note the CSS effects (click on the video to cycle from one effect to another). Works in Chrome/Firefox/Opera: Online version at JS Bin

Taking a snapshot from the live webcam stream

The trick is to copy and paste the current image from the video stream into a <canvas> element:
Online version at JS Bin
We will examine this example in greater detail next week when we look at the <canvas> element. For the time being, just play with the example.

IMPRESSIVE DEMONSTRATIONS AVAILABLE ON THE WEB

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s