How to display the image of a user that joined a channel instead of a black screen ? Agora

Question

I have a problem the call works perfectly and everything is almost perfect using Agora, but the problem is when the user turns of the video call I am only able to see a black screen I tried to change by using a background image instead of a black screen, it doesn't work, I tried changing the css using z-index but it doesn't work as well, How can I put the user image instead of a black screen? Any help would be appreciated. Here is a code sample:

async joinRoomInit(roomid:string, uid:number) {
    // Create a client
    this.client = AgoraRTC.createClient({mode:'rtc', codec:'vp8'});
    // Any time a user publishes we gonna listen for that
    this.client.on('user-published', this.handleUserPublished);
    this.joinStream(uid, roomid);
    this.client.on('user-unpublished', this.handleUserLeft);
 }

joinStream = async (uid:number, roomid:string) => {
   // Generate Agora token
  this.rtcToken= await this.agoraToken.getAgoraToken(roomid,'publisher','uid',uid)
  // joining
  await this.client.join(environment.agoraAPI, roomid, this.rtcToken, uid);
  // Create audio and video track
  this.audioTrack = await AgoraRTC.createMicrophoneAudioTrack();
  this.videoTrack = await AgoraRTC.createCameraVideoTrack({
    encoderConfig: {
      width: { min: 640, ideal:1320, max: 1920},
      height: { min:480, ideal: 920, max:1080}
    }
  });

  // Publish the local audio and video tracks to the RTC channel.
  await this.client.publish([this.audioTrack, this.videoTrack]);

  let player = `<div class="video-call" id="user-id-${uid}"></div>`;
  document.querySelector('.video-calls')?.insertAdjacentHTML('beforeend', player);
  document.getElementById(`user-id-${uid}`)?.addEventListener('click',expandVideoFrame);
  this.videoTrack.play(`user-id-${uid}`);
  this.videoTrack.setMuted(true);
  this.audioTrack.setMuted(true);
  console.warn("publish success!");
}

Here where I tried to change the Black screen when the camera is disabled

 handleUserPublished = async (user:IAgoraRTCRemoteUser, mediaType:any)=>{
      // Subscribe to the channel
      await this.client.subscribe(user, mediaType);
      if(mediaType === 'video') {
        let player = document.getElementById(`user-id-${user.uid}`);
        if(player === null) {
          let player = `<div class="video-call" id="user-id-${user.uid}"></div>`;
          document.querySelector('.video-calls')?.insertAdjacentHTML('beforeend', player);
          document.getElementById(`user-id-${user.uid}`)?.addEventListener('click',expandVideoFrame);
        }
        user.videoTrack?.play(`user-id-${user.uid}`)
      }
      if(mediaType === 'audio') {
        user.audioTrack?.play()
      }
      let userCall = document.getElementById(`user-id-${uid}`)!;
      userCall.style.backgroundImage=`url('${this.user.photoURL}')`;
     
    }

When I try to add the image When I take a look using the inspector the image is there but it doesn't show up that's why I tried using z-index but it doesn't work. Any Ideas please? If you want me to add more code just ask me.

Answer 1

it's simple, when you call setMute(true) in your device, then can call videoTrack.muted and it returns a boolean, if muted is true you can render the user photo. For remote users is different cuz you can't ask the mute state from remote tracks but, when a remote user call setMuted it triggers the user-unpublished event in the call and then you can delete the muted track in your app and show your user photo.

client.on('user-unpublished', (user, type) => {
if (type === 'audio') {
  user.audioTrack?.stop()
}
if (type === 'video') {
     //Delete the video track here
} })

I hope help you bro