The userId in active-speaker event depends on the audio volume of participants, not directly relating to videos. video-active-change event may be a better choice.
I need to get the userId of users who are actually talking to display their video. Based on the description for video-active-change, I don’t think it will do what I’m looking for.
The video-active-change event may address your concerns, let me elaborate the usage:
The payload of video-active-change event has two properties, state and userId, who should be active is judged by the server(depends on the volume of audio), thus it meets your requirement of the active speaker, and the next step is how to render the video, following is some pseudocode:
let currentActiveSpeaker = undefined;
const handleActiveVideo = ({state,userId})=>{
if(state===VideoActiveState.Active){
// active speaker changed
if(userId!==currentActiveSpeaker.userId){
// stop the previous active speaker's video
if(currentActiveSpeaker?.bVideoOn){
stream.stopRenderVideo(canvas,currentActiveSpeaker.userId)
}
// switch to the current active speaker
stream.renderVideo(canvas,userId,width,height,x,y,quality)
}
}else{
// active speaker don't turn on the video,
if(currentActiveSpeaker?.bVideoOn){
stream.stopRenderVideo(canvas,currentActiveSpeaker.userId)
}
// use dom element to display the active speaker
// allUserList can be obtained by client.getAllUser()
const activeUser = allUserList.find(user=>user.userId===userId);
setDisplayName(overlayAvatarElement,activeUser?.displayName);
}
currentActiveSpeaker = allUserList.find(user=>user.userId===userId)
}
client.on('video-active-change',handleActiveVideo);
Hello,
Thanks for the reply.
I tried to apply the code in my situation but I can’t get the expected result. I probably didn’t quite understand the use of “video-active-change”.
Does this event is triggered when a participant is speaking or when a user activate ?