Taking screenshot of conference using HTML2canvas

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.


(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?

I am trying the same thing. Still no luck :slight_smile:

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

            dispatch(stopSound(SCREENSHOT_SOUND_ID));
            dispatch(playSound(SCREENSHOT_SOUND_ID));


            $('.flash')
                .show()
                .animate({ opacity: 0.5 }, 150)
                .fadeOut(150)
                .css({ 'opacity': 1 });

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

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