“拍照”后关闭网络摄像头

Question

拍摄快照后，我在关闭网络摄像头时遇到问题。下面的代码运行良好 - 但是一旦我在画布中拥有所有内容，我就无法弄清楚如何关闭网络摄像头。

我尝试了一些我通过一些研究发现的方法，但似乎没有任何帮助。

我尝试添加 video.stop();在“快照”事件监听器中，它说“未定义不是函数”，但是我读过的大多数内容都说它应该可以工作？

错误截图：https://www.dropbox.com/s/h7g4cidqhimc5ij/Screenshot%202014-08-04%2013.08.04.png

总而言之，当有人点击“拍照”时，我希望拍照并关闭相机硬件。下面代码后半部分的事件列表用于“拍照”按钮。

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

在你的成功回调函数中，你可以将流初始化为一个变量：

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

然后在您的“快照”事件监听器中，您可以在截屏后暂停（）视频流并关闭/停止 cameraStream：

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

.stop() 关闭网络摄像头输入。