HTML5 getUserMedia is not streaming

Question

I wrote a navigator.getUserMedia() script but it isnt working right.

I reused nearly the same lines of code in another test and there it worked. The problem is, that actually the camera is turned on (after given permission) but the stream isnt streaming. The camera stays on but the video element only displays a static image (maybe the first frame).

The src of the video element is a blob.

Heres my markup:

<video src="" id="camera-stream">
    <canvas style="display:none"></canvas>
</video>

The basic script is the following:

navigator.getUserMedia = navigator.getUserMedia || navigator.msGetUserMedia
                        || navigator.webkitGetUserMedia 
                        || navigator.mozGetUserMedia;

window.URL = window.URL || window.webkitURL;

var video, canvas, ctx, previewImg, localMediaStream = null;

function startCapture(){
    console.log("Start Capture invoked");
    if( !video || !navigator.getUserMedia || !window.URL ){
        console.log("Start capture returned.");
        return;
    }

    var args = {
        video: true
    };
    navigator.getUserMedia(args, captureSuccess, captureError);
}

function captureSuccess(stream){
    console.log("Capture successful");
    localMediaStream = stream;
    video.src = window.URL.createObjectURL(localMediaStream);  
    console.log("Stream: ", stream);
}

function captureError(e){
    console.log("Capture failed", e);
}

The startCapture() function is invoked in a jQuery onClick-hanlder for a link.

Is there an error in my script?

Answer 1

Ok, i found the error.

Maybe this will help some people. I forgott to set the autoplay="autoplay" attribute for the video element.