CODEWITHSUNDEEP
reactjstwiliotwilio-apitwilio-video
ketan patil
ketan patil

Reputation: 55

Twilio-video track.attach() / track.detach() is not function in react js web application

I am facing this issue when i am trying to attach the remote participant track using track.attach and remove the track by using track.detach() but it gives error like e.attach is not function How to resolve this error. in attachtrack function i am facing this issue when i am trying to attach the track. my twilio-video version is 2.4.0 thanks in advance.

  room.on('participantConnected', participant => {
                console.log(`Participant connected: ${participant.identity}`);
                // this.setTimer();
                room.participants.forEach(participant => {
                    console.log(`Participant "${participant.identity}" is connected to the Room`);
         this.participantConnected(participant, room, true);
        console.log("publish--->>>", participant);
                });
            });
    

  participantConnected =(participant, room, flag) =>{
      participant.tracks.forEach(publication => {
            this.trackPublished(publication, participant, flag);
        });

        // Handle theTrackPublications that will be published by the Participant later.
        participant.on('trackPublished', publication => {
            this.trackPublished(publication, participant, flag);
        });
    }

  trackPublished=(publication, participant, flag)=> {
        // If the TrackPublication is already subscribed to, then attach the Track to the DOM.
        if (publication.track) {
            this.attachTrack(publication.track, participant, flag);
        }

        // Once the TrackPublication is subscribed to, attach the Track to the DOM.
        publication.on('subscribed', track => {
            this.attachTrack(track, participant, flag);
        });

        // Once the TrackPublication is unsubscribed from, detach the Track from the DOM.
        publication.on('unsubscribed', track => {
            this.detachTrack(track, participant, flag);
        });
    }

attachTrack=(track, participant, flag)=>{


        var mediaContainer = document.getElementById('local-media');
      if (flag == true) {
            if (track.kind === 'video') {
                const participantdiv = document.createElement('div');
                participantdiv.id = participant.sid;
                remoteparticipantsid = participant.sid
                console.log("add remote--->>>", participant.sid);
                participantdiv.appendChild(track.attach())
                mediaContainer.appendChild(participantdiv);
        }
    }
}

Upvotes: 0

Views: 1486

Answers (1)

Gabriel Petersson
Gabriel Petersson

Reputation: 10472

this refers to the global context (given that all code is what is coded above), due to the nature of arrow functions, they inherit the closest context.

use funtion(){}, and this will refer to the publication

Upvotes: 1

Related Questions