Taking screenshot of jitsi meet conference using HTML2canvas

Question

After adding a button to my jitsi install (via this thread), I am now trying to use htlm2canvas to take a screenshot of the video conference.

However, when I run the function, it returns the video as black, even though its showing on display.

screenshot

(Feed on the left should show video but its black)

And as you can see, the icons are also all messed up.

Is there a fix around this? or an alternative?

Answer 1

This is because you might be trying to capture screenshot from outside code and jitsi is running video in iframe. Security features of browser does not allow to read iframe content. you need to implement custom logic in jitsi to handle your scenario.

Answer 2

I have looked around, found logic in ScreenshotCaptureEffect.js. It works now… You must have in focus video which you want to screenshot, or you can change script to send all video streams.

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