navigator.mediaDevices.getUserMediaで立ち上げるカメラを指定する際のポイント 🎥

f:id:kimizuka:20201102125631p:plain

すべての constraint が数字とは限りません。例えば、次の例はリアカメラよりもフロントカメラを (利用できるなら) を選好します。

{ audio: true, video: { facingMode: "user" } }

リアカメラが必要であれば、次のようにします。

{ audio: true, video: { facingMode: { exact: "environment" } }

https://developer.mozilla.org/ja/docs/Web/API/MediaDevices/getUserMedia より引用

developer.mozilla.org

という記述があります。

ただ、スマホユーザーのことを考えてリアカメラを指定すると、フロントカメラしか無い環境（例えばMacBookなど）でエラーになってしまいます。

なので、

navigator.mediaDevices.getUserMedia({
  video: {
    facingMode : {
      exact : 'environment' // リアカメラを指定
    }
  }, audio: false
}).then(handleSuccess).catch(() => {
  // リアカメラが無い際もエラーになる
  navigator.mediaDevices.getUserMedia({
    video: true,
    audio: false
  }).then(handleSuccess).catch((err) => {
    handleError(err);
  });
});

function handleSuccess() {
  // カメラ起動後の処理を書く
}

function handleError(err) {
  console.err(err);
}