HTML5 Canvas, 2nd Edition

Example 1: Show Video

In our first example of Web RTC Media Capture, we will simply show a video from a webcam on an HTML5 page.

First we need a <video> tag in the HTML page to hold the video that we will capture from the webcam. We set it to autoplay so that we will see it moving as soon as it becomes available:

<div>
<video id="thevideo" autoplay></video>
</div>

Our next job is to try to figure out whether the browser supports video capture. We do this by creating a function named userMediaSupported()that returns a Boolean based on the availability of the getUserMedia()method in various browsers. We need to do this because getUserMedia()support is not the universal standard yet.

function userMediaSupported() {
    return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia || navigator.msGetUserMedia);
}

If we know that getUserMedia() is supported, we call startVideo(). If not, we display an alert box:

function eventWindowLoaded() {
    if (userMediaSupported()) {
        startVideo();
    } else {
        alert("getUserMedia() Not Supported")
    }
}

Next, we find the existing getUserMedia() method for the current browser and set the local navigator.getUserMedia() function to its value. Again, we do this because support is not universal, and this step will make it much easier to reference getUserMedia() in our code.

Next we call the getUserMedia() function, passing three arguments:

• An object with Boolean properties media that we want to capture (video:true and/or audio:true) (At the ...