How to take screenshot of a div which contains video and canvas?

Question

NOTE: This is not duplicate as I didn't find any question related to take screenshot of video and canvas combined and I tried html2canvas

We have a div which internally contains video element and canvas. Video is for streaming and canvas is to draw any thing on that video. Now if I take a screenshot of div, it has to contain the video frame and the drawing. I didn't find any way to get this. I tried html2canvas but it is giving the screenshot of only canvas. Below is code.

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);
  });

By using html2canvas, I thought I will get combined screenshot of video and canvas as canvas is on top of video and both are part of remoteScreen div. But I got screenshot of canvas only. Can any one please let me know is there any way to get the screenshot of video + canvas combined or can I pass any additional configuration parameters to html2canvas to get the screenshot of video + canvas combined?

Answer 1

html2canvas cannot reproduce a video screenshot. It generates an image by reading a page's HTML elements and rendering a picture of them according to the CSS styling information. It doesn't actually take a screenshot.