Answers:
编辑
由于最初发布了此答案,因此浏览器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不喜欢它)
使用以下任何功能:
// 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();
}
});
}
注意:答案更新于:06/09/2020
stream.getTracks().forEach(track => { track.stop() })
呢?或者,如果您确实经常进行此操作以证明简写的合理性,则可以始终定义一个辅助函数,例如stopAllTracks(stream)
。
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();
使用其他浏览器启动网络摄像头视频
对于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="";
有了这个,网络摄像头灯每次都会熄灭...
假设我们在video代码中流式传输,并且id是video- <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;
您可以使用成功处理程序中返回给getUserMedia的流对象直接结束流。例如
localMediaStream.stop()
video.src=""
或null
只是从视频标签中删除源。它不会释放硬件。
请尝试以下方法:
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();
如果.stop()
不推荐使用,那么我认为我们不应该像@MuazKhan一样重新添加它。这是为什么不赞成使用并且不再使用的原因。而是创建一个辅助函数...这是更多的es6版本
function stopStream (stream) {
for (let track of stream.getTracks()) {
track.stop()
}
}
for (let track of stream.getTracks()) { track.stop() }
stream.getTracks().forEach(function (track) { track.stop() })
在ES5中,这避免了冗长的babel变换for of
由于您需要轨道来关闭流式传输,并且需要通过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();
});
当然,这将关闭所有活动的视频轨道。如果有多个,则应进行相应选择。
请检查以下内容: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;
}
启动网络摄像头
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();
对流形式成功有参考
var streamRef;
var handleVideo = function (stream) {
streamRef = stream;
}
//this will stop video and audio both track
streamRef.getTracks().map(function (val) {
val.stop();
});
stream.stop()
不适用于chrome,mediaRecorder.stop()
它会停止录制,而不会停止浏览器提供的数据流。你可以看看这个stackoverflow.com/questions/34715357/...