我使用以下 JavaScript 代码打开了一个网络摄像头：
const stream = await navigator.mediaDevices.getUserMedia({ /* ... */ });
是否有任何 JavaScript 代码可以停止或关闭网络摄像头？谢谢大家。
问问题
179717 次
16 回答
290
编辑
由于最初发布了此答案，因此浏览器 API 已更改。
.stop()在传递给回调的流上不再可用。开发人员必须访问构成流（音频或视频）的轨道并单独停止它们。
示例（来自上面的链接）：
stream.getTracks().forEach(function(track) {
track.stop();
});浏览器支持可能不同。
原始答案
navigator.getUserMedia在成功回调中为您提供一个流，您可以调用.stop()该流来停止录制（至少在 Chrome 中，似乎 FF 不喜欢它）
于 2012-09-15T10:54:38.753 回答
90
使用以下任何功能：
// 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();
}
});
}
于 2012-07-25T09:42:21.797 回答
56
于 2017-11-17T19:00:14.677 回答
18
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 video
localStream.getVideoTracks()[0].stop();
于 2017-02-21T12:15:28.537 回答
13
假设我们在视频标签中有流式传输，并且 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;
于 2019-02-04T11:06:19.430 回答
9
使用不同的浏览器启动网络摄像头视频
歌剧 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 );
使用不同的浏览器停止网络摄像头视频
歌剧 12
video.pause();
video.src=null;
对于 Firefox Nightly 18.0
video.pause();
video.mozSrcObject=null;
适用于 Chrome 22
video.pause();
video.src="";
有了这个，网络摄像头灯每次都会熄灭......
于 2012-10-08T18:20:48.217 回答
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();
于 2017-02-21T07:16:12.853 回答
6
您可以使用成功处理程序中返回的流对象直接结束流到 getUserMedia。例如
localMediaStream.stop()
video.src=""或者null只是从视频标签中删除源。它不会释放硬件。
于 2013-04-01T18:58:49.143 回答
4
由于您需要轨道来关闭流媒体，并且您需要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();
});
当然，这将关闭所有活动的视频轨道。如果你有多个，你应该相应地选择。
于 2016-03-16T12:53:29.437 回答
4
如果.stop()不推荐使用，那么我认为我们不应该像@MuazKhan 剂量那样重新添加它。这是为什么事物被弃用并且不应再使用的原因。只需创建一个辅助函数......这是一个更多的 es6 版本
function stopStream (stream) {
for (let track of stream.getTracks()) {
track.stop()
}
}
于 2016-06-03T08:08:41.787 回答
2
您需要停止所有曲目（来自网络摄像头、麦克风）：
localStream.getTracks().forEach(track => track.stop());
于 2019-05-15T11:57:38.133 回答
1
启动和停止网络摄像头，（更新 2020 React es6 ）
启动网络摄像头
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();
于 2020-02-24T08:48:46.343 回答
0
通过 http 连接时，在流上使用 .stop() 可以在 chrome 上工作。使用 ssl (https) 时它不起作用。
于 2013-04-10T11:01:20.170 回答
0
请检查：https ://jsfiddle.net/wazb1jks/3/
navigator.getUserMedia(mediaConstraints, function(stream) {
window.streamReference = stream;
}, onMediaError);停止录制
function stopStream() {
if (!window.streamReference) return;
window.streamReference.getAudioTracks().forEach(function(track) {
track.stop();
});
window.streamReference.getVideoTracks().forEach(function(track) {
track.stop();
});
window.streamReference = null;
}于 2019-05-15T10:05:17.247 回答
0
以下代码对我有用：
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();
}
于 2019-05-17T10:27:13.953 回答
-2
有流形式successHandle的参考
var streamRef;
var handleVideo = function (stream) {
streamRef = stream;
}
//this will stop video and audio both track
streamRef.getTracks().map(function (val) {
val.stop();
});
于 2016-07-09T12:27:12.707 回答