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

Question

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

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

Answer 1

编辑

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

有关详细信息,请访问:https://developers.google.com/web/updates/2015/07/mediastream-deprecations？hl = zh_CN&stop-ended-and -active

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

stream.getTracks().forEach(function(track) {
  track.stop();
});

浏览器支持可能不同.

原始答案

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

Answer 2

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

mediaStream.stop();

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

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

这是一个跨浏览器的stream.stop黑客攻击:

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();
        });
    };
}

Answer 3

不要使用stream.stop(),它已被弃用

MediaStream弃用

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

Answer 4

假设我们在视频标签中有流媒体并且 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();
});
// assign null to srcObject of video
videoEl.srcObject = null;

Answer 5

使用不同的浏览器启动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="";

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

Answer 6

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

在线演示

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();

Answer 7

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

localMediaStream.stop()

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

Answer 8

尝试下面的方法

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();