设为首页收藏本站
开启辅助访问

关于javascript：停止/关闭由navigator.mediaDevices.getUserMedia打开的网络摄像头流

您所在的位置：网站首页 › 摄像头怎么取消共享权限 › 关于javascript：停止/关闭由navigator.mediaDevices.getUserMedia打开的网络摄像头流

关于javascript：停止/关闭由navigator.mediaDevices.getUserMedia打开的网络摄像头流

2024-07-15 21:17| 来源: 网络整理| 查看: 265

我使用以下JavaScript代码打开了摄像头：

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

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

编辑

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

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

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

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

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

原始答案

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

相关讨论 我认为stream.stop()不适用于chrome，mediaRecorder.stop()会停止录制，而不会停止浏览器提供的流。你能看一下这个stackoverflow.com/questions/34715357/… @Muntu，我认为这取决于我，stream.stop()正在运行(适用于Chrome)。因为我有一个webRTC流。那么，如果您正在浏览器中进行录制，那么MediaRecorder.stop()会起作用吗？ 是的，但这引起了另一个问题。允许录制几秒钟/分钟后，应发生此停止录制的功能。您如何控制它：在默认的录制时间后将其停止？谢谢！ 这将停止流，但是在Chrome重新加载之前，Chrome上的视频指示器仍保持活动状态。有没有办法删除它呢？ @Cyber??supernova您是否找到了解决方案？我认为页面刷新可能有效 @samayo不，我没有找到任何内容，我无法重新加载页面 @Muthu-此答案的最新示例似乎是在所有可用Rails上单独调用track.stop()。当我使用andrei的新代码时，记录似乎"停止"，并且流被馈入全零，但是当我调用getUserMedia时注册的成功处理程序不会停止运行。你是这个意思吗？

使用以下任何功能：

1234567891011121314151617181920212223242526// stop both mic and camera function stopBothVideoAndAudio(stream) {     stream.getTracks().forEach(function(track) {         if (track.readyState == 'live') {             track.stop();         }     }); } // stop only camera function stopVideoOnly(stream) {     stream.getTracks().forEach(function(track) {         if (track.readyState == 'live' && track.kind === 'video') {             track.stop();         }     }); } // stop only mic function stopAudioOnly(stream) {     stream.getTracks().forEach(function(track) {         if (track.readyState == 'live' && track.kind === 'audio') {             track.stop();         }     }); } 相关讨论 谢谢你mediaStream.stop已被弃用。 @DanBrown您的解决方案是什么？ 我强烈建议不要修改本机API的原型，以恢复已正式弃用并从浏览器中删除的功能。它是不规则的，以后可能会引起混乱。当您需要停止流中的所有Rails时，为什么不只是stream.getTracks().forEach(track => { track.stop() })？或者，如果您确实经常进行此操作以证明速记的合理性，则可以始终定义诸如stopAllTracks(stream)之类的辅助函数。

不使用stream.stop()，已弃用

MediaStream弃用

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

相关讨论 非常感谢您，它的工作状况完全正常，由于折旧，这使人们感到困惑的是哪个人在工作，但是截至2019年3月，上述解决方案在chrome中效果很好。 如何恢复赛道？

FF，Chrome和Opera现在已开始通过navigator.mediaDevices公开getUserMedia(可能更改：)

在线演示

12345678910111213141516navigator.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();

假设我们在视频代码中流式传输，并且id是video-，那么我们应该有以下代码-

123456789101112var 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;

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

对于Opera 12

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

对于Firefox Nightly 18.0

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

对于Chrome 22

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

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

对于Opera 12

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

对于Firefox Nightly 18.0

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

对于Chrome 22

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

与此同时，网络摄像头灯每次都会熄灭...

相关讨论 这只会停止在标签中显示视频，但不会停止摄像机。

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

1localMediaStream.stop()

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

相关讨论 我知道了。我稍后再试。 不是真的...在Firefox上不起作用。文档提到此方法并非在所有浏览器中都实现... 上述解决方案对我不起作用。做到了。

尝试以下方法：

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

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

12345function stopStream (stream) {     for (let track of stream.getTracks()) {         track.stop()     } } 相关讨论 for (let track of stream.getTracks()) { track.stop() } ES5中的stream.getTracks().forEach(function (track) { track.stop() })，这避免了for of的冗长babel变换

由于您需要Rails来关闭流式传输，并且需要stream喷射器才能到达Rails，因此我在上述Muaz Khan的帮助下使用的代码如下：

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

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

您需要停止所有曲目(来自网络摄像头，麦克风)：

1localStream.getTracks().forEach(track => track.stop()); 启动和停止网络摄像头((更新2020 React es6))

启动网络摄像头

123456789101112stopWebCamera =()=>        //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();         });       }  }

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

12345678910stopVideo =()=> {         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()); }

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

12  this.video.src = this.state.videoToTest;   this.video.play(); 相关讨论 是否可以停止然后重新启动屏幕捕获共享，而无需让用户再次选择窗口？

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

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

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

停止录制

12345678910111213function stopStream() {     if (!window.streamReference) return;     window.streamReference.getAudioTracks().forEach(function(track) {         track.stop();     });     window.streamReference.getVideoTracks().forEach(function(track) {         track.stop();     });     window.streamReference = null; }

以下代码对我有用：

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

具有流形式SuccessHandle的引用

12345678910var streamRef; var handleVideo = function (stream) {     streamRef = stream; } //this will stop video and audio both track streamRef.getTracks().map(function (val) {     val.stop(); }); 相关讨论 这个答案与已经给出的其他几个答案基本相同。 @DanDascalescu不能远射。看到，在此示例中，他清楚地证明了自己调用地图功能的能力。



【本文地址】


今日新闻

推荐新闻

CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3