I want to get the first frame of the video so that this same frame will be its preview. Important: the frame must be exactly an image so I use Canvas. The problem is that Canvas on toDataURL() generates a blank transparent image and I don't know what to do about it. What's important: I don't see this problem in Firefox. What do I need to do to get Canvas to start generating pictures normally in Chrome? Generation code:

let canvas = document.createElement("canvas");
let video = document.createElement("video");

video.src = URL.createObjectURL(file); // file = instance of 'File'
video.addEventListener("loadeddata", () =>
{
  canvas.height = video.videoHeight;
  canvas.width = video.videoWidth;
    
  let canvas_context = canvas.getContext("2d");
  canvas_context.drawImage(video, 0, 0);

  img.src = canvas.toDataURL(); // It doesn't really matter where the result of toDataURL() is assigned, what matters is that it gives an empty image
});

I also noticed that:

• toBlob() with URL.createObjectURL() gives exactly the same result
• When you pass the string "image/jpeg" to toDataURL(), the image will be filled with black