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

Posted 2023-05-07

【中文标题】“拍照”后关闭网络摄像头

【英文标题】：Turn webcam off after "Taking Picture"

【发布时间】：2014-09-26 20:18:19

【问题描述】：

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

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

我尝试添加 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();
);

【问题讨论】：

Stop/Close webcam which is opened by navigator.getUserMedia的可能重复

请更新您的问题，提供有关其不工作的特定浏览器的信息。

请在此处粘贴图片，而不是将其托管在外部网站上。 Dropbox 链接现已失效。

【参考方案1】：

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

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

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

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

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