Почему Canvas дает пустое изображение в Chrome?

Question

[swaro]

Я хочу получить первый кадр видеоролика, для того, чтобы этот самый кадр был его превью. Важно: кадр должен быть именно изображением, поэтому использую Canvas. Проблема в том, что Canvas на toDataURL() генерирует пустое, прозрачное изображение, и я не знаю, что с этим делать. Что важно: в Firefox такой проблемы не наблюдается. Что мне нужно сделать, чтобы Canvas начал нормально генерировать картинки в Хроме?
Код генерации:

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

video.src = URL.createObjectURL(file); // переменная file здесь это объект класса 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();
});

В хроме тем временем происходит это:

Comments

[twobomb]

Добавь элемент video на страницу, можешь потом удалить. Ну и в loadeddata или добавь setTimeout где нибудь на 100мс по истечении которого рисуй или типа такого мож

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

document.body.appendChild(video);


video.src = URL.createObjectURL(file); // переменная file здесь это объект класса File
video.addEventListener("loadeddata", () =>{	
  canvas.height = video.videoHeight;
  canvas.width = video.videoWidth;
  video.addEventListener("seeked", () =>{	
    let canvas_context = canvas.getContext("2d");
    canvas_context.drawImage(video, 0, 0);
  	img.src = canvas.toDataURL();
  });
	video.currentTime = 0;
});

[swaro]

twobomb, к сожалению, тоже не помогло

[twobomb]

swaro, а сам видос отображается? в теге video

[swaro]

twobomb, да

[twobomb]

swaro, не знаю у меня всё работает