web-dev-qa-db-ja.com

ページを更新せずにgetUserMediaのWebカメラストリーミングを停止する

JavaScript関数を使用してWebカメラを閉じようとしています（Ajax応答を受け取った後で閉じる必要があります）が、ページを更新しないと閉じることができないようです。それを閉じるためのすべてのメソッドは、video.src = null、video.pause ...など、どのブラウザでも機能しません。ユニークな方法は、成功関数のパラメーターとして渡されたストリームを閉じることです。そのため、関数成功の外部でこのオブジェクトを使用してWebカメラを閉じる方法はありますか？

私はこの質問が以前に行われたことを知っています（ getUserMediaとRTCPeerConnectionを使用してWebカメラを停止/閉じるChrome 25 ））私のニーズは異なるため、いくつかの助けが必要ですこの問題を解決するために

ありがとう！

編集：ウェブカメラを閉じようとしている私の作業コード：

navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia ||  navigator.webkitGetUserMedia || navigator.msGetUserMedia;
if(navigator.getUserMedia){
  var video_constraints = {
    mandatory: {
       maxHeight: 480,
       maxWidth: 640 
    },
    optional: []
  };
  var self = this;
  self.navigator.getUserMedia({
      audio: false,
      video: video_constraints
  }, self.onSuccess, onError);
}
else{
  alert('An error has occurred starting the webcam stream, please revise the instructions to fix the problem');
}

function onSuccess(stream) {
  var video = document.getElementById('webcam');

  if(navigator.webkitGetUserMedia || navigator.mozGetUserMedia){
      video.src = window.URL.createObjectURL(stream);
  }
  else if(navigator.msGetUserMedia){
      //future implementation over internet Explorer
  }
  else{
      video.src = stream;
  }
  self.localStream = stream;
  video.play();
}
function onError() {
  alert('There has been a problem retrieving the streams - did you allow access?');
}

function closeWebcamConnection(){
  this.localStream.stop();
}

uff ..ここにコードXDを投稿するのは本当に複雑です

javascriptwebrtcgetusermedia
15
user2158954

stop()メソッドを実行して、LocalMediaStreamオブジェクトを停止する必要があります。同様の問題がありました。あなたがする必要があるのは：

getUserMedia()実行のonSuccessコールバック関数でLocalMediaStreamへの参照を保持します。

var localStream;

onUserMediaSuccess = function(stream) {
   // attach to a video element
   ...
   // keep a reference
   localStream = stream;
};

必要に応じてLocalMediaStreamを停止します。

localStream.stop();

私自身の詳細情報 question （および answer ）。

29
asgoth

Asgothが示唆するようにLocalMediaStreamへの参照を保存することは正しいですが、私にとってはChrome 47. localStream.stop();でエラーが発生しました：

Uncaught TypeError: localStream.stop is not a function

私はそれを呼び出すことで動作させました：

localStream.getVideoTracks()[0].stop();
46
Jay P.

asgoth's answer への追加

localStream.stop（）はChrome 45で廃止予定、Chrome 47で削除

複数の場所から.stop（）を呼び出す場合は、stop関数の次のヘルパーを使用して、ロジックを1つの場所に保持できます。

var localStream;

onUserMediaSuccess = function(stream) {

  // re-add the stop function
  if(!stream.stop && stream.getTracks) {
    stream.stop = function(){         
      this.getTracks().forEach(function (track) {
         track.stop();
      });
    };
  }

  // attach to a video element
  ...
  // keep a reference
  localStream = stream;
};
9
Peter Mols

Chrome 49）でビデオストリームトラック（前面カメラ）を閉じて別のトラック（背面カメラ）を開くときに問題が発生しました。MediaStream.stop()がバージョン45以降廃止され、MediaStreamTrack.stop()に置き換えられました。詳細については、Sam DuttonがGoogleの開発者サイトで posting を参照してください。

1
Steve

これはChromeのバグのある領域のようで、動作は常に変化しています。これは、http（httpsではない）で接続している場合にのみ機能するようです。

var myStream;
function successCallback( stream ) {
    ...
    myStream = stream; // used to close the stream later
}

function closeStream(){
   myStream.stop(); 
   myStream = null;
}

不思議な理由で、これはSSL（https）では機能しません（Chrome、Ver 27 Devで確認））

1
ACEGL

ブラウザのタブにある赤い記号を取り除き、両方を無効にするために、これらのエラーの1つを受け取ったときにvideoおよびaudioストリーム

Uncaught TypeError: localStream.stop is not a function
Uncaught TypeError: _webRTCStream.stop is not a function // TokBox, OpenTok

見つかったトラックを繰り返し処理して、すべてを停止します。

if (_webRTCStream.stop) {
  _webRTCStream.stop() // idk what this does, left here for legacy reasons..?
} else {
  _webRTCStream.getTracks().forEach(function(track) { track.stop() })
}

注：_webRTCStreamはlocalStreamと同じです。使用しているライブラリによって異なります。

0
Qwerty