Video SDK Type and Version
1.7.10
Description
Each localhost/video page only renders the current participant’s video, not the other participants. The relevant code snippet is given below, any insight on why this happens? Thanks for any help in advance
Error?
The full error message or issue you are running into, where applicable.
Troubleshooting Routes
The troubleshooting attempt types you’ve already exhausted, including testing with the appropriate sample app (found on Zoom · GitHub).
How To Reproduce
useEffect(() => {
const HandleUserAdded = (payload) => {
console.log(payload[0].userId + ' joined the session')
console.log("Add payload below")
console.log(payload)
console.log("Add payload above")
const allUsers = client.getAllUser();
setParticipants(prevParticipants => [...prevParticipants, payload[0].userId]);;
allUsers.forEach((user) => {
if(user.bVideoOn) {
const index = allUsers.indexOf(user.userId);
const xCoord = index * 960;
if (index >= 0) {
mediaStream.renderVideo(
document.querySelector('#participant-videos-canvas'),
user.userId,
960,
540,
xCoord,
0,
2
);
}
}
});
};
const handleUserRemoved = (payload) => {
console.log(payload[0].userId + ' left the session')
console.log("Remove payload below")
console.log(payload)
console.log("Remove payload above")
setParticipants(prevParticipants => prevParticipants.filter(id => id !== payload[0].userId));
mediaStream.stopRenderVideo(participantVideoCanvasRef.current, payload[0].userId);
};
const handleVideoStateChange = (payload) => {
const allUsers = client.getAllUser();
const index = allUsers.indexOf(payload.userId);
const xCoord = index * 960;
if (payload.action === 'Start') {
mediaStream.renderVideo(
document.querySelector('#participant-videos-canvas'),
payload[0].userId,
960,
540,
xCoord,
0,
2
);
} else if (payload.action === 'Stop') {
mediaStream.stopRenderVideo(participantVideoCanvasRef.current, payload[0].userId);
}
};
client.on('user-added', HandleUserAdded);
client.on('user-removed', handleUserRemoved);
client.on('peer-video-state-change', handleVideoStateChange);
return () => {
client.off('user-added', HandleUserAdded);
client.off('user-removed', handleUserRemoved);
client.off('peer-video-state-change', handleVideoStateChange);
};
}, [client, mediaStream, participants]);