web-dev-qa-db-ja.com

navigator.getUserMediaによって開かれたWebカメラを停止/閉じる

次のJavaScriptコードを使用してウェブカメラを開きました：navigator.getUserMedia

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

javascripthtml5html5-videowebrtc
97
Shih-En Chou

編集

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

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

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

var track = stream.getTracks()[0];  // if only one media track
// ...
track.stop();

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

元の答え

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

133
andrei

「stop "over MediaStream object」を呼び出すことができますが、これは廃止されます;新しい提案は、各メディアトラックで "stop"を呼び出してメディアトラックをリリースすることです。

mediaStream.stop();

// or
mediaStream.getTracks()[0].stop();
mediaStream.getTracks()[1].stop();

2015年11月3日更新---- 10:34:24 AM

クロスブラウザstream.stopハックは次のとおりです。

var MediaStream = window.MediaStream;

if (typeof MediaStream === 'undefined' && typeof webkitMediaStream !== 'undefined') {
    MediaStream = webkitMediaStream;
}

/*global MediaStream:true */
if (typeof MediaStream !== 'undefined' && !('stop' in MediaStream.prototype)) {
    MediaStream.prototype.stop = function() {
        this.getTracks().forEach(function(track) {
            track.stop();
        });
    };
}
55
Muaz Khan

stream.stop()は使用しないでください。廃止されました

MediaStream非推奨

stream.getTracks().forEach(track => track.stop())を使用

34
sol404

異なるブラウザーでWebcam Videoを開始する

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

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

Opera 12の場合

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

Firefox Nightly 18.0の場合

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

Chrome 22の場合

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

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

9
Alain Saurat

FF、ChromeおよびOperaは、標準としてnavigator.mediaDevicesを介してgetUserMediaの公開を開始しました（変更される可能性があります:)

オンラインデモ

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 audio 
localStream.getVideoTracks()[0].stop();
8
Sasi Varunan

成功ハンドラでgetUserMediaに返されたストリームオブジェクトを使用して、ストリームを直接終了できます。例えば.

localMediaStream.stop()

video.src=""またはnullは、ビデオタグからソースを削除するだけです。ハードウェアをリリースしません。

7
Bhavin

以下の方法を試してください

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();
5
imal hasaranga perera

.stop()が非推奨の場合、@ MuazKhan doseのように再追加する必要はないと思います。これは、物事が非推奨になり、今後使用すべきではない理由の理由です。代わりにヘルパー関数を作成してください...これは、es6バージョンです

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

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

//ビデオのsrcObjectにnullを割り当てますvideoEl.srcObject = null;

3
Veshraj Joshi

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

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

3
mcy

すべてのトラックを停止する必要があります（Webカメラ、マイクから）：

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

これを確認してください： 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
Akshay Italiya

ストリームで.stop（）を使用すると、http経由で接続したときにchromeで機能します。 ssl（https）を使用すると機能しません。

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

正しい...だけでなく、httpsの何かを使用するときにも正しくありません。

0
theman whosoldtheworld

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

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
TechDo