Video-active-change not working as descriped in docs

Video SDK
1

Hey there,

I am trying to implement a simple system to show the active speaker using the Web Video SDK. According to the docs (Video SDK - web - Core features):

The video-active-change event fires for active speakers who have their video on or off, so you can render the person who is speaking in a larger speaker view layout, whether rendering a video or displaying a video off icon.

But when I tried it in my application, it only triggered when I toggled the video on and off, and it only seemed to be connected to the video state, and not the active speaker. Here is the code:

useEffect(() => {
  if (!client || !isJoined) return;

  const handleVideoActiveChange = (payload: any) => {
    console.log('video-active-change', payload);
  };

  client.on('video-active-change', handleVideoActiveChange);

  return () => {
    client.off('video-active-change', handleVideoActiveChange);
  };
}, [client, isJoined]);

If I cannot use the video-active-change, what should I use to display the active speaker, as the active-speaker also seems to trigger inconsistently? Sometimes it triggers multiple times when speaking, while other times it triggers once when you start speaking and then never again.

Any assistance is appreciated!
Thanks

1 Like
2

Hey @noahviktorschenk

Thanks for your feedback.

The video-active-change event is based on the users’ audio volume: the user with the highest audio volume will be switched to as the active video.

Similarly, the active-speaker event is also based on audio volume—we select the three users with the highest volume and broadcast them.

Thanks
Vic

1 Like
3

Hey @vic.yang

Thanks for the clarification! However, I’m still experiencing the issue despite understanding that it should be based on audio volume.

Here is my current implementation

useEffect(() => {
  if (!client || !isJoined) return;

  const handleVideoActiveChange = (payload: { state: 'Active' | 'Inactive'; userId: number }) => {
    console.log('video-active-change', payload);
  };

  client.on('video-active-change', handleVideoActiveChange);

  return () => {
    client.off('video-active-change', handleVideoActiveChange);
  };
}, [client, isJoined]);

The event only fires when a participant toggles their camera on or off. For example, when another participant turned their camera on and then off, I received:

video-active-change {state: 'Active', userId: 16778240}
video-active-change {state: 'Inactive', userId: 16778240}

Even when I speak for longer periods it does not trigger the event. In my tests there are two participants.

I am using "@zoom/videosdk": "^2.2.5", and initializing the client with await newClient.init('en-US', 'Global', { patchJsMedia: true, leaveOnPageUnload: true }).

Is there some specific configuration or setting required to enable the audio-based active speaker detection for video-active-change? Or am I using an incompatible version or is there something else.

Any guidance would be greatly appreciated!
Thanks

1 Like
4

Hi @noahviktorschenk

Is there some specific configuration or setting required to enable the audio-based active speaker detection for video-active-change?

The video-active-change event excludes the current user, so in a two-person session, when this event is triggered, the userId in the payload will always be the other user.

If you need to include the current user, you can listen to the active-speaker event and take the first user in the payload; this event will include the current user.

Thanks
Vic

1 Like