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


回答:


199

編集

この回答はもともと投稿されていたため、ブラウザ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はそれを好まないようです)


2
私が思うにstream.stop()、クロムのためのdoen't作業が、mediaRecorder.stop()それはブラウザが提供するストリームを停止しないのに対し、録音を停止します。このstackoverflow.com/questions/34715357/…をご覧ください
Muthu

@Muntu、私はそれが依存していると思います、私にとってstream.stop()は(クロムで)動作しています 私はwebRTCストリームを持っているからです。ブラウザで録音している場合、mediaRecorder.stop()は機能しますか?
Johan Hoeksma

はい、しかし、これは別の問題を引き起こします。記録を停止するこの機能は、数秒/分の記録を許可した後に実行する必要があります。これをどのように制御できますか?デフォルトの記録時間後に停止するには?ありがとうございました!
エマヌエラコルタ

1
これはストリームを停止しますが、クロムのビデオインジケータはリロードされるまでアクティブのままです。それも削除する方法はありますか?
Cyber​​supernova

@Cyber​​supernovaこれの解決策を見つけましたか?ページの更新はうまくいくと思います
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は廃止される予定です。
Dan Brown、

@DanBrownあなたの解決策は何ですか?
Webwoman

ネイティブAPIのプロトタイプを変更して、正式に非推奨になり、ブラウザーから削除された機能を復元することはお勧めしません。それは不規則で、後で混乱を引き起こす可能性があります。ストリーム内のすべてのトラックを停止する必要がある場合は、なぜ停止しないのstream.getTracks().forEach(track => { track.stop() })ですか?または、省略形を正当化するのに十分な頻度で実際にこれを行っている場合は、のようなヘルパー関数をいつでも定義できますstopAllTracks(stream)
カラム


10

FF、Chrome、Operaは標準でgetUserMediaviaの公開を開始しました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

異なるブラウザーでのWebカメラビデオの開始

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

異なるブラウザーでのWebカメラビデオの停止

Opera 12の場合

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

Firefox Nightly 18.0の場合

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

Chrome 22の場合

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

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


10
これにより、<video>タグ内のビデオの表示が停止するだけで、カメラは停止しません。
G.Führ、2015

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

上記の解決策は私にとってはうまくいきませんでした。これで終わりました。
スコットマス2014年

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
fregante

3

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

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


2

すべてのトラックを停止する必要があります(ウェブカメラ、マイクから):

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

0

ストリームで.stop()を使用すると、http経由で接続したときにchromeで機能します。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

Webカメラの開始と停止、(2020 React es6を更新)

Webカメラを起動

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

一般にWebカメラまたはビデオの再生を停止する

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

Webカメラの停止機能は、ビデオストリームでも機能します。

  this.video.src = this.state.videoToTest;
  this.video.play();

-1

ストリームフォームsuccessHandleの参照がある

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 2016

@DanDascalescuのロングショットではありません。この例では、彼がマップ機能を呼び出す能力をはっきりと示しています。
charliebeckwith
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.