Hey @ktae13 ,
For additional issues, please create new topics and fill out the post template so we have enough info to debug and for easier tracking.
Here is a possible solution for your original issue:
Since we support rendering multiple videos (gallery view), the video-active-change
event is not essential for rendering video. There are two events that you can take into account: peer-video-state-change
and user-updated
.
client.on('peer-video-state-change',async (payload)=>{
const { action,userId } = payload;
if(action==='Start'){
/*
render video on canvas
we recommend the aspect = 16/9, and please note that the origin of the coordinates is the lower left corner of the canvas.
*/
await stream.renderVideo(canvas,userId,width,height,x,y,quality);
}else if(action==='Stop'){
await stream.stopRenderVideo(canvas,userId);
}
})
If you need to display a list of users in pages, we recommend that you maintain a list of rendered videos by yourself. You can render or stop rendering videos when the users in the list change. Listen to the user-updated
and user-removed
events to update the list of rendered videos.
let renderedList = [];
let page = 0
let pageSize = 5;
const canvas = document.querySelector('.video-canvas');// canvas to render the video
const handleParticipantsChange = (participants)=>{
const pageParticipants = participants.filter((user,index)=>Math.floor(index/pageSize)===page);
const videoParticipants = pageParticipants.filter(user=>user.bVideoOn);
/** For performance reasons, the SDK can only render 9 videos at the same time, we recommand
* to stop rendering the old video and then render a new video
* **/
const removedVideoParticipants = renderedList.filter(user=>videoParticipants.findIndex(user2=>user2.userId===user.userId)===-1);
if(removedVideoParticipants.length>0){
removedVideoParticipants.forEach(async (user)=>{
await stream.stopRenderVideo(canvas,user.userId);
})
}
const addedVideoParticipants = videoParticipants.filter(user=>renderedList.findIndex(user2=>user2.userId===user.userId)===-1);
if(addedVideoParticipants.length>0){
addedVideoParticipants.forEach(async (user)=>{
// render new video
await stream.renderVideo(canvas,user.userId,width,height,x,y,quality);
});
}
renderedList = videoParticipants;
}
client.on('user-updated',()=>{
const participants = client.getParticipantsList();
handleParticipantsChange(participants);
})
client.on('user-removed',()=>{
const participants = client.getParticipantsList();
handleParticipantsChange(participants);
})
For more details please refer to the tutorial and the sample demo project (React). This is a full demo of how to manage multi-user video rendering and paging.
If you have followed the guidance to render video, but there is still no drawing on the canvas, please check whether you have set the width
and height
attributes of the canvas.
Thanks,
Tommy