Participants not working in Web SDK for meetings

Meeting SDK type: Client view and version: 2.6.0

Description
In the meeting client view, when clicking on Participants. In one system, its opening a side bar with nothing in it. I want to select participants in the meeting. I am not able to do that. I another system in shows participants but css of the block is terrible.

Error?
No error message

How To Reproduce
Steps to reproduce the behavior including:
*1. Open Chrome or Chromium
*2. Join zoom meeting using the SDK
*3. Click on participants in the bottom bar
*4. See that either it shows a side bar with nothing in it, or a terrible UI for it as a pop up box.

Hi @feby
Thanks for reaching out to the Zoom Developer Forum!
Is this issue happening with all the meetings you are hosting?

Have you tried replicating this issue with our Sample app?

Best
Elisa

I did the instructions given in README step by step for Local (I want client view for my site). When I do npm start, it gives the following error:

https false
disableCORP false

[HPM] Proxy created: /meeting.html → http://127.0.0.1:9998/
:information_source: 「wds」: Project is running at http://0.0.0.0:9999/
:information_source: 「wds」: webpack output is served from /static
:information_source: 「wds」: Content not from webpack is served from /home/user/Documents/skillkidz/code/test/meetingsdk-web-sample/Local
:information_source: 「wds」: 404s will fallback to /index.html
Listening at http://127.0.0.1:9999/index.html
:information_source: 「wds」: Project is running at http://0.0.0.0:9998/
:information_source: 「wds」: webpack output is served from /static
:information_source: 「wds」: Content not from webpack is served from /home/user/Documents/skillkidz/code/test/meetingsdk-web-sample/Local
:information_source: 「wds」: 404s will fallback to /index.html

Listening at http://127.0.0.1:9999/index.html
node:events:505
throw er; // Unhandled ‘error’ event
^

Error: spawn chrome ENOENT
at ChildProcess._handle.onexit (node:internal/child_process:283:19)
at onErrorNT (node:internal/child_process:476:16)
at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
Emitted ‘error’ event on ChildProcess instance at:
at ChildProcess._handle.onexit (node:internal/child_process:289:12)
at onErrorNT (node:internal/child_process:476:16)
at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
errno: -2,
code: ‘ENOENT’,
syscall: ‘spawn chrome’,
path: ‘chrome’,
spawnargs: [ ‘http://127.0.0.1:9999/index.html’ ]
}

Node.js v18.2.0

Please let me know how to fix this error.

I am sharing a screen shot of what happens when I click on Participants.

For host, it shows a menu below bottom bar which is not at all user friendly.

For attendee, it shows a blank side bar.

Please check above.

@feby,

Are you seeing this behavior with our sample app or when integrating the SDK into your Web App ?

It is when integrating the SDK into my web app.

post your console error log here, maybe it is recognizable where your javascript is incompatible with the javascript of the SDK

if nothing is seen there, your CSS would be the next thing to investigate

2 Likes

No error is seen in console logs.

the dom tree is there → you have a css problem, not a javascript problem

here is the screenshot of my solution

do you have the same position values?

UPDATE: is it possible that one of your css files is overwriting the zoom css values?

UPDATE 2: what happens with firefox?

It is working okay in firefox.
Here is the computed css for wc-container-right:

I think the values are same.
Can you please check them?

It is in Chromium for Linux and Chrome for Mac it is giving problem.

Yes are right.

Following are the css I am using:
import ‘@zoomus/websdk/dist/css/bootstrap.css’;

import ‘@zoomus/websdk/dist/css/react-select.css’;

React takes care of rendering it

next step - is the problem react or the browser?

test your meeting with your browser on the non SDK version of web zoom

start the meeting from “invite link”

click “Cancel”, then “join from your Browser” (if the button is missing, click “Launch Meeting”, then “Cancel” multiple times)