IOS does not always update camera dimensions at restart

[carlesgutierrez]

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
• [X] 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();
}

[welcome[bot]]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, please make sure to fill out the inputs in the issue forms. Thank you!

[carlesgutierrez]

Notice this happens only from Landscape to Portrait. In the other direction ( from Portrait to landscape) has a different behavior : properly update camera dimensions.

Pease take it under consideration. thanks

[limzykenneth]

From your description, it seems like this is an iOS specific bug and not necessarily an implementation bug in p5.js? If that is the case, this may be better open as an issue with Safari directly (if it has not already been done).