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かな。と、思っていたら何か違和感が…。
ブラウザの赤いマークが消えてない...。
何故???と思い、pauseで停止させてみたり、
var v = document.getElementById("videoid");
v.pause();
開発者ツールでvideoタグを全て削除してみたり、
色々やってみましたが、消えませんでした。
しばらく放置していたのですが、答えは簡単なことでした。
自分自身のメディアを停止させていませんでした...。
上記の方法で自分自身のメディアを停止させたところ、無事に赤いマークが消えてくれました。
同じ状況で悩んでいる方がいらっしゃいましたら、参考にしてみてください。