I'm trying to get image from phone camera to canvas to save it later.

My problem is when i use iPhone 13 Pro then the image on canvas is brighter than it should be. This happens only when i draw image on iPhone 13 Pro, other ios and android phones do not have this problem.

This is how i pass video stream to canvas

  let video = document.createElement('video');
  let canvas = document.getElementById('canvas');
  let ctx = container.getContext('2d');

  navigator.mediaDevices.getUserMedia({
    audio: false,
    video: {
      width: 1920,
      height: 1020,
      facingMode: 'environment'
    }}).then(stream => {
      window.stream = stream;
      video.srcObject = stream;
      const track = stream.getVideoTracks()[0];

      video.setAttribute('playsinline', 'true');

      video.play();

      requestAnimationFrame(() => {
       
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
      });
  })

The image in <video> element stays at normal brightness (iPhone 13 pro)

Image from iphone 13 pro

Image from android phone

CodePudding user response：

It was problem with width: 1920, height: 1020, params in getUserMedia. I deleted it and it works fine now.