Participants not working in Web SDK for meetings

Meeting SDK
1

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.

3

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

4

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.

5

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.

zoom_host_participants
zoom_host_participants1920×1080 184 KB

For attendee, it shows a blank side bar.

zoom_particpants_attendee
zoom_particpants_attendee1920×1080 84.3 KB

6

Please check above.

7

@feby,

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

8

It is when integrating the SDK into my web app.

9

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
10

screenshot_participants_console_log
screenshot_participants_console_log1920×1080 183 KB

No error is seen in console logs.

screenshot_css_participants
screenshot_css_participants1920×1080 428 KB

11

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

here is the screenshot of my solution

zoom
zoom1066×551 52.3 KB

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?

12

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

screenshot_css_computed_participants
screenshot_css_computed_participants1920×1080 301 KB

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

13

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

15

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

16

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”

zoom-start
zoom-start966×754 71 KB

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