Как сделать скриншот Div, который содержит видео и холст? - PullRequest
Новая
       34

Как сделать скриншот Div, который содержит видео и холст?

0 голосов
/ 29 апреля 2020

ПРИМЕЧАНИЕ. Это не является дубликатом, так как я не нашел ни одного вопроса, связанного с созданием скриншота видео и холста вместе, и я попытался html2canvas

У нас есть div, который внутренне содержит видео элемент и холст. Видео предназначено для потоковой передачи, а холст - это рисовать что-либо на этом видео. Теперь, если я сделаю снимок экрана с div, он должен содержать видеокадр и рисунок. Я не нашел способа получить это. Я попытался html2canvas, но он дает скриншот только холст. Ниже приведен код.

HTML: 

<div id="remoteScreen">
    <video id="remoteVideo" autoplay></video>
    <canvas id="remoteCanvas"></canvas>
</div>

<button id="captureButton">Capture</button>

CSS: 

video {
  max-width: 100%;
  width: 320px;
}

canvas {
  position: absolute;
  background: transparent;
}

JS: 

const captureBtn = document.querySelector("#captureButton");
captureBtn.addEventListener('click', captureCanvasVideoShot);

function captureCanvasVideoShot() {
  html2canvas(document.querySelector("#remoteScreen")).then(function(canvas) {
    document.body.appendChild(canvas);
  });

Используя html2canvas, я подумал, что получу комбинированный снимок экрана с видео и холстом, так как холст находится поверх видео, и оба являются частью div RemoteScreen. Но я получил только скриншот с холстом. Может кто-нибудь, пожалуйста, дайте мне знать, есть ли способ объединить скриншот видео + холст или я могу передать дополнительные параметры конфигурации html2canvas, чтобы получить скриншот видео + холст?

1 Ответ

1 голос
/ 29 апреля 2020

html2canvas не может воспроизвести скриншот видео. Он генерирует изображение, читая элементы HTML страницы и отображая их изображение в соответствии с информацией стиля CSS. Это на самом деле не снимать скриншот.

...