track.stop() is not a function

[TravBradfield]

• [y] I have verified that the issue occurs with the latest twilio-video.js release and is not marked as a known issue in the CHANGELOG.md.
• [y] I reviewed the Common Issues and open GitHub issues and verified that this report represents a potentially new issue.
• [y] I verified that the Quickstart application works in my environment.
• [y] I am not sharing any Personally Identifiable Information (PII) or sensitive account information (API keys, credentials, etc.) when reporting this issue.

Code to reproduce the issue:

room.on('disconnected', room => {
        console.log('You disconnected: ', room);
        room.participants.forEach(element => {
          this.participantDisconnected(element)
        });
      })

  participantDisconnected = (participant) => {
    console.log('Participant "%s" disconnected', participant.identity);
    document.getElementById(participant.sid).remove();
    const track = [...participant.videoTracks.values()][0].track;
    track.stop();
    track.detach(this.localVideoTrack.current);
    participant.unpublishTrack(track);
    this.disconnectCall();
  }

Expected behavior:

I expect the local video to be stopped by "track.stop()".

Actual behavior:

I'm getting an error saying track.stop() is not a function.

TODO

Software versions:

• [ ] Browser(s): Chrome, Safari
• [ ] Operating System: MacOS Catalina 10.15.5
• [ ] twilio-video.js: 2.4.0
• [ ] Third-party libraries (e.g., Angular, React, etc.): Angular

[manjeshbhargav]

Hi @TravBradfield ,

Thanks for writing in with your issue. In your snippet, you are attempting to stop RemoteParticipants' Tracks, which is not possible. You can only stop your own Tracks, which can be done as follows:

  room.on('disconnected', room => {
    console.log('You disconnected: ', room);
    room.participants.forEach(participant => this.participantDisconnected(participant));
    this.participantDisconnected(room.localParticipant);
  });

  participantDisconnected = participant => {
    console.log('Participant "%s" disconnected', participant.identity);
    document.getElementById(participant.sid).remove();
    const track = [...participant.videoTracks.values()][0].track;
    if (track.stop) {
      track.stop();
      track.detach(this.localVideoTrack.current);
    }
    this.disconnectCall();
  }

Hope this helps. I'll close this issue since I've answered your question, but we can continue the conversation here if you need any more clarification.

Thanks,

Manjesh Malavalli JSDK Team

[TravBradfield]

@manjeshbhargav Thanks for your response. I've tried your code snippet but it hasn't made any difference.. Here is a screen shot of my console.

[TravBradfield]

Hi @TravBradfield ,

Thanks for writing in with your issue. In your snippet, you are attempting to stop RemoteParticipants' Tracks, which is not possible. You can only stop your own Tracks, which can be done as follows:

  room.on('disconnected', room => {
    console.log('You disconnected: ', room);
    room.participants.forEach(participant => this.participantDisconnected(participant));
    this.participantDisconnected(room.localParticipant);
  });

  participantDisconnected = participant => {
    console.log('Participant "%s" disconnected', participant.identity);
    document.getElementById(participant.sid).remove();
    const track = [...participant.videoTracks.values()][0].track;
    if (track.stop) {
      track.stop();
      track.detach(this.localVideoTrack.current);
    }
    this.disconnectCall();
  }

Hope this helps. I'll close this issue since I've answered your question, but we can continue the conversation here if you need any more clarification.

Thanks,

Manjesh Malavalli JSDK Team

const track = [...participant.videoTracks.values()][0].track;

this track is always undefined!! I'm really battling to understand why. There is no participant being passed in which is why it always fails.. But why!?!?!

(Tearing my hair out)