Есть видео, представлено ссылкой на mp4 файл. Я хочу получать кадры из видео по определённым тайм кодам (чтобы
показывать превью при наведении на таймлайн). Бэкэнда, который бы мог этим заниматься нету. Все видео грузятся со стороннего сервера.
В данный момент превью генерируется примерно так:
const video = document.createElement('video') // Создаём новый тег video
video.preload = 'metadata' // Заставляем браузер загружать метаданные
video.src = TARGET_SOURCE_URL // указываем ссылку на нужный источник
video.currentTime = TARGET_TIMECODE // перематываем видео на нужный кадр
const canvas = document.createElement('canvas') // создаём canvas для отрисовки кадра
const ctx = canvas.getContext('2d')
ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight) // рисуем загруженный кадр видео на canvas
canvas.toDataURL() // Получаем кадр в виде data URL
Проблема в том, что это всё происходит в основном потоке, а кадров для отрисовки много. И пользователи могут столкнуться с тем что приложение тормозит, пока все кадры не загрузятся.
Возможно ли как-то реализовать всё то же, но внутри WebWorker? Я знаю, что внутри воркера можно использовать OffscreenCanvas, но как загрузить кадр видео чтобы его отрисовать? В основном потоке для этого используется DOM API, чего в воркере нету.
