javascript - 停止/关闭由navigator.getUserMedia打开的网络摄像头

我使用以下JavaScript代码打开了一个网络摄像头:navigator.getUserMedia

是否有任何JavaScript代码可以停止或关闭网络摄像头? 感谢大家。

Shih-En Chou asked 2019-08-13T17:04:36Z
12个解决方案
119 votes

编辑

由于此答案最初发布,因此浏览器API已更改。navigator.getUserMedia在传递给回调的流上不再可用。开发人员必须访问组成流(音频或视频)的曲目并单独停止每个曲目。

更多信息:[https://developers.google.com/web/updates/2015/07/mediastream-deprecations?hl=en#stop-ended-and-active]

示例(来自上面的链接):

navigator.getUserMedia

浏览器支持可能不同。

原始答案

navigator.getUserMedia为您提供成功回调中的流,您可以在该流上拨打.stop()以停止录制(至少在Chrome中,似乎FF不喜欢它)

andrei answered 2019-08-13T17:05:30Z
54 votes

你可以打电话给#34;停止" 在MediaStream对象上将会过时; 新提案是通过调用" stop"来发布媒体曲目。 在每个媒体轨道上:

mediaStream.stop();

// or
mediaStream.getTracks()[0].stop();
mediaStream.getTracks()[1].stop();

更新于2015年11月3日上午10:34:24

这是一个跨浏览器stream.stop hack:

var MediaStream = window.MediaStream;

if (typeof MediaStream === 'undefined' && typeof webkitMediaStream !== 'undefined') {
    MediaStream = webkitMediaStream;
}

/*global MediaStream:true */
if (typeof MediaStream !== 'undefined' && !('stop' in MediaStream.prototype)) {
    MediaStream.prototype.stop = function() {
        this.getTracks().forEach(function(track) {
            track.stop();
        });
    };
}
Muaz Khan answered 2019-08-13T17:06:11Z
30 votes

不要使用stream.getTracks().forEach(track => track.stop()),它已被弃用

MediaStream弃用

使用stream.getTracks().forEach(track => track.stop())

sol404 answered 2019-08-13T17:06:50Z
9 votes

使用不同的浏览器启动Webcam Video

适用于Opera 12

window.navigator.getUserMedia(param, function(stream) {
                            video.src =window.URL.createObjectURL(stream);
                        }, videoError );

适用于Firefox Nightly 18.0

window.navigator.mozGetUserMedia(param, function(stream) {
                            video.mozSrcObject = stream;
                        }, videoError );

对于Chrome 22

window.navigator.webkitGetUserMedia(param, function(stream) {
                            video.src =window.webkitURL.createObjectURL(stream);
                        },  videoError );

使用不同的浏览器停止网络摄像头视频

适用于Opera 12

video.pause();
video.src=null;

适用于Firefox Nightly 18.0

video.pause();
video.mozSrcObject=null;

对于Chrome 22

video.pause();
video.src="";

有了这个,网络摄像头灯每次都会消失......

Alain Saurat answered 2019-08-13T17:08:00Z
7 votes

您可以使用成功处理程序中返回的流对象直接结束流到getUserMedia。 例如

localMediaStream.stop()

video.src=""null只会从视频标签中删除源。 它不会释放硬件。

Bhavin answered 2019-08-13T17:08:34Z
6 votes

FF,Chrome和Opera现已开始通过navigator.mediaDevices暴露getUserMedia(可能会改变:)

在线演示

navigator.mediaDevices.getUserMedia({audio:true,video:true})
    .then(stream => {
        window.localStream = stream;
    })
    .catch( (err) =>{
        console.log(err);
    });
// later you can do below
// stop both video and audio
localStream.getTracks().forEach( (track) => {
track.stop();
});
// stop only audio
localStream.getAudioTracks()[0].stop();
//stop only audio 
localStream.getVideoTracks()[0].stop();
Sasi Varunan answered 2019-08-13T17:09:07Z
5 votes

尝试下面的方法

var mediaStream = null;
    navigator.getUserMedia(
        {
            audio: true,
            video: true
        },
        function (stream) {
            mediaStream = stream;
            mediaStream.stop = function () {
                this.getAudioTracks().forEach(function (track) {
                    track.stop();
                });
                this.getVideoTracks().forEach(function (track) { //in case... :)
                    track.stop();
                });
            };
            /*
             * Rest of your code.....
             * */
        });

    /*
    * somewhere insdie your code you call
    * */
    mediaStream.stop();
imal hasaranga perera answered 2019-08-13T17:09:33Z
4 votes

如果.stop()被弃用,那么我认为我们不应该像@MuazKhan剂量那样重新添加它。 这是为什么事情被弃用而不应再被使用的原因。 只需创建一个辅助函数......这是一个更多的es6版本

function stopStream (stream) {
    for (let track of stream.getTracks()) { 
        track.stop()
    }
}
Endless answered 2019-08-13T17:10:01Z
3 votes

由于您需要轨道来关闭流媒体,并且您需要stream才能进入轨道,因此我在Muaz Khan的帮助下使用的代码如下:

if (navigator.getUserMedia) {
    navigator.getUserMedia(constraints, function (stream) {
        videoEl.src = stream;
        videoEl.play();
        document.getElementById('close').addEventListener('click', function () {
            stopStream(stream);
        });
    }, errBack);

function stopStream(stream) {
console.log('stop called');
stream.getVideoTracks().forEach(function (track) {
    track.stop();
});

当然,这将关闭所有活动的视频轨道。 如果您有多个,则应相应选择。

mcy answered 2019-08-13T17:10:35Z
3 votes

假设我们有视频标签流和id是视频 - <video id="video"></video>那么我们应该有以下代码 -

var videoEl = document.getElementById('video');
// now get the steam 
stream = videoEl.srcObject;
// now get all tracks
tracks = stream.getTracks();
// now close each track by having forEach loop
tracks.forEach(function(track) {
   // stopping every track
   track.stop();
});

//为视频的srcObject指定null     videoEl.srcObject = null;

Veshraj Joshi answered 2019-08-13T17:11:10Z
0 votes

当通过http连接时,在流上使用.stop()可以使用chrome。 使用ssl(https)时它不起作用。

ACEGL answered 2019-08-13T17:11:37Z
-1 votes

从成功Handler获得流的参考

var streamRef;

var handleVideo = function (stream) {
    streamRef = stream;
}

//this will stop video and audio both track
streamRef.getTracks().map(function (val) {
    val.stop();
});
Pankaj Anupam answered 2019-08-13T17:12:03Z
translate from https://stackoverflow.com:/questions/11642926/stop-close-webcam-which-is-opened-by-navigator-getusermedia