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

Question

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

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

Answer 1

修改

由于此答案最初发布，因此浏览器API已更改。 传递给回调的流上不再提供.stop()。 开发人员必须访问组成流的音轨（音频或视频）并单独停止每个音轨。

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

示例（来自上面的链接）：

var track = stream.getTracks()[0];  // if only one media track
// ...
track.stop();

浏览器支持可能不同。

原始回答

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

Answer 2

您可以在 MediaStream 对象上调用“停止”，该对象将会过时;新提案是通过在每个媒体轨道上调用“停止”来发布媒体曲目：

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

Answer 3

请勿使用stream.stop()，不推荐使用

MediaStream Deprecations

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

Answer 4

使用不同的浏览器启动网络摄像头视频

对于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 5

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

localMediaStream.stop()

video.src=""或null只会从视频代码中删除来源。它不会释放硬件。

Answer 6

尝试下面的方法

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

Answer 7

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

function stopStream (stream) {
    for (let track of stream.getTracks()) { 
        track.stop()
    }
}

Answer 8

由于您需要曲目来关闭流媒体，并且您需要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();
});

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

Answer 9

假设我们已经在视频代码中进行了流式传输，并且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();
});

//将null分配给视频的srcObject     videoEl.srcObject = null;

Answer 10

当通过http连接时，在流上使用.stop（）适用于chrome。使用ssl（https）时它不起作用。

Answer 11

请检查以下内容：https://jsfiddle.net/wazb1jks/3/

- hosts: terminal02
  become: yes
  become_method: su
  gather_facts: no
  ignore_errors: yes
  tasks:
    - include_vars:
        file: ./vars_files/lab1.yml
    - include_vars:
        file: ./vars_files/global_vars.yml
    - include_role:
        name: backup_feature01
    - include_role:
        name: backup_feature02

停止录制

navigator.getUserMedia(mediaConstraints, function(stream) {
    window.streamReference = stream;
}, onMediaError);

Answer 12

您需要停止所有曲目（通过摄像头，麦克风）：

localStream.getTracks().forEach(track => track.stop());

Answer 13

以下代码对我有用：

public vidOff() {

      let stream = this.video.nativeElement.srcObject;
      let tracks = stream.getTracks();

      tracks.forEach(function (track) {
          track.stop();
      });

      this.video.nativeElement.srcObject = null;
      this.video.nativeElement.stop();
  }

Answer 14

localStream.getTracks().forEach(track => track.stop());

是正确的...但是在使用https时有些不正确。

Answer 15

启动和停止网络摄像头，（更新2020 React es6）

启动网络摄像头

C# WinForms

一般停止网络摄像头或视频播放

stopWebCamera =()=>

       //Start Web Came
      if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        //use WebCam
        navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {
          this.localStream = stream;
          this.video.srcObject = stream;
          this.video.play();
        });
      }
 }

停止网络摄像机功能即使在视频流中也可以使用：

stopVideo =()=>
{
        this.video.pause();
        this.video.src = "";
        this.video.srcObject = null;

         // As per new API stop all streams
        if (this.localStream)
          this.localStream.getTracks().forEach(track => track.stop());
}

Answer 16

引用stream form successHandle

var streamRef;

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

//this will stop video and audio both track
streamRef.getTracks().map(function (val) {
    val.stop();
});