Несколько миниатюр от видео на стороне клиента (Pure JS) ⇐ Html

[Anonymous]

Я пытаюсь генерировать несколько миниатюр с видео, загруженного на стороне клиента, с помощью url.createObjecturl. В моем коде правильно генерируется холст для каждой миниатюры, но я не могу помещать изображения на холст . Может ли кто-нибудь показать мне правильное решение?

Код: Выделить всё

const fileInput = document.querySelector('#input-video-file');
const video = document.getElementById('video');

fileInput.addEventListener('change', (e) => {
video.src = URL.createObjectURL(e.target.files[0]);
video.onloadedmetadata = function() {
const duration = video.duration;
const sample_duration = duration / 10;
for (var i = 1; i < duration; i += sample_duration) {
console.log(gen_thumb(i));
}
};
});

async function gen_thumb(thumb_time) {
video.currentTime = thumb_time;
const canvas = document.createElement("canvas");
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
canvas.id = video.currentTime;
canvas.getContext('2d').drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
document.body.appendChild(canvas);
return;
}< /code>

Подробнее здесь: https://stackoverflow.com/questions/796 ... de-pure-js