html2canvas - 使用 HTML2canvas 截取 jitsi meet 会议截图

Question

在我的 jitsi 安装中添加一个按钮后（通过这个线程），我现在正在尝试使用 htlm2canvas 来截取视频会议的屏幕截图。

但是，当我运行该函数时，它会将视频返回为黑色，即使它正在显示。

截屏

（左侧的 Feed 应显示视频，但显示为黑色）

正如你所看到的，图标也都乱七八糟了。

有没有解决这个问题？或替代方案？

Answer 1

这是因为您可能正在尝试从外部代码捕获屏幕截图，而 jitsi 正在 iframe 中运行视频。浏览器的安全功能不允许读取 iframe 内容。您需要在 jitsi 中实现自定义逻辑来处理您的场景。

Answer 2

我环顾四周，在 ScreenshotCaptureEffect.js 中找到了逻辑。它现在可以工作了……您必须拥有要截屏的焦点视频，或者您可以更改脚本以发送所有视频流。

const storedCanvas = document.createElement('canvas');
const storedCanvasContext = storedCanvas.getContext('2d');

var vids = $('video#largeVideo');
vids[0].play();

storedCanvas.height = parseInt(vids[0].videoHeight, 10);
storedCanvas.width = parseInt(vids[0].videoWidth, 10);
storedCanvasContext.drawImage(vids[0], 0, 0, vids[0].videoWidth, vids[0].videoHeight);

storedCanvas.toBlob(
    blob => {
        console.debug(blob);

        var data = new FormData();
        data.append('file', blob);

        $.ajax({
            url: S3_API_URL,
            cache: false,
            contentType: false,
            processData: false,
            method: 'POST',
            data: data
        });
    },
    'png',
    1.0,
);