Elongated self video in zoom SDK version 2.9.7

Self video is coming in a distorted (elongated) format after updating @zoomus/websdk to 2.9.7. The distortion is only happening for the participant who is sharing their video, for other participants present in the meeting, video seems normal. I am sharing both screenshots of how a participant is seeing their own video and how other participants are seeing them.

Distorted Self video

Video seen by others

Hi @software4 ,

Thank you for your post and welcome to the forum! On which browser are you experiencing this issue? Also, are you seeing the issue when using the sample application?

Thanks,
Rehema

Hi Rehema,

We are using google chrome browser and devices are MacBook pro and MacBook Air. And I am not seeing the issue in the sample application.

Hi,

I think there has been a miscommunication. So we have made a separate repository for zoom sdk and it is not integrated to our existing project. I think we can consider our repo same as a sample application. And yes we are seeing the issue here as well.

Hi @software4 ,

Thank you for the information. To make sure I understand what’s going on clearly, you see the issue in a separately created repo that is identical to the sample application, but not in the actual cloned sample application. Is this correct? If so, this may be an issue with the passed-in dimensions used for your startVideo function, as I’m not experiencing the same problem when testing with the latest version of the SDK on Chrome. Could you share a screenshot of your start video functionality and the HTML tag where you render the video?

Thanks,
Rehema

Hi Rehema,

I could not find any startVideo function in the repository. If this, GitHub - zoom/zoomapps-sample-js: A Hello World Zoom App built with Vanilla JS, is the sample application you are referring to, I could not find startVideo function here as well. But we do have startMeeting function. I am sharing my code below.

function startMeeting() {
document.getElementById(‘zmmtg-root’).style.display = ‘block’;

setTimeout(() => {
  if (getBrowser() === 'safari') {
    console.log('with === ', document.getElementById('join-btn'));
    const warningDiv = document.createElement('div');
    warningDiv.innerHTML = 'Screenshare and Gallery View not available in Safari!';

    warningDiv.classList.add('warningDiv');
    // const warningDiv = (
    //   <div>
    //     <p>This is warning</p>
    //   </div>
    // );
    document.getElementById('join-btn').parentElement.appendChild(warningDiv);
  }
}, 1000);

ZoomMtg.init({
  leaveUrl,
  disableInvite: true,
  showMeetingHeader: false,
  meetingInfo: ['topic', 'host', 'dc'],
  success: (success) => {
    console.log(success);

    ZoomMtg.join({
      // helper: './helper.html',
      signature: videoCallDetails?.zoomSignatureKey,
      meetingNumber: videoCallDetails?.zoomMeetingNumber,
      userName: userDetails?.name,
      sdkKey,
      userEmail: userDetails?.email,
      passWord,
      tk: registrantToken,
      success: (s) => {
        console.log(s);
        setInMeeting(true);
      },
      error: (error) => {
        console.log('error = ', error);
      },
    });
  },
  error: (error) => {
    console.log(error);
  },
});
ZoomMtg.inMeetingServiceListener('onUserJoin', (data) => {
  console.log('inMeetingServiceListener onuserJoin ', data);
  setTimeout(() => {
    console.log(document.querySelector('[aria-label="Gallery View"]'));
    if (document.querySelector('[aria-label="Gallery View"]') !== null) {
      document.querySelector('[aria-label="Gallery View"]').click();
    }
  }, 2000);
});

}

Thanks,
Shrabanti

Hi,

I found one more repository, GitHub - zoom/meetingsdk-react-sample: Use the Zoom Meeting SDK in a React App. Is this the sample application you are referring to ? But I could not find any startVideo function here as well.

Regards,
Shrabanti

Hi @software4 ,

My apologies, I should have linked the sample application I was referring to. This is the application I tested with.

For clarification, though, are you working with the Meeting SDK or the Video SDK? I only ask because the code snippet you attached looks like functionality for the Meeting SDK.

Thanks,
Rehema

Hi Rehema,

Yes we are using Meeting SDK.

Thanks,
Shrabanti

Hi @software4 ,

Got it. The startVideo function I was referring to is in reference to the Video SDK, as I believed that’s what we were working with (the post was tagged for Video SDK). With that, are you experiencing the elongation issue when testing with the sample application you linked in your last reply?

Thanks,
Rehema

We are experiencing the same issue with elongated self video.

  • Meeting SDK version 2.10.1
  • Client view
  • latest version of Chrome
  • one person was on a MacBook Pro and the other was on a Windows laptop. Both parties experienced the same elongated video for themselves

After playing around with settings, we noticed that the video displayed correctly once we turned on the blur background. If we turned the blur background off, it elongated again.

Hi Rehema,

Actually we are using Meeting SDK in our platform. Can I change the tag to Meeting SDK ? or will I have to make a separate ticket ?

Thanks,
Shrabanti

Hi @software4,

I’ve changed the tag so it is now in the Meeting SDK category. I will continue to look into this issue and reach out when I have more information.

Thanks,
Rehema

Hi,

Thank you for changing the tag. Will be awaiting your response.

Regards,
Shrabanti

@software4 Did turning on the blur background cause the issue to go away for you?

Yes @GoodDev I just checked. It went away once I turned on the blur background.

Thank you.

@rehema.zoom does this help track down what the issue could be? It wouldn’t be feasible for us to tell hundreds of participants to blur their backgrounds to get their video to look right.

Hi @rehema.zoom,

Is there any update regarding the issue ?

Thanks,
@software4

Hi @software4 & @GoodDev,

Could you all update to the latest version of the Meeting SDK (2.10.1) and see if the issue is still occurring?

Thanks,
Rehema

Hi @rehema.zoom, that’s the version in which I’m reporting the issue. See my original report above.