HTML5 Canvas, 2nd Edition

Example 3: Create a Video Puzzle out of User-Captured Video

For our final example of the getUserMedia() function, we will use video captured from a webcam to create the video puzzle from Example 10 (CH6EX10.html).

The first thing we need to note is that (currently) the video captured from getUserMedia() is fixed to 640×480 and cannot be resized. For this reason, we need to update the code in CH6EX10.html to reflect a larger canvas with larger puzzle pieces.

In the HTML, we change the size of the Canvas to 690×530.

<canvas id="canvasOne" width="690" height="530"style="position: absolute; top:
      10px; left: 10px;" >
 Your browser does not support the HTML5 Canvas.
</canvas>

Then, in the JavaScript, we double the size of the pieces. In CH6EX10.html, we used 80×60 pieces, so in this example we make them 160×120:

partWidth=160;
partHeight=120;

The rest of the code changes are nearly identical to the last example. We create a <video> element in code as videoElement and use that as the object to capture video using getUserMedia():

function eventWindowLoaded() {

    videoElement = document.createElement("video");
    videoDiv = document.createElement('div');
    document.body.appendChild(videoDiv);
    videoDiv.appendChild(videoElement);
    videoDiv.setAttribute("style", "display:none;");
    if (userMediaSupported()) {
        startVideo();
        canvasApp();
    } else {
        alert("getUserMedia() Not Supported")
    }

}

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