Small/portrait video interface on desktop while remote use is mobile video sdk

Video SDK
1

Video SDK Version: React Native 1.12.10
Web SDK Version: 1.12.5

Devices:

  • Mobile: Android Galaxy Tab A8 (React Native SDK)
  • Desktop: iMac Apple M3, Google Chrome (Web SDK)

Description:
I am trying to join a session using the React Native Mobile SDK with the Desktop Web SDK. The issue is that the Mobile SDK user appears very small on the desktop. However, when a mobile Chrome user joins the desktop session, they display correctly. This issue only occurs with the React Native Mobile SDK user.Mobile sdk user showing portrait

Error:
There is no error, but the following event is triggered on the web:
client.on("video-aspect-ratio-change", async (payload) => { Aspect ratio: 0.5625, Width: 626.625, Height: 1114, userid: 16783360 }

Troubleshooting Steps:
I have searched extensively on the Zoom forum but haven’t found anything directly related to my issue.

How to Reproduce:

  1. Start a session on the desktop using the Web SDK.
  2. Connect using the React Native Mobile SDK.
  3. On desktop Chrome, the mobile user will appear in portrait mode and display at a smaller size.

desktop1
desktop11920×1019 49.9 KB

desktop2
desktop21920×1027 33.9 KB

desktop3
desktop31920×1022 43.2 KB

2

Hey @enquiries1

Thanks for your feedback.

Are you referring to the large white spaces on either side of the video when watching mobile video on the desktop? This occurs because the sending device (mobile) uses a 9:16 portrait ratio, while the rendering container is using a 16:9 landscape ratio, which can result in side padding.

I’m glad you noticed this difference through the video-aspect-ratio-change event. This event is triggered when there is a mismatch between the rendered aspect ratio and the original aspect ratio from the sender.

You can try adjusting the page layout. If you’re rendering the video through an independent HTML element ( video player), you can resolve this issue by updating the element’s CSS styling.

Thanks
Vic

3

@vic.yang Hey Thanks for you response.Yes white spaces on either side of the video is issue.

If the sending device (mobile) uses a 9:16 portrait ratio,Can I send 16:9 from device ?

OR

This is styles of my video


 <div id="participant-list">
    <video-player-container id="participantElement" autoplay></video-player-container>
</div>

const container = document.getElementById('participantElement');
 container.innerHTML = '';  
  const vidContainer = container.querySelector(`[data-user-id="${userId}"]`);


   if (userId == fullScreenParticipantId) {
			  
            // Make the clicked video large
            vidContainer.style.width = '100%';
            vidContainer.style.height = '100vh';
            vidContainer.style.zIndex = '9'; 
            vidContainer.style.bottom = '0'; 
            vidContainer.style.left = '0%';
            vidContainer.style.top = '12vh'; 
        }
else {
// smal video styles 
}
Its already full width.How I can manage this to show mobile device full screen as others are without white spaces.
4

Hey @enquiries1

If the sending device (mobile) uses a 9:16 portrait ratio,Can I send 16:9 from device ?

I’m afraid that won’t work; in portrait mode, it’s typically possible to capture an aspect ratio of 3:4 or 9:16.

Its already full width.How I can manage this to show mobile device full screen as others are without white spaces.

The aspect ratio of the container and the original video are inconsistent, forcing it to fill the container will result in the video being stretched or cropped.

Thanks
Vic