使用 HTML2canvas 截取 jitsi meet 会议的截图

Question

在我的 jitsi 安装中添加了一个按钮后 (via this thread)，我现在正在尝试使用 htlm2canvas 来截取视频会议的屏幕截图。

但是，当我运行函数时，它 returns 视频为黑色，即使它在显示器上显示也是如此。

screenshot

（左侧的提要应该显示视频，但它是黑色的）

而且如你所见，图标也都乱七八糟了。

有解决办法吗？或替代方案？

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,
);

使用 HTML2canvas 截取 jitsi meet 会议的截图

Taking screenshot of jitsi meet conference using HTML2canvas

html2canvas

jitsi

jitsi-meet