Снимок экрана с использованием Javascript, включая тег видео

Question

У меня есть веб-страница с элементами HTML и тегом видео.Я хочу сделать снимок экрана с использованием только javascript / jquery / сторонних плагинов.

Я пробовал HTML2Canvas , который работает для элемента html.Он не захватывает видео тег.

Я пробовал код холста для захвата видео тега, используя этот код:

function drawImage() {
  var canvas = document.createElement('canvas');
  var context = canvas.getContext('2d');
  var width = $('#video').outerWidth();
  var height = $('#video').outerHeight();
  canvas.width = width;  canvas.height = height;
  var elemVideo = document.getElementById('video');
  context.drawImage(elemVideo, 0, 0, width, height);
  var dataURL = canvas.toDataURL();

  var image = new Image();
  image.src = dataURL;

  $('body').append(image); 
}

Этот код делает снимок экрана видео.

Можно ли сделать снимок экрана на весь экран без использования какого-либо бэкэнда?

Answer 1

Вот что вы можете попробовать.

Создайте скрытый элемент рендеринга (например, зеркальный DOM) - это похоже на то, что делают многие игровые библиотеки HTML5.

Элемент рендеринга скрыт. Продублируйте содержимое страницы в элемент рендеринга.

Затем используйте ваш код для рендеринга видео и замените тег видео своим видеоизображением в элементе рендеринга. Затем используйте HTLM2Canvas только для этого элемента рендеринга, поскольку HTML2Canvas позволяет снимать скриншот только с части страницы.