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

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