Display all participants in websdk ribbon view

Meeting SDK
1

I am new to the Zoom websdk and I’m trying to get a ribbon view to display multiple participants. Presently my ribbon view only ever shows the participant who most recently talked.

To try this out I have written a really simple Angular App.

First, I start a meeting via the Zoom console (not my app).
Then I try joining the meeting from my app.
I init my client using the following code:
this.client.init({
debug: true,
zoomAppRoot: meetingSDKElement!,
language: ‘en-US’,
});

I join the meeting using the following code:
const sig = this.generateSignature(mySdkKey,mySdkSecret,meetingNumber,0);
console.log(sig)
await this.client.join({
sdkKey: mySdkKey,
meetingNumber: meetingNumber,
signature: sig,
userName: myRandomisedUserName,
password: myPassword
});

I am able to successfully join the meeting, and the websdk component view shows the meeting.

If I then join the meeting (from my app) from a different computer then that also works.

At this point the meeting host is connected, plus two participants. All 3 people have their cameras on. However, the ribbon only ever shows a single person (the person who most recently spoke). The html element hosting the view is large enough and there is tons of vertical space (I tried to upload an image but couldn’t)

How do I get the component view ribbon to show all participants?

Thanks.

2

Hi @meetings5,

By default, we do not render everyone’s video on launch. We provide developers with the relevant functions and event listening to achieve that.

When joining a meeting, here are some list of items you might want to do.

  • get all participants
  • render each participants video on the element

Other things to handle when you are in meeting.

  • listen for user join / user leave event
  • on user join, render their video
  • on user leave, remove their video