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

const stream = await navigator.mediaDevices.getUserMedia({ /* ... */ });

是否有任何JavaScript代码停止或关闭网络摄像头?


当前回答

因为这个答案是最初发布的浏览器API已经改变了。 .stop()在传递给回调函数的流上不再可用。 开发者必须访问组成流的音轨(音频或视频)并分别停止它们。

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

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

stream.getTracks () .forEach(函数(跟踪){ track.stop (); });

浏览器支持可能有所不同。

以前,导航器。getUserMedia在成功回调中为您提供了一个流,您可以在该流上调用.stop()来停止录制(至少在Chrome中,似乎FF不喜欢它)

其他回答

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

对于Opera 12

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

Firefox夜间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夜间18.0

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

针对Chrome 22

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

有了这个,网络摄像头的灯每次都要熄灭……

启动和停止网络摄像头,(更新2020 React es6)

开启Web摄像头

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

停止网络摄像头功能,即使视频流:

  this.video.src = this.state.videoToTest;
  this.video.play();

因为你需要音轨来关闭流,你需要流对象来获得音轨,我在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();
});

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

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

localMediaStream.stop()

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

FF, Chrome和Opera已经开始通过导航器公开getUserMedia。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 video
localStream.getVideoTracks()[0].stop();