Description
The BOT fails to render the video of a user when another user leaves the meeting.
Steps to Reproduce:
We have 2 users (A and B) in a meeting, and a BOT that displays the video streams of both users.
- The BOT shows user A in a video player centered on the screen.
- User B is shown in another video player next to it.
When user A leaves the meeting, the BOT detaches user B’s video and then attaches it to render user B in the center of the screen.
Issue:
After user A leaves the meeting, the BOT fails to display user B’s video in the center of the screen.
Could you please help check if there’s anything unusual in the following session ID: "qZpTB5v0SWeIFZChiNs1Ig=="?
We would like to confirm whether the BOT correctly called detach on user B’s video and then attach it again to render after user A left, or if there was any unexpected issue that prevented user B’s video from being displayed.
Thank you for your support!
Code:
const videoPlayer = await state.mediaStream.attachVideo(userId, quality);
videoPlayer.style.height = '100%';
videoPlayer.style.width = '100%';
videoPlayer.setAttribute('user-id', userId);
...
// Append to video-player-container
async stopRenderVideo(userId, removeDOM) {
const elements = document.querySelectorAll(`[user-id="${userId}"]`);
if (!elements || elements.length == 0) return;
const promises = Array.from(elements).map(async (element) => {
const videoPlayers = await state.mediaStream.detachVideo(userId);
if (removeDOM) {
element.remove();
if (Array.isArray(videoPlayers)) {
videoPlayers.forEach(e => e.remove());
} else if (videoPlayers) {
videoPlayers.remove();
}
} else {
element.setAttribute('user-id', userId);
}
});
await Promise.all(promises);
}
** Environment **
- OS: VM
- Browser: Chrome 134