JavaScriptのgetUserMediaでカメラを止める

Programming
目次

概要

JavaScriptでは、getUserMediaというAPIを使うことでパソコンやスマホに付いているカメラを使うことができます。

私はパソコンのChromeから、これを使ってカメラから映像を取得するということをした後に、カメラを止めようと思ったのですが、カメラは止まっているのに、Chromeのタブには赤い丸が表示されて、まだカメラが生き残っているということがあり、それを解決するのに時間がかかりました。

そこで、カメラを完全に止める方法を紹介します。

原因

原因はふたつありました。

ひとつは、非推奨になっている書き方をしていたので、うまくカメラを止めることができなかったということです。

もうひとつは、getUserMediaで取得していたのはカメラの映像だけではなく、マイクの情報も使っていたのが原因でした。

なので、カメラは止めていたのに、マイクは止めていないのでChromeのタブに赤い丸が表示されていました。

解決方法

原因が分かったので、マイクを止めるようにJavaScriptに書きましょう。

止めるには、ストリームに対して処理をします。

videoStreamには、取得したカメラやマイクの情報が入っています。

古い書き方は次のもので、この書き方は今では非推奨のようです。

videoStream.stop();

なので、次のように書き換え、さらにgetAudioTracks()でマイクに関しても止めるようにしています。

videoStream.getVideoTracks().forEach((track) => {
    track.stop();
});
videoStream.getAudioTracks().forEach((track) => {
    track.stop();
});

これで、解決しました。

まとめ

原因の解決までにかなりの時間がかかってしまいました。

やはり、Mozilla Developer Networkなどの正確で最新の情報にアクセスするようにする必要があるということを感じました。