Turn webcam off after "Taking Picture" - html

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.