如何截取包含视频和画布的 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 样式信息呈现它们的图片来生成图像。它实际上并没有截屏。