답변:
편집하다
이 답변은 원래 게시되었으므로 브라우저 API가 변경되었습니다.
.stop()
콜백으로 전달되는 스트림에서 더 이상 사용할 수 없습니다. 개발자는 스트림 (오디오 또는 비디오)을 구성하는 트랙에 액세스하고 각 트랙을 개별적으로 중지해야합니다.
자세한 내용은 여기 : https://developers.google.com/web/updates/2015/07/mediastream-deprecations?hl=ko#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)
.
사용하지 마십시오. stream.stop()
더 이상 사용되지 않습니다.
사용하다 stream.getTracks().forEach(track => track.stop())
FF, 크롬과 오페라는 노출 시작 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();
다른 브라우저에서 웹캠 비디오 시작
오페라 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 );
크롬 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;
크롬 22
video.pause();
video.src="";
이것으로 매번 웹캠 표시등이 내려갑니다 ...
우리가 비디오 태그로 스트리밍하고 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;
성공 핸들러에서 리턴 된 스트림 오브젝트를 사용하여 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
도달 하려면 boject가 필요하기 때문에 위의 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();
});
물론 이것은 모든 활성 비디오 트랙을 닫습니다. 여러 개가있는 경우 그에 따라 선택해야합니다.
웹캠, 마이크에서 모든 트랙을 중지해야합니다.
localStream.getTracks().forEach(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()
크롬에 대한 doen't 작업은,mediaRecorder.stop()
이 브라우저에서 제공 스트림을 중단하지 않는 반면, 녹음을 중지합니다. 이 stackoverflow.com/questions/34715357/…