Strange video format behaviour


i am hosting jitsi on my own server and use the lib-jitsi-meet api for my own gui. In some scenarios the user has a preview video, that i create with “vanilla js”:

async function showPreview(){
     navigator.mediaDevices.getUserMedia({video: { aspectRatio: 16 / 9 }, audio: true })
        .then(async (mediaStream) => {
              let existingVideoElement = $('#sb-video')[0];
              existingVideoElement.srcObject = mediaStream;

If the preview video is alive and i join a jitsi room (create video & audio track) the video format/resolution is different than without preview video.

without video preview:

with video preview

the video width is reduced. Does anyone has a clue why this is happening and how i can prevent that, without destroying my preview video? Is this maybe a browser behaviour?

I can provide you the script that i am using for my test:

Thanks in advance!

Possibly you are hitting a issue that has plagued some Jitsi users since a recent update that formatted the screen to better show the person at the center of the screen, at the expense of cutting the margins. The previous behaviour has been made possible again (mostly), with the parameter disableTileEnlargement (can be passed in the URL or disabled at the config.js level)

I think, that the “tile enlargement” is a jitsi-meet UI thing and should not be involved when using lib-jitsi-meet like this.

Your showPreview() function passes a video constraint (aspectRatio: 16/9) to getUserMedia(). If you call that function then that constraint will be applied, if you don’t then it won’t.

If you’re not setting the same constraint when creating the video local track for the jitsi room, then this behaviour makes perfect sense: you’re requiring the video to be captured in 16/9 when showing the preview, and not when not showing the preview.

Hi jbg,

good news it is working. I already tried the same but my parameters were incorrect. In vanilla js u have to give the getUserMedia the constraints like this: { video: { aspectRatio: 16 / 9 }. In jitsi it is working only if you do it like this: { devices: ['video'], constraints: { video: { aspectRatio: 16 / 9 } } }. Thank you for your good advice :wink: