'Twilio DataTrack API stop?

So I'm creating a simple zoom clone app and got an issue with the DataTrack API.

Initialized DataTrack

this.dataTrack = new LocalDataTrack();

The issue is that after leaving/disconnecting in the room the record Icon in the browser is still there.

LeaveRoom func

this.room.localParticipant.videoTracks.forEach((publication) => {
   publication.track.stop();
   publication.unpublish();
});

console.log("this.dataTrack", this.dataTrack); // HOW TO STOP THIS ?
javascripttwiliotwilio-apitwilio-videophpwordpressemailuser-rolesmemberpress


Solution 1:[1]

The LocalDataTrack object has an id property.

You can get the MediaStreamTrack by looking up the media stream tracks from the media streams.

const userMedia = navigator.mediaDevices.getUserMedia({video:true, audio:true});

const tracks = userMedia.then(mediaStreams => {
     const tracks = mediaStreams.getTracks();
     for(let track of tracks) {
         if(track.id === this.dataTrack.id) {
              track.stop();
         }
     }
});

Solution 2:[2]

These are the 3 I do. Works like a charm.

//Remove chromes "your browser is using the camera" icon
track.forEach((track) => track.stop())
room.localParticipant.unpublishTracks(track)
track.forEach((track) => track.detach())

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Oluwafemi Sule
Solution 2 MomasVII

Related Questions