Avoid removing user video while camera is off

Video SDK
1

Hi, i would like to know how to keep video-player element with a black background color when users turn off their camera instead of detaching the element removing it from the dom.

2

Hi @laura25 ,

Could you attach the code snippet for how you are rendering users’ videos? Ideally, you should be able to stop the video and conditionally render a background as a placeholder.

Thanks,
Rehema

3

clicking on the btn #start-call fires this function

const startCall = async () => {
                client.on('peer-video-state-change', renderVideo);
                client.on('passively-stop-share', (payload) => {
                    console.log(payload)
                    if (payload.reason === 'StopScreenCapture') {
                        screenShareWrapper.style.display = 'none';
                        partecipantsWrapper.style.width = '100%'
                        partecipantScreenShareCanvas.classList.add('hidden');
                        screenShareVideo.classList.add("hidden");
                        screenShareCanvas.classList.add("hidden");
                        screenOn.classList.toggle("hidden");
                        screenOff.classList.toggle("hidden");
                        stream.stopShareView();
                    }
                })
                client.on('connection-change', (payload) => {
                    if(payload.state === 'Closed') {
                        location.reload();
                    }
                })
                await client.join(topic, signature, user);
                stream = client.getMediaStream();
                await stream.startVideo();
                await stream.startAudio({ backgroundNoiseSuppression: true });
                await renderVideo({ action: 'Start', userId: client.getCurrentUserInfo().userId });
            };

render video is another function

const renderVideo = async (event) => {
  const mediaStream = client.getMediaStream();
  if (event.action === 'Start') {
    const userVideo = await mediaStream.attachVideo(event.userId, VideoQuality.Video_360P);
    videoContainer.appendChild(userVideo);
  }else {
    const element = await mediaStream.detachVideo(event.userId);
    Array.isArray(element) ? element.forEach((el) => el.remove()) : element.remove();
  }
};

In this way i’m able to rander video on start-call or when i turn off or on the camera
The element that i’m using to contain the videos is

Update: i’ve modified the renderVideo function in order to append a div as placeholder when partecipant turn off the camera and i remove it when they turn the camera on unfortunately as aspected when a user join the call the palaceholder isn’t rendered

const renderVideo = async (event) => {
                console.log(event);
                if (event.action === 'Start') {
                    const existingPlaceholder = document.querySelector(`div.cam-placeholder[node-id="${event.userId}"]`);

                    if (existingPlaceholder) {
                        // Se esiste già un placeholder, rimuovilo
                        existingPlaceholder.remove();
                    }

                    const userVideo = await stream.attachVideo(event.userId, 3);
                    videoContainer.appendChild(userVideo);
                } else if (event.action === 'Stop') {
                    const element = await stream.detachVideo(event.userId);
                    Array.isArray(element) ? element.forEach((el) => el.remove()) : element.remove();

                    // Inserisci un div con attributo node-id = event.userId
                    const divElement = document.createElement('div');
                    divElement.classList.add('cam-placeholder');
                    divElement.setAttribute('node-id', event.userId);

                    // Creazione dello span con il nome dell'utente
                    const user = client.getUser(event.userId);
                    const spanElement = document.createElement('span');
                    spanElement.textContent = user.displayName; // Funzione per ottenere il nome dell'utente

                    // Aggiunta dello span come figlio del div
                    divElement.appendChild(spanElement);

                    // Aggiungi il div al contenitore video
                    videoContainer.appendChild(divElement);
                }
            };
4

To maintain the video player element with a black background color when users disable their camera without removing it from the DOM, you can employ a dynamic approach using JavaScript and CSS.

Firstly, ensure your HTML includes the video player element:

<div id="video-player"></div>

Next, define CSS styles to set the initial appearance of the video player, including a black background:

#video-player {
  background-color: black;
  /* Add other necessary styles for your video player */
}

Then, use JavaScript to detect changes in the camera status and update the CSS styles accordingly:

const videoPlayer = document.getElementById('video-player');

function updateVideoPlayerStyle(cameraEnabled) {
  if (cameraEnabled) {
    videoPlayer.style.background = 'none'; // Revert to default styles if camera is enabled
  } else {
    videoPlayer.style.background = 'black'; // Set background color to black if camera is disabled
  }
}

// Example event listener for toggling camera status
// Replace this with your actual event or condition for camera status changes
let isCameraEnabled = true; // Initial assumption: camera is enabled
updateVideoPlayerStyle(isCameraEnabled); 

document.getElementById('toggle-camera-button').addEventListener('click', function() {
  isCameraEnabled = !isCameraEnabled;
  updateVideoPlayerStyle(isCameraEnabled);
});

camera lenta capcut template that surpass expectations, achieving a flawless beat 5/5 rating for excellence.