navigator.getUserMedia에서 열린 웹캠 중지 / 닫기


139

다음 JavaScript 코드를 사용하여 웹캠을 열었습니다. navigator.getUserMedia

웹캠을 중지하거나 닫는 JavaScript 코드가 있습니까? 모두 감사합니다.

답변:


199

편집하다

이 답변은 원래 게시되었으므로 브라우저 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가 마음에 들지 않습니다)


2
내가 생각 stream.stop()크롬에 대한 doen't 작업은, mediaRecorder.stop()이 브라우저에서 제공 스트림을 중단하지 않는 반면, 녹음을 중지합니다. 이 stackoverflow.com/questions/34715357/…
Muthu

@ Munto, 나에게 달려 있다고 생각한다. 나에게 stream.stop ()이 작동한다 (크롬). webRTC 스트림이 있기 때문입니다. 브라우저에서 녹화하는 경우 mediaRecorder.stop () 작동합니까?
Johan Hoeksma

예, 그러나 이것은 또 다른 문제를 일으 킵니다. 녹음을 중지하는이 기능은 몇 초 / 분의 녹음을 허용 한 후에 발생해야합니다. 기본 녹화 시간 후에 중지하려면 어떻게합니까? 감사합니다!
Emanuela Colta

1
이렇게하면 스트림이 중지되지만 다시로드 할 때까지 크롬의 비디오 표시기는 계속 활성화됩니다. 그것을 제거하는 방법이 있습니까?
Cybersupernova

@Cybersupernova 이에 대한 해결책을 찾았습니까? 나는 페이지 새로 고침이 작동하지 않을 수 있습니다 생각
samayo

59

다음 기능 중 하나를 사용하십시오.

// 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에 업데이트되었습니다.


2
고마워 mediaStream.stop은 더 이상 사용되지 않습니다.
댄 브라운

@ DanBrown 솔루션은 무엇입니까?
Webwoman

브라우저에서 공식적으로 사용되지 않고 제거 된 기능 을 복원 하기 위해 원시 API의 프로토 타입을 수정하지 않는 것이 좋습니다 . 불규칙하고 나중에 혼란을 일으킬 가능성이 있습니다. 스트림에서 모든 트랙을 중지해야 할 때 왜 그렇게하지 stream.getTracks().forEach(track => { track.stop() })않습니까? 또는 속기를 정당화하기에 충분할 정도로 자주이 작업을 수행하는 경우 항상과 같은 도우미 함수를 정의 할 수 있습니다 stopAllTracks(stream).
callum

45

사용하지 마십시오. stream.stop()더 이상 사용되지 않습니다.

MediaStream 지원 중단

사용하다 stream.getTracks().forEach(track => track.stop())


1
하나가 작동하는 것을 사람들에게 혼란 만 행진-2019의로 위의 솔루션은 크롬에서 잘 작동되는 인한 감가 상각에, 잘 완전히 작동하고 ,, 정말 감사합니다 .. 🙂
판 카즈 NAROLA

10

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

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

크롬 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="";

이것으로 매번 웹캠 표시등이 내려갑니다 ...


10
<video> 태그에서 비디오 표시 만 중지하지만 카메라는 중지하지 않습니다.
G. Führ

8

우리가 비디오 태그로 스트리밍하고 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;

6

성공 핸들러에서 리턴 된 스트림 오브젝트를 사용하여 getUserMedia에 직접 스트림을 종료 할 수 있습니다. 예 :

localMediaStream.stop()

video.src=""또는 null비디오 태그에서 소스를 제거합니다. 하드웨어를 해제하지 않습니다.


내가 참조. 나중에 다시 시도하겠습니다.
Shih-En Chou

1
실제로는 ... Firefox에서 작동하지 않습니다. 문서는이 방법이 모든 브라우저에서 구현되는 것은 아니라고 언급합니다.
Sdra

위의 해결책은 저에게 효과적이지 않았습니다. 이것은 그것을했다.
Scottmas

5

아래 방법을 시도하십시오.

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

4

이 경우 .stop()사용되지 않습니다 나는 우리가 @MuazKhan 선량처럼 다시 추가해야한다고 생각하지 않습니다. 사물이 더 이상 사용되지 않아 더 이상 사용해서는 안되는 이유입니다. 대신 도우미 함수를 만드십시오. 여기 더 es6 버전이 있습니다.

function stopStream (stream) {
    for (let track of stream.getTracks()) { 
        track.stop()
    }
}

1
for (let track of stream.getTracks()) { track.stop() }
guest271314

7
stream.getTracks().forEach(function (track) { track.stop() })ES5에서 이것은 for of
바젤

3

스트리밍을 닫으려면 트랙이 필요하고 트랙에 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();
});

물론 이것은 모든 활성 비디오 트랙을 닫습니다. 여러 개가있는 경우 그에 따라 선택해야합니다.


2

웹캠, 마이크에서 모든 트랙을 중지해야합니다.

localStream.getTracks().forEach(track => track.stop());

0

http를 통해 연결된 경우 스트림에서 .stop ()을 사용하면 크롬에서 작동합니다. SSL (https)을 사용할 때는 작동하지 않습니다.


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


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

0

웹 카메라 시작 및 중지, (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();

-1

스트림 형식 성공에 대한 참조가 있어야합니다.

var streamRef;

var handleVideo = function (stream) {
    streamRef = stream;
}

//this will stop video and audio both track
streamRef.getTracks().map(function (val) {
    val.stop();
});

1
이 대답은 본질적으로 이미 주어진 다른 몇 가지와 동일합니다.
Dan Dascalescu

장거리 @DanDascalescu이 아닙니다. 이 예에서 그는지도 기능을 기억하는 능력을 분명히 보여줍니다.
charliebeck와 함께
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.