Twilio-video.js: Getting null value in remote tracks

[abhi0002]

    attachParticipantTracks(participant, container) {
      console.log('part', participant);
      var tracks = Array.from(participant.tracks.values()).filter(function (publication) {
        console.log('publication', publication);
        console.log('track', publication.track);
        return publication.track;
      }).map(function (publication) {
        console.log('track', publication.track);
        return publication.track;
      });
      this.attachTracks(tracks, container);
     }

    attachTracks(tracks, container) {
      console.log('tracks', tracks);

      tracks.forEach(track => {
        container.appendChild(track.attach());
      });
    }

The above code is running perfectly for the Local audio and video tracks. Its returning tracks successfully. But when a remote track it get added its returning null in the remote tracks.

The line I have written in my code
console.log('publication', publication); returns

isSubscribed: (...) isTrackEnabled: (...) publishPriority: (...) track: (...) trackName: "mic" trackSid: "MT2c968a348fa45500166fef74d7511a47" kind: "audio"
Its showing a track inside the object. But when ever I try to print publication.track it returns null. I am not getting whats wrong. Coz its running perfectly with local tracks.

[rohitbegani]

@abhi0002 it seems like your filter function doesn't do anything? I don't remember exactly why but I added a filter to remove null tracks and then update them when the trackSubscribed was triggered. Something like

const trackPubsToTracks = trackMap =>
    Array.from(trackMap.values())
      .map(publication => publication.track)
      .filter(track => track !== null);


trackPubsToTracks(participant.tracks);

[makarandp0]

Hello @abhi0002, Unlike LocalTrackPublication , RemoteTrackPublication can be in a state where it's published but not subscribed. The tracks that are not yet subscribed, would have their publication.track property set to null.

When you receive a 'trackPublished' event, you need to check if its in isSubscribed state before attaching it. if it's not yet subscribed you can add a listener for subscribed event. It will fire when the track get subscribed.

Following code in quickstart example demonstrates this usage:
https://github.com/twilio/video-quickstart-js/blob/master/quickstart/src/index.js#L50

Thanks,
Makarand