Zoom Meeting SDK Component View - 2.17.0 Ribbon and Speaker Views

Before Creating a New Topic:

If you’re experiencing unexpected Video SDK behavior please search the forum with relevant keywords (e.x. error message) and follow the guidance outlined in those posts. Please also leverage the following support links:


Description
I am trying to customize the viewSizes of my Meeting SDK Component View with below configuration.

client.init({
            zoomAppRoot: meetingSDKElement,
            language: 'en-US',
            customize: {
                video: {
                    popper: {
                        anchorElement: gncWebAppHeaderElement,
                        placement:"bottom-start",
                        disableDraggable: true
                    },

                    viewSizes: {
                        default: {
                            height: isALaptopOrDesktop.matches? meetingSDKElement.clientHeight*0.97:meetingSDKElement.clientHeight,
                            width: isALaptopOrDesktop.matches?meetingSDKElement.clientWidth:meetingSDKElement.clientWidth,
                            /* height: meetingSDKElement*0.97,
                            width: meetingSDKElement.clientWidth*0.97 */
                        }, 
                        ribbon: {
                            
                            width: meetingSDKElement.clientWidth
                          }
                    }, 
                    defaultViewType:isSmallDevice.matches?"":"gallery", 
                    isResizable: false
                },  //Some other config below... 

There are 2 issues I am currently facing with this config:

  1. The Gallery, Ribbon and Active speaker videos respect the view sizes I gave. But the Speaker view does not. It overflows the root element (as you can see, there is a scroll bar in the browser window in the pic I attached… ). Is there a way I can control the speaker view other than manipulating CSS.

  2. Second one and the one I am more concerned about is the behavior on Screen-Sharing and I think these are somehow related. When I start a screen share, the shared screen is not available to the participant. Instead the video canvas is shown. Please see attached. As you can see the height is being increased very much and no shared screen can be seen. Interesting thing is if I inspect the individual videos in the large screen below, they are the size of the viewSizes I gave while init. So, really not sure what is happening.

Appreciate any help with this! Note: I enabled SharedArrayBuffer


Browser Console Error
No errors in browser. I have enabled SharedArrayBuffer

Which Web Meeting SDK version?
2.16.0

Meeting SDK Code Snippets
The code snippets that are causing the error / issue so we can reproduce.

To Reproduce(If applicable)
Steps to reproduce the behavior:

  1. Go to ‘…’
  2. Click on ‘…’
  3. Scroll down to ‘…’
  4. See error

Screenshots
If applicable, add screenshots to help explain your problem.

Troubleshooting Routes
The troubleshooting attempt types you’ve already exhausted, including testing with the appropriate sample app (found on Zoom · GitHub).

Device (please complete the following information):

  • Device: [e.g. Macbook Pro]
  • OS: [e.g. macOS 11]
  • Browser: [e.g. Chrome]
  • Browser Version [e.g. 88.0.4324.150 (Official Build) (x86_64)]

Additional context
Add any other context about the problem here.

Hi @saikiran694
Thanks for reaching out to the Zoom Developer Forum, I am happy to help here!
Are you still experiencing this issue on your end?

Hi Lisa, Thanks for the reply. Yes. One of the main issues is that the view size I give for “default” on init does work for “gallery” view… But when I switch to “speaker” view, the video size becomes large (I think because of the videos at top). But I think those should be included in the size I gave during init rather than occupying any extra space. Please see the scrolls in the image attached. Is there any way to make the speaker view respect the sizes I gave during init.

Hi @saikiran694
Thanks for sharing more details with me.
Allow me to test this on my end and see if I can replicate this behavior

Hi @saikiran694
I am not able to replicate this on my end with the sample app here:

Could you try adding your logic here and see if this is happening in our sample app please

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.