如何截取包含视频和画布的 div 的屏幕截图？

Question

注意：这不是重复的，因为我没有发现任何与截取视频和画布相结合的问题，我尝试了 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，我想我会得到视频和画布的组合屏幕截图，因为画布位于视频之上，并且两者都是 remoteScreen div 的一部分。但我只得到了画布的截图。谁能告诉我有没有办法让视频+画布的截图结合起来，或者我可以将任何额外的配置参数传递给html2canvas来获得视频+画布的截图？

Answer 1

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