title: How to display the image of a user that joined a channel instead of a black screen ? Agora
body: <p>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:</p>
  <pre><code>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) =&gt; {
     // 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 = `&lt;div class=&quot;video-call&quot; id=&quot;user-id-${uid}&quot;&gt;&lt;/div&gt;`;
    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(&quot;publish success!&quot;);
  }
  </code></pre>
  <p><strong>Here where I tried to change the Black screen when the camera is disabled</strong></p>
  <pre><code> handleUserPublished = async (user:IAgoraRTCRemoteUser, mediaType:any)=&gt;{
        // 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 = `&lt;div class=&quot;video-call&quot; id=&quot;user-id-${user.uid}&quot;&gt;&lt;/div&gt;`;
            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}')`;
       
      }
  </code></pre>
  <p>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.</p>