"TypeError: track.attach is not a function" in React-Twilio Video Application

Question

My Twilio React-Video Application works fine for both Local and Remote Participants over Web(and Mobile Browser)

When I try to connect to the same "Room" and all the necessary details from Twilio Android-SDK-Flutter plugin,I get this Error

track.attach() is not a function


componentDidMount() {
        const { track } = this.props;
        track.attach(this.media.current);
    }
// Error : track.attach() is not a function

I am able to console.log( ) the Remote Participant who joins the room but I am unable to view the Remote Participant.

In Mobile Application,it is working fine and "both" the participants are visible.

philnash philnash · Accepted Answer · 2021-01-11T01:12:03

Twilio developer evangelist here.

The normal cause for something like this is that you are using participant.tracks to get the tracks. However, participant.tracks is actually a Map of <Track.SID, TrackPublication> and a TrackPublication does not have an attach method.

Instead, you should check if the TrackPublication#isSubscribed. If it is, you can then use trackPublication.track.attach. If the track is not yet subscribed you should listen for the "subscribed" event which tells you that the track is now available.

You likely don't want to render the component that is trying to attach the track until the track is subscribed.

Let me know if that helps at all.

"TypeError: track.attach is not a function" in React-Twilio Video Application

1 Answers