JavaScriptでnavigator.getUserMediaは非推奨なので対応する

概要

JavaScriptからカメラやマイクなどの情報を取得することができます。

しかし、現在ネットにある情報は古いやり方のものが多く、そのやり方でカメラやマイクなどの情報を取得するのは非推奨となっています。

なので、ここでは古いやり方にも対応した新しいカメラやマイクなどの情報を取得する方法を紹介します。

古い方法

具体的にどのような方法が古い方法なのかというと、navigator.getUserMedia()のようにして情報を取得する方法が古い方法です。

この方法は既に非推奨となっており、正しく動作しない可能性があります。もし動作したとしても、いつ使えなくなってもおかしくありません。

そこで、これから紹介する新しいAPIを使って情報を取得するのですが、古いAPIにしか対応していないブラウザもあるため、そのまま使えばいいかというとそうではありません(古いブラウザを切り捨てるのであれば関係ないですが)。

新しい方法

これから紹介する方法では、それぞれのAPIがあるかどうかを確認して新しいAPIが使えるなら新しいAPIを、古いAPIしか使えないなら古いAPIを使えるようにします。

新しい方法では、navigator.mediaDevicesというAPIを使って情報を取得するので、次のようになります。

var mediaDevices = navigator.mediaDevices || ((navigator.mozGetUserMedia || navigator.webkitGetUserMedia || navigator.msGetUserMedia) ? {
    getUserMedia(c) {
        return new Promise(((y, n) => {
            (navigator.mozGetUserMedia || navigator.webkitGetUserMedia).call(navigator, c, y, n);
        }));
    }
} : null);

実際に情報をカメラやマイクなどの情報を取得するには、次のようにします。

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

    }
);

これで、新しいAPIと古いAPIの両方に対応できました。

まとめ

これらの情報は、Mozilla Developer Networkに書かれていました。

このようなことから、これからは定期的に確認して古い情報を元に書いていないかを確認して置く必要があるということが分かります。