如何截取包含视频和 canvas 的 div？

Question

注意：这不是重复的，因为我没有发现任何与视频截图和 canvas 组合相关的问题，我尝试了 html2canvas

我们有一个 div，它内部包含视频元素和 canvas。视频用于流式传输，canvas 用于在该视频上绘制任何内容。现在，如果我截取 div 的屏幕截图，它必须包含视频帧和绘图。我没有找到任何方法来得到这个。我尝试了 html2canvas，但它只提供了 canvas 的屏幕截图。下面是代码。

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，我想我会得到视频和 canvas 的组合截图，因为 canvas 在视频之上并且两者都是 remoteScreen 的一部分 div.但我只得到了 canvas 的截图。任何人都可以让我知道是否有任何方法可以获取视频 + canvas 组合的屏幕截图，或者我可以将任何其他配置参数传递给 html2canvas 以获取视频 + [=37= 的屏幕截图]合并？

Answer 1

html2canvas 无法重现视频截图。它通过读取页面的 HTML 元素并根据 CSS 样式信息呈现它们的图片来生成图像。它实际上并没有截图。

如何截取包含视频和 canvas 的 div？

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

javascript

html5-video

html5-canvas

html2canvas