javascriptでカメラの解像度を取得するとOSやブラウザで振る舞いが異なる

javascriptでカメラの解像度を取得する際、OSやブラウザによって振る舞いが異なるため、色々とはまったのでメモ。

まず、カメラの解像度を取得するコードは以下の通り

  let stream = await navigator.mediaDevices
    .getUserMedia({
      video: {
        facingMode: currentFacingMode
      },
      audio: false
    });

  // Get the video track of the camera stream
  const track = stream.getVideoTracks()[0];

  // Get the current settings of the video track
  const settings = track.getSettings();

  // Camera resolution
  let video_width = settings.width;
  let video_height = settings.height;

ここでvideo_widthが幅のピクセル数、video_heightが高さのピクセル数になります。

やっかいなのは、OSやブラウザによって、デバイスの自動回転をONにした状態で、スマホを横向きにした時にwidthとheightが入れ替わるケースとそうでないケースがあることです。 デバイスの回転に関係なく一定のケースでは、デバイスの向きによらず、width > heightでした。一方デバイスの回転が反映されるケースでは、スマホを縦に持った時はheight > width、横にした時はwidth > heightです。

僕がテストした範囲ではこんな感じです。

• Android 15
  • Chrome: 可変
  • Firefox: 一定
    • ただしデバイスを横向きにすると、streamの向きが90度回転するというバグ。
  • Edge: 可変
• iOS 16
  • Safari: 一定
  • Chrome: 一定
  • Firefox: 一定
  • Edge: 一定

結局、navigator.userAgentなどを使用して、OSやブラウザを特定して場合分けすることで対応しました。