Twilio-video.js: publication.isSubscribed getting false and track getting as null

[sanu1894]

When a remote participant connects, i'm rendering the video as follows. But the publication.isSubscribed is getting as false and also the track is null

    connect(res['token'], {logLevel: "debug"}).then((room)=>{  
        console.log(`Successfully joined a Room: ${room}`);
          room.on('participantConnected', participant => {                

            participant.tracks.forEach(publication => {
              if (publication.isSubscribed) {
                const track = publication.track;
                this.remoteMedia.nativeElement.appendChild(track.attach());
              }
            });

            participant.on('trackSubscribed', track => {
              this.remoteMedia.nativeElement.appendChild(track.attach());
            });
        });

        createLocalVideoTrack().then(track => {
          const localMediaContainer = this.userMedia.nativeElement;
          localMediaContainer.appendChild(track.attach());
        });
      })

Log file also attached here.
log.txt

[manjeshbhargav]

Hi @sanu1894 ,

Thanks for writing in with your question. I think you are not considering Participants that are already in the Room when you join. "participantConnected" events will not be fired for them. You will have to traverse the room.participants collection yourself like this:

function attachTrack(track, container) {
  container.appendChild(track.attach());
}

function participantConnected(participant) {
  participant.tracks.forEach(publication => {
    if (publication.isSubscribed) {
      attachTrack(publication.track, this.remoteMedia.nativeElement);
    }
  });
  participant.on('trackSubscribed', track => {
    attachTrack(track, this.remoteMedia.nativeElement)
  });
}

connect(token, { logLevel: debug }).then(room => {
  // NOTE: This line handles existing Participants in the Room.
  room.participants.forEach(participantConnected);

  // NOTE: This line handles future Participants in the Room.
  room.on('participantConnected', participantConnected);

  // NOTE: Since you did not explicitly acquire your own LocalTracks and pass it
  // to ConnectOptions, the SDK automatically acquires them for you. So, you need
  // not create a new LocalVideoTrack for the preview.
  const localVideoTrack = Array.from(room.localParticipant.videoTracks.values())[0].track;
  attachTrack(localVideoTrack, this.userMedia.nativeElement);
});

I hope this helps.

Thanks,

Manjesh Malavalli
JSDK Team