Failed to take photo from webcam using HTML5 and getUserMedia () in Google Chrome when loading first page

Referring to this article on HTML5Rocks I am trying to create a utility for taking pictures from a webcam.

The following is a snippet of HTML code:

<button type="button" name="btnCapture" id="btnCapture">Start my camera</button><br />
<video autoplay="true" id="video" style="height:240px;width:320px"></video><canvas id="canvas" style="display: none; height:240px;width:320px"></canvas><br />
<img id="capturedImage" src="/blank.gif" style="height:240px;width:320px"><input type="hidden" id="hdnImageBase64" name="hdnImageBase64"><br />

When I click the button, btnCaptureI launch my webcam and click it again. He captures a photo from a webcam and puts it in the image capturedImage.

The following is the JavaScript code:

var video = document.getElementById("video");
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var localMediaStream = null;
var capturedImage = document.getElementById("capturedImage");
var buttonTextCapturePicture = "Say Cheese!";

function onFailSoHard(e) {
    if (e.code == 1) {
        alert("Something went wrong! Either your webcam is not connected or you denied access to it.");
    } else {
        alert("getUserMedia() not supported in your browser. Try using latest version of Google Chrome or Opera.");
    }
}

function snapshot() {
    if (localMediaStream) {
        try {
            ctx.drawImage(video, 0, 0);
            capturedImage.src = canvas.toDataURL("image/png");
            document.getElementById("hdnImageBase64").value = canvas.toDataURL("image/png");
        } catch (e) {
            alert("Something went wrong while capturing you. Try refreshing the page. " + e);
        }
    }
}

video.addEventListener("click", snapshot, false);

function sizeCanvas() {
    setTimeout( function() {
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        capturedImage.height = video.videoHeight;
        capturedImage.width = video.videoWidth;
    }, 50);
}

var button = document.getElementById("btnCapture");
button.addEventListener("click", function(e) {
    if (localMediaStream) {
        snapshot();
        return;
    }
    if (navigator.getUserMedia) {
        navigator.getUserMedia("video", function(stream) {
            video.src = stream;
            localMediaStream = stream;
            sizeCanvas();
            button.textContent = buttonTextCapturePicture;
        }, onFailSoHard);
    } else if (navigator.webkitGetUserMedia) {
        navigator.webkitGetUserMedia({"video" : true}, function(stream) {
            video.src = window.webkitURL.createObjectURL(stream);
            localMediaStream = stream;
            sizeCanvas();
            button.textContent = buttonTextCapturePicture;
        }, onFailSoHard);
    } else {
        onFailSoHard({
            target : video
        });
    }
}, false);

btnCapture , sizeCanvas(), , (, 320 240). , Base64 - canvas.toDataURL capturedImage.

Opera. Google Chrome . , . , , canvas.toDataURL Base64 data:,, - , Resource interpreted as Image but transferred with MIME type text/plain: "data:,". . , sizeCanvas, , .

, Chrome sizeCanvas?

Google Chrome: 24.0.1312.57 : 12.11