javascript - navigator.mediaDevices.getUserMedia によって開かれたウェブカメラ ストリームを停止/閉じる

Question

次の JavaScript コードを使用して Web カメラを開きました。

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

ウェブカメラを停止または閉じるための JavaScript コードはありますか? みんな、ありがとう。

Answer 1

編集

この回答が最初に投稿されて以来、ブラウザー API が変更されました。 .stop()コールバックに渡されるストリームでは使用できなくなりました。開発者は、ストリーム (オーディオまたはビデオ) を構成するトラックにアクセスし、それぞれを個別に停止する必要があります。

詳細はこちら: https://developers.google.com/web/updates/2015/07/mediastream-deprecations?hl=en#stop-ended-and-active

例（上記のリンクから）：

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

ブラウザのサポートは異なる場合があります。

元の答え

navigator.getUserMedia成功のコールバックでストリームを提供します。.stop()そのストリームを呼び出して記録を停止できます (少なくとも Chrome では、FF は気に入らないようです)。

Answer 2

次の関数のいずれかを使用します。

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

Answer 3

さまざまなブラウザーで Webcam Video を開始する

オペラ 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 );

異なるブラウザーで Webcam Video を停止する

オペラ 12 の場合

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

Firefox Nightly 18.0 の場合

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

クロム 22 の場合

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

これにより、ウェブカメラのライトが毎回消えます...

Answer 4

ストリーミングを閉じるにはトラックが必要であり、トラックにアクセスするにはstreamboject が必要なので、上記の 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();
});

もちろん、これはすべてのアクティブなビデオ トラックを閉じます。複数ある場合は、それに応じて選択する必要があります。

Answer 5

ストリームで .stop() を使用すると、http 経由で接続したときにクロムで機能します。ssl (https) を使用している場合は機能しません。

Answer 6

これを確認してください: 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;
}

Answer 7

次のコードは私のために働いた：

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

Answer 8

ストリーム フォームの successHandle の参照を持つ

var streamRef;

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

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