Как сделать скриншот веб-страницы с видео через JavaScript

Оффтоп javascript
1

Проблема со скриншотами страниц с видео

Привет всем! У меня есть веб-страница где есть обычные HTML элементы и видеоплеер. Мне нужно сделать скриншот всей страницы целиком используя только JavaScript или jQuery.

Пробовал разные способы но столкнулся с проблемами. HTML2Canvas хорошо работает с обычными элементами но видео не захватывает совсем. Для видео нашел отдельное решение через canvas:

function captureVideoFrame() {
  var canvasElement = document.createElement('canvas');
  var ctx = canvasElement.getContext('2d');
  var videoWidth = $('#player').width();
  var videoHeight = $('#player').height();
  canvasElement.width = videoWidth;
  canvasElement.height = videoHeight;
  var playerElement = document.getElementById('player');
  ctx.drawImage(playerElement, 0, 0, videoWidth, videoHeight);
  var imageData = canvasElement.toDataURL();
  
  var img = new Image();
  img.src = imageData;
  
  $('body').append(img);
}

Этот код делает снимок только видео отдельно. Но мне нужно захватить всю страницу вместе с видео за один раз. Можно ли это сделать без использования серверных технологий? Какие есть варианты решения этой задачи?

2

html2canvas не видит видео — оно рендерится отдельно от DOM. Лучший способ: делай два снимка и комбинируй их. Сначала скриншот страницы через html2canvas с allowTaint: true, потом отдельно захватывай видео через canvas (как в твоём коде) и накладывай кадр поверх основного скриншота в нужных координатах. Немного геморройно, зато работает стабильно.

3

У меня была такая же проблема! Видео использует аппаратное ускорение и обходит обычный DOM рендеринг. Вот что сработало у меня: берешь Intersection Observer API, определяешь позицию видео на странице, создаешь canvas размером со всю страницу. Сначала рендеришь обычные элементы через html2canvas, потом накладываешь кадр видео в нужное место через drawImage. Главное - правильно рассчитать координаты и масштаб. У меня получилось хорошо, правда позиционирование пришлось повозиться настроить.

4

Попробуй puppeteer-core для браузера. Она делает полные скриншоты с видео, работает прямо на уровне движка. Да, библиотека тяжелая, но если нужно качественно захватывать сложный контент - отличный вариант.