HTML5で背面カメラ（リアカメラ）を有効にする方法

HTML5で背面カメラを有効にするには

HTML5のgetUserMedia APIを使ってスマートフォンやタブレットの背面カメラ（リアカメラ）を利用する場合、まずデバイスが持つメディアソースの一覧を取得し、その中から目的のカメラを選択する必要があります。

ステップ1：メディアソースの一覧を取得する

最初に MediaStreamTrack.getSources() メソッドを呼び出して、接続されているオーディオ・ビデオ入力デバイスの情報を取得します。

MediaStreamTrack.getSources(gotSources);

コールバック関数には、各デバイスの種類やsourceIdなどの情報が渡されます。ここから背面カメラに該当するソースを特定しましょう。

ステップ2：選択したソースIDをgetUserMediaに渡す

次に、取得したソースの中から使用したいカメラを選び、そのsourceIdをoptional制約として getUserMedia() メソッドに渡します。この制約を指定することで、ユーザーは最大1つの映像入力デバイスに対して使用許可を設定できるようになります。

var a = {
    audio: {
        optional: [{sourceId: audioSource}]
    },
    video: {
        optional: [{sourceId: videoSource}]
    }
};
navigator.getUserMedia(a, successCallback, errorCallback);

補足ポイント

• successCallback には取得したストリームが渡されるため、video要素に結び付ければカメラ映像を表示できます。
• errorCallback では、ユーザーが許可を拒否した場合やデバイスが存在しない場合のエラー処理を実装しておくと安心です。
• getSources() は非標準のAPIのため、現在のブラウザでは navigator.mediaDevices.enumerateDevices() の利用が推奨されています。