停止getUserMedia的网络摄像头流没有页面刷新

我想关闭带javascript功能的网络摄像头（它必须在收到一些Ajax响应后关闭），但似乎无法关闭而不刷新页面。关闭它的所有方法，如video.src = null，video.pause ...等在任何浏览器中都不起作用。唯一的方法是关闭作为成功函数参数传递的流，所以有什么方法可以在函数成功之外使用这个对象来关闭摄像头？停止getUserMedia的网络摄像头流没有页面刷新

我知道，这个问题以前（Stop/Close webcam using getUserMedia and RTCPeerConnection Chrome 25）被问过，但我的需求是不同的，所以我需要一些帮助来解决这个问题

的感谢！

编辑：我的工作代码试图关闭网络摄像头：

navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || navigator.webkitGetUserMedia || navigator.msGetUserMedia; 
if(navigator.getUserMedia){ 
    var video_constraints = { 
    mandatory: { 
     maxHeight: 480, 
     maxWidth: 640 
    }, 
    optional: [] 
    }; 
    var self = this; 
    self.navigator.getUserMedia({ 
     audio: false, 
     video: video_constraints 
    }, self.onSuccess, onError); 
} 
else{ 
    alert('An error has occurred starting the webcam stream, please revise the instructions to fix the problem'); 
} 

function onSuccess(stream) { 
    var video = document.getElementById('webcam'); 

    if(navigator.webkitGetUserMedia || navigator.mozGetUserMedia){ 
     video.src = window.URL.createObjectURL(stream); 
    } 
    else if(navigator.msGetUserMedia){ 
     //future implementation over internet explorer 
    } 
    else{ 
     video.src = stream; 
    } 
    self.localStream = stream; 
    video.play(); 
} 
function onError() { 
    alert('There has been a problem retrieving the streams - did you allow access?'); 
} 

function closeWebcamConnection(){ 
    this.localStream.stop(); 
}

uff..it真的复杂，张贴在这里的代码XD

来源

2013-04-10 user2158954

您需要通过执行其stop()方法停止LocalMediaStream对象。我有类似的问题。你需要做的是：

保持在getUserMedia()执行的的onSuccess回调函数的LocalMediaStream参考：

var localStream; 

onUserMediaSuccess = function(stream) { 
    // attach to a video element 
    ... 
    // keep a reference 
    localStream = stream; 
};

停止LocalMediaStream在需要的地方：

在

localStream.stop();

更多信息我自己的question（和answer）。

来源

2013-04-10 12:23:16 asgoth

嗯，好吧，我试图把类似的东西放在我的代码中，但我不知道这是因为你的代码完全不同。我也看到了你的旧问题，但对我来说还是很难理解。如果你使用“this”来停止流，你为什么要将流对象保存在“self”对象中？我会在这里发布我的代码，因此可能是你可以告诉我如何实现你的解决方案： – user2158954 2013-04-10 14:49:20

我承认使用“自我”可能会混淆没有整个上下文。我已经适应了我的答案了一下。只需将引用保留在全局或范围的变量localStream中即可。 – asgoth 2013-04-10 15:10:14

不可思议！我刚刚在Chrome和Firefox中测试过，它完美的工作！现在我记得，我也尝试过一次同样的东西，但它没有奏效。现在，如果我可以在不使用繁琐的ajax的情况下将画布图像捕获作为请求发送，那将是完美的，但这是另一个主题jej。非常感谢你的配合！独特的是：我可以使用HTTPS吗？ – user2158954 2013-04-10 15:41:28

这似乎是Chrome中的一个错误区域，并且行为在不断变化。这似乎是工作，只有当你通过HTTP（HTTPS不是）连接：

一些奇怪的原因，这并不对SSL工作（HTTPS）（经过对Linux版Chrome，版本27开发）

来源

2013-04-10 12:34:14 ACEGL

抱歉，但您的方法不适用于我。我认为我前段时间看到了类似的情况，但这种情况并没有起作用。我已经尝试了最新版本的Chrome和Firefox。此外，我将需要使用HTTPS实现.. – user2158954 2013-04-10 15:11:46

我只在Linux上的Chrome 27开发环境中测试它。你的设置是什么？如果你需要HTTPS（就像我一样），它无论如何都不会为你做。我在WebRTC问题跟踪器上打开了一个问题。 [链接]（https://code.google.com/p/webrtc/issues/detail?id=1622） – ACEGL 2013-04-10 15:45:33

哦，该死的XD！我的应用程序必须通过HTTPS运行。我使用Windows 7 64位企业版。我的Web应用程序运行在用于Web开发人员的Eclipse Java EE IDE中，版本为Indigo Service Release 2.我已经在Firefox 19.0.2和Chrome 26.0.1410.43上进行了测试。它也适用于Opera 12.15。嗯，如果我可以使用servlet中的request.getParameter函数以dataURL格式获取canvas的图像，那对我来说不会有问题。我还没有找到办法，可能是不可能的。你尝试过那样的事吗？ – user2158954 2013-04-10 16:22:05

-1

if (sourcevid.mozSrcObject) { 
    sourcevid.mozSrcObject.stop(); 
    sourcevid.src = null; 
} else { 
    sourcevid.src = ""; 
    localStream.stop(); 
}

来源

2013-04-24 09:13:31

保存到LocalMediaStream像asgoth建议是正确的引用，但对我来说在Chrome 47 localStream.stop();给了我一个错误：

Uncaught TypeError: localStream.stop is not a function

我得到它通过调用工作：

localStream.getVideoTracks()[0].stop();

来源

2015-12-11 20:31:38 j4y

目前（截至2015年12月）这是一个重要的答案。我们在一个网络应用程序中遇到了这个问题，导致Chrome中的选项卡崩溃，出现“Aw，snap”消息。这解决了我们的问题。 – 2015-12-17 07:38:25

这与TokBox/OpenTok错误有关_webRTCStream.stop（）不是函数。 – Qwerty 2015-12-30 12:58:55

仍然不会停止这种方法。您甚至可以使用removeTrack功能删除所有曲目，但是我的网络摄像头指示灯仍然亮着。 – Dtipson 2016-08-09 01:13:36

要摆脱的红色象征，在浏览器的标签和禁用两者的视频和音频在收到这些错误之一流

Uncaught TypeError: localStream.stop is not a function 
Uncaught TypeError: _webRTCStream.stop is not a function // TokBox, OpenTok

遍历找到的轨道并停止它们。

if (_webRTCStream.stop) { 
    _webRTCStream.stop() // idk what this does, left here for legacy reasons..? 
} else { 
    _webRTCStream.getTracks().forEach(function(track) { track.stop() }) 
}

注：_webRTCStream等于localStream，取决于你所使用的库。

来源

2015-12-30 13:48:03 Qwerty

加成asgoth's answer

localStream.stop() is deprecated in Chrome 45, removed in Chrome 47

如果妳调用.stop（）从多个地方，你可以使用下面的帮手停止功能，以保持逻辑在一个地方。

var localStream; 

onUserMediaSuccess = function(stream) { 

    // re-add the stop function 
    if(!stream.stop && stream.getTracks) { 
    stream.stop = function(){   
     this.getTracks().forEach(function (track) { 
     track.stop(); 
     }); 
    }; 
    } 

    // attach to a video element 
    ... 
    // keep a reference 
    localStream = stream; 
};

来源

2016-01-06 14:25:28

我有一个问题关闭所述视频流轨道（前置摄像头），并在浏览器49打开一个备选轨道（后置摄像头）我发现MediaStream.stop()已自45版本过时了，并得到了换成MediaStreamTrack.stop()。您可以在Sam Dutton的Google开发人员网站上阅读posting的更多信息。

来源

2016-04-11 18:56:26 Steve

停止getUserMedia的网络摄像头流没有页面刷新

回答

相关问题