HTML5で背面カメラを取得する

HTML5が世に出て久しく立ちますがあまりカメラを使ったサービスって見ないですね。
ピントが合わせることが出来なかったり対応してるブラウザが少ないのが原因だと思いますが。。。

「HTML5　カメラ」とかで検索するとgetUserMediaを使ってカメラ映像を取得しよう！みたいな記事が多いんですが、スマホなどで2つ以上カメラがある場合どちらか一方（ほとんどが内側カメラ）しか取得出来ないんですね。

なので背面カメラを取得したいと思います。

MediaStreamTrack

端末にあるカメラとかマイクの一覧を取得するAPIとしてMediaStreamTrackというものがあります。
MediaStreamTrack.getSourcesというAPIを使用するとカメラやマイクのIDを取得することが出来ます。

MediaStreamTrack.getSources(function(data)
{
  console.log(data);
});

という感じで呼び出すと、対応したブラウザでかつカメラやマイクがあるならコンソールに以下の様な感じで吐き出されます。

0: SourceInfo
  facing: ""
  id: "bf9f10e6cf64b14a4c5b544ccda64932e9565706316e78c2f97864ed2fd0338a"
  kind: "audio"
  label: ""
1: SourceInfo
  facing: ""
  id: "b65d00ea51cf8ea7cd33c31fc0dfc7e08ae7ee6b89b55b21d9454bf43efc16b7"
  kind: "audio"
  label: ""
2: SourceInfo
  facing: ""
  id: "3d75291cbeaffcdd1907f3fb9ec933c1846991f74795f02ad7ac72201b06f186"
  kind: "video"
  label: ""

これはMacbookAirでやった場合です。
このidがマイクやカメラへアクセスするときに必要になります。

背面カメラを取得する

getUserMediaで{video:true}みたいな感じでカメラを取得すると端末のデフォルト？のカメラが勝手に取得されますが、先ほど取得したIDを変数などに保持しといて以下のようにすると、対象のカメラを取得できます

navigator.getUserMedia({
  video: {
    optional: [{sourceId: VIDEO_SOURCE_ID}]
  }
});

VIDEO_SOURCE_IDの部分を変更してください。
マイクも一緒に取りたい場合は以下のようにしてください。

audio: {
 optional: [{sourceId: AUDIO_SOURCE_ID}]
},
video: {
  optional: [{sourceId: VIDEO_SOURCE_ID}]
}

デモ

Androidの最新版Chromeなどで見てください。Android標準ブラウザは対応していません。
iPhoneはどのバージョンでも対応してません。
HTML5で背面カメラを取得する - 遊び場

参考

ここに書いてあることのほとんどはここを参考にしました。というかほぼ一緒です。
simpl/getusermedia/sources/js/main.js at master · samdutton/simpl · GitHub

日本語の文章が少ないので増えて欲しいところですねー