2031728 - Blank canvas when calling ctx.drawImage() on a video element, whereas Firefox on iOS and desktop, and Chrome on all platforms produces the snapshot correctly

Status: RESOLVED DUPLICATE of bug 1526207

(Core :: Graphics, defect)

Description

[Sheldon]

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:149.0) Gecko/20100101 Firefox/149.0

Steps to reproduce:

const debugDownloadSnapshot = (url: string) => {
      const link = document.createElement('a');
      link.download = 'filename.png';
      link.href = url;
      link.click();
};
 
if (playerRef.current) {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');

      const cropX = playerRef.current.videoWidth * CROP_X;
      const cropY = playerRef.current.videoHeight * CROP_Y;

      const cropWidth = playerRef.current.videoWidth * CROP_WIDTH;
      const cropHeight = playerRef.current.videoHeight * CROP_HEIGHT;

      canvas.width = cropWidth;
      canvas.height = cropHeight;

      ctx?.drawImage(
        playerRef.current,
        cropX,
        cropY,
        cropWidth,
        cropHeight,
        0,
        0,
        cropWidth,
        cropHeight,
      );

      const url = canvas.toDataURL('image/png');
      if (debug) {
        debugDownloadSnapshot(url);
      }
      return url;
    }
  };

Actual results:

Work on all platforms, with the latest Firefox, Chrome and Edge, on iOS, Android and desktop (Windows and Linux) except for Firefox Mobile on Android. When debugging, downloading the snapshot image, the file is blank, no data.

Expected results:

When debugging, downloading the image, should show a cropped image.