モリノラボ

WebRTCやWebSocketやHTTP/2などのWebモダンテクノロジーをピセ株式会社のエンジニアが情報公開していきます。

Chromeでカメラ・音声入力メディア使用中赤いマークが消えない

以下のようにローカルメディア情報を取得して、自分を表示、同じ方法で取得した情報をもらって相手を表示していました。

// WebKitベースやMozillaベースのブラウザでもnavigator.getUserMediaが使えるようにする

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

 

// カメラやマイクにアクセスしてMediaStreamを取得する

navigator.getUserMedia({ video: true, audio: true }, function (stream) {

         localStream = stream;

         var url = URL.createObjectURL(stream);

         // videoタグのsrc属性に、生成したurlを設定する

}, function (err) {

         // エラー処理

 

通話を切断したら、相手のMediaStreamを停止します。

// 相手のMediaStreamを停止する

stream.getVideoTracks()[0].stop();

stream.getAudioTracks()[0].stop();

 ちなみに、色々なサイトで以下のような停止方法を見かけますが、私が試した時はエラーで出て使用できませんでした。情報求ム!

stream.stop();

 

これでメディアの開始と停止はOKかな。と、思っていたら何か違和感が…。

ブラウザの赤いマークが消えてない...。

f:id:pise:20151228161338p:plain

何故???と思い、pauseで停止させてみたり、

var v = document.getElementById("videoid");

v.pause();

 

 

開発者ツールでvideoタグを全て削除してみたり、

色々やってみましたが、消えませんでした。

 

しばらく放置していたのですが、答えは簡単なことでした。

自分自身のメディアを停止させていませんでした...。

上記の方法で自分自身のメディアを停止させたところ、無事に赤いマークが消えてくれました。

 

同じ状況で悩んでいる方がいらっしゃいましたら、参考にしてみてください。