Turn webcam off after "Taking Picture"

Question

I am having an issue with turning the webcam off once I have taken a snapshot. The code below works well - but I just cant figure out how to turn off the webcam once I have everything in the canvas.

I have tried a few methods that I have found by some some research, however none seem to help.

I have tried to add video.stop(); in the "snap" eventListener, and it says "undefined is not a function", however most things I have read says it should work?

Error screenshot: https://www.dropbox.com/s/h7g4cidqhimc5ij/Screenshot%202014-08-04%2013.08.04.png

To sum it all up, when someone clicks "Take Picture", I want the picture to be taken and the camera hardware turned off. The eventlister in later half of the code below is for the "Take Picture" button.

function startCam() {
$('#can').hide();
$('#video').show();
$('#tab1-retry').hide();
$('#save-tab1').hide();
var video = document.getElementById("video"),
    mask = document.getElementById("mask"),
    videoObj = {
        "video": true
    },
    errBack = function(error) {
        console.log("Video capture error: ", error.code);
    };

// Put video listeners into place
if (navigator.getUserMedia) { // Standard
    navigator.getUserMedia(videoObj, function(stream) {
        video.src = stream;
        video.play();
    }, errBack);
} else if (navigator.webkitGetUserMedia) { // WebKit-prefixed
    navigator.webkitGetUserMedia(videoObj, function(stream) {
        video.src = window.webkitURL.createObjectURL(stream);
        video.play();
    }, errBack);
} else if (navigator.mozGetUserMedia) { // WebKit-prefixed
    navigator.mozGetUserMedia(videoObj, function(stream) {
        video.src = window.URL.createObjectURL(stream);
        video.play();
    }, errBack);
}

document.getElementById("snap").addEventListener("click", function() {



window.canvas1 = new fabric.Canvas('canvas');
video.pause();
$('#video').hide();
$('#snap').hide();
$('#can').show();
$('#save-tab1').show();
$('#tab1-retry').show();

// VIDEO CAPTURE
var imgInstance = new fabric.Image(video, {
    left: 0,
    top: 0,
});
imgInstance.set('selectable', false);
canvas1.add(imgInstance);

// FIRST LAYER
mask = document.getElementById("mask");
var imgInstance1 = new fabric.Image(mask, {
    left: 100,
    top: 100,
    cornerSize: 20
});
imgInstance1.set('selectable', true);
canvas1.add(imgInstance1);

// CANVAS LAYER

canvas1.setActiveObject(canvas1.item(1));
canvas1.item(1)['evented'] = true;
canvas1.calcOffset();
canvas1.renderAll();
});

}

Answer 1

inside your success callback function you could initialize the stream to a variable say:

var cameraStream = stream;
video.src = window.URL.createObjectURL(stream);

then in your 'snap' eventListener you could just pause() the video stream after taking the screenshot and close/stop the cameraStream:

video.pause();
cameraStream.stop();

.stop() closes the webcam input.