Kozack
@Kozack
Thinking about a11y

Как получить кадр из видео в виде картинки в WebWorker?

Есть видео, представлено ссылкой на 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, чего в воркере нету.
  • Вопрос задан
  • 172 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы