Can't fetch remote video track in Twilio

Question

I'm trying to build P2P call application in Twilio. The issue is not to fetch remote video track. I'm using twilio-video in React. I followed this article . Initially I was getting an error that said "track.attach()" is not a function.

The error is:

track.attach is not a function

I have found this error when room.particpants.forEach() run. Actually, I have successfully fetched participants and tracks but this can't run track.attach() .

roomJoined(room) {

  // Attach the Tracks of the room's participants.
  room.participants.forEach(participant => {
    console.log("participant", participant)
    var previewContainer = document.getElementById("remote-media");
    this.attachParticipantTracks(participant, previewContainer);
  });
}

// Attach the Participant's Tracks to the DOM.
attachParticipantTracks(participant, container) {
  var tracks = Array.from(participant.tracks.values());
  this.attachTracks(tracks, container);
}

// Attach the Tracks to the DOM.
attachTracks(tracks, container) {
  tracks.forEach(track => {
    console.log("track", track);
    container.appendChild(track.attach());
  });
}

Console:

participant: {
  RemoteParticipant {audioTracks: Map(1), dataTracks: Map(0), …}
  identity: "guest"
  networkQualityLevel: null
  networkQualityStats: null
  sid: (...)
  state: "connected"
  audioTracks: Map(1)
    [[Entries]]
    0: {"MTXXXXXXXXXXXXXXXXXXXXXXf" => RemoteAudioTrackPublication}
   size: (...)
  __proto__: Map
  dataTracks: Map(0)
  [[Entries]]
  No properties
  size: (...)
  __proto__: Map
  tracks: Map(2)
    [[Entries]]
    0: {"MTXXXXXXXXXXXXXXXXXXXXXXf" => RemoteAudioTrackPublication}
    key: "MTXXXXXXXXXXXXXXXXXXXXXXf"
    value: RemoteAudioTrackPublication {trackName: "XXXXXXXXXXXXXXXXXXXXXX", 
    trackSid: "MTXXXXXXXXXXXXXXXXXXXXXXf", kind: "audio", …}
    1: {"MTXXXXXXXXXXXXXXXXXXXXXXd" => RemoteVideoTrackPublication}
    key: "MTXXXXXXXXXXXXXXXXXXXXXXd"
    value: RemoteVideoTrackPublication {trackName: "XXXXXXXXXXXXXXXXXXXXXX", 
    trackSid: "MTXXXXXXXXXXXXXXXXXXXXXXd", kind: "video", …}
    size: (...)
    __proto__: Map
videoTracks: Map(1)
[[Entries]]
0: {"MTXXXXXXXXXXXXXXXXXXXXXXd" => RemoteVideoTrackPublication}
key: "MTXXXXXXXXXXXXXXXXXXXXXXd"
value:
}

track: {
  isSubscribed: (...)
  isTrackEnabled: (...)
  publishPriority: (...)
  track: (...)
  trackName: "aXXXXXXXXXXX8"
  trackSid: "MXXXXXXXXXXXXXXf"
  kind: "audio"
}

Actually, I have doubted the application failed to send previewTracks to Twilio but I think this works. Initially, I got localTrack with localTracksPromise . And I sent this when connecting to Twilio.

// get preview Tracks
var localTracksPromise = this.previewTracks
  ? Promise.resolve(this.previewTracks)
  : createLocalTracks();

localTracksPromise.then(
  tracks => {
    window.previewTracks = this.state.previewTracks = tracks;
    var previewContainer = document.getElementById("local-media");
    if (!previewContainer.querySelector("video")) {
      this.attachTracks(tracks, previewContainer);
    }
  },
  error => {
    console.log(`Unable to attachh tracks: ${error.message}`);
  }
);

// send preview Tracks
if (this.state.previewTracks) {
  connectOptions.tracks = this.state.previewTracks;
}

twilioConnect(twilioToken, connectOptions).then(
  room => this.roomJoined(room),
  error => {
    console.error(`Unable to connect to Room: ${error.message}`);
  }
);

Answer 1

Did you check the the tracks are subscribed? In case track is subscribed, possible.