[JS] VideoCapture().read() in iPhone 13 Pro (only this phone) returns saturated image

,
1

Hi! I’ve been developing a browser-based app that opens the camera in a mobile phone and processes the images using OpenCV. Currently, I’m facing a particular problem with a specific phone, which leads me to think that the problem is device-related, the iPhone 13 Pro. It only occurs with this phone, but not with the standard iPhone 13 nor the iPhone 13 mini or other iPhone model. It happened in Safari and Google Chrome.

The web app opens the media devices like this:

let constraints = {
    audio: false,
    video: {
	    facingMode: 'environment',
	    width: { exact: 1920},
	    height: { exact: 1080},
        aspectRatio: { exact: ratio },
	}
};

try {
	let stream = await navigator.mediaDevices.getUserMedia(constraints);
	handleSuccess(stream);
} catch (e) {
	handleError(e);
}

Then I load the video onto a new cv.VideoCapture():

export const loadVideo = (self) => new Promise((resolve, reject) => {
    self.video.addEventListener("canplay", function (ev) {
        if (!self.streaming) {
            self.video.setAttribute("width", self.width);
            self.video.setAttribute("height", self.height);
            self.streaming = true;
            self.vc = new cv.VideoCapture(self.video);
            resolve(true);
        }
        resolve(false);
    }, false);
});

this.width = window.innerWidth;
this.height = window.innerHeight;
this.stream = stream;

const self = this;
await loadVideo(self);

THE PROBLEM

As you can see in this video, the video is completely over saturated until I change the app, and then it gets back to normal. Any idea or hint on what to fix this is more than appreciated.

Thank you!