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

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

我们有一个div，它内部包含视频元素和画布。视频用于流媒体，画布用于在视频上绘制任何东西。现在，如果我拍摄div的屏幕截图，它必须包含视频帧和绘图。我没有找到任何办法得到这个。我尝试了html2canvas，但它只提供了画布的屏幕截图。下面是代码

HTML:

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

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

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

canvas {
  position: absolute;
  background: transparent;
}

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

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

JS:

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

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

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

canvas {
  position: absolute;
  background: transparent;
}

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以组合视频+画布的截图吗？

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

谢谢seanpue。我用画布拍摄了视频截图，并在画布上混合了其他画布细节并拍摄了截图。很酷的解决方案，@kadina！