IOS does not always update camera dimensions at restart

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build Process
• Unit Testing
• Internalization
• Friendly Errors
• Other (specify if possible)

p5.js version

1.6.0, 1.7.0

Web browser and version

Chrome, Safari, Firefox

Operating System

IOS

Steps to reproduce this

Steps:

1. Create sketch with a IOS device and setup camera with constrain -> facingMode: "user"
2. Play start in landscape orientation
3. Change device orientation to Portrait. (This issue only happens from Landscape to Portrait )
4. Restart webcam at windowResized()
5. Print or show camera dimension properties and you will see that is not updating camera dimensions. Android instead is updating dimensions properly.

Snippet:

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  console.log("windowResized width = " + width);
  console.log("windowResized height = " + height);

  if (true) { //test only for mobile device -> Android or IOS 
    console.log("Orientation changed -> Restart webcam mobile");
    setupCameraMobile();

    console.log("capture.width = " + capture.width);
    console.log("capture.height = " + capture.height);
  }
}

//----------------------------------------
function setupCameraMobile() {
  var constraints = {
    audio: false,
    video: {
      facingMode: {
        facingMode: "user",
      },
    },
  };
  capture = null;
  capture = createCapture(constraints);
  capture.hide();
}

function setup() {
  createCanvas(windowWidth, windowHeight);

  let density = displayDensity();
  pixelDensity(density);

  setupCameraMobile();
}

function draw() {
  background(220);

  push();

  imageMode(CENTER);
  rectMode(CENTER);
  textSize(40);

  fill("white");
  noStroke();
  image(capture, width * 0.5, height * 0.5, capture.width, capture.height);

  text(capture.width + " / "+capture.height,
    10,
    height * 0.5 + 50
  );
  
  pop();
}

Start with the supplied sketch, focusing on createCapture(), setupCameraMobile(), and windowResized() in the iOS landscape-to-portrait flow. Reproduce the restart in Safari or another listed iOS browser and inspect capture.width and capture.height before and after orientation changes. Done means restarting the webcam after this transition reports updated camera dimensions, as Android already does.