Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Data track does not trigger "trackSubscribed" on unpublish republish data track. #2029

Open
4 of 8 tasks
nsmithdev opened this issue Oct 12, 2023 · 11 comments
Open
4 of 8 tasks

Comments

@nsmithdev
Copy link

I'm having an issue with 2 people in a single room. The support person shares Audio, Video, Data Track.
The end user is always connected to the room. The support person will connect disconnect from the room.

If the support person unpublishes all 3 feeds and a minute or two later republishes all three feeds the "trackSubscribed" event is emitted for the Audio and Video but not the Data Track.
If we new up a new Data Track we fail to get it about 1 in 10 times if we unpublish the republish the same datatrack it does not seem to ever publish "trackSubscribed".

    this.all3Tracks = [videoTrack, audioTrack, dataTrack];
    const options: ConnectOptions = {
      name: roomName,
      audio: false,
      video: false,
      tracks: this.all3Tracks,
    };

  publish() {
    this.room.localParticipant.publishTracks(this.all3Tracks);
  }

  unpublish() {
    this.room.localParticipant.unpublishTracks(this.all3Tracks);
  }
  • 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.
  • I reviewed the Common Issues and open GitHub issues and verified that this report represents a potentially new issue.
  • I verified that the Quickstart application works in my environment.
  • 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:

// TODO

Expected behavior:

TODO

Actual behavior:

TODO

Software versions:

  • Browser(s):
  • Operating System:
  • twilio-video.js:
  • Third-party libraries (e.g., Angular, React, etc.):
@nsmithdev
Copy link
Author

nsmithdev commented Oct 12, 2023

I'm running the newest version of Chrome on windows 11 with the newest version twilio-video.js
The app is written in Angular.

@BrandonChristensenCS
Copy link

We are having and identical issue to this.

@nsmithdev
Copy link
Author

It seems to be related to publishing all 3 at once because when I unpublish and re-publish just the data track by itself it seems to work fine most of the time.

@dlippy
Copy link

dlippy commented Oct 13, 2023

Seeing the same issue. On initial page load it works fine but eventually as remote participants connect and disconnect to the room we don't reliably get the trackSubscribed for datatracks (or at least usually do not).

What we see is that in particpantConnected datatracks is always empty so assume that is intended. But after first loading the page we always get trackSubscribed for the datatrack (always last also). If the same user (or other users) then disconnects and reconnects to the room we still get trackSubscribed for all video tracks and audio tracks they are publishing (with our app it is two video and one audio) but never get it for the datatrack.

Refreshing the page fixes.

@zmmcginnis
Copy link

We are seeing this same issue as well.

@nsmithdev
Copy link
Author

I have a minimal reproduction with plain js. You have to have two pages with a deferent identity for each page and the server side to generate the JWT tokens.

<!DOCTYPE html>
<html>
<body>
    <script src="js/twilio-video.js"></script>
    <style>
        button {
            width: 200px;
        }
    </style>
    <div>
        <br />
        <br />
        <button onclick="publishAll()">Share All</button>
        <button onclick="unPublishAll()">Unshare All</button>
        <br />
        <br />
        <button onclick="publishData()">Share Data</button>
        <button onclick="unPublishData()">Unshare Data</button>
    </div>
    <script src="twilio-helpers.js"></script>
    <script>
        runSetup('person2').then(() => console.log('done'));
    </script>
</body>
</html>
// twilio-helpers.js
var req = new XMLHttpRequest();
var audioVideoTracks = [];
var dataTrack = new Twilio.Video.LocalDataTrack({name: 'data'})
var room = null;

async function runSetup(identity) {
    await initializeMedia();
    var token = await getTwillioToken(identity);
    console.log(token);
    room = await connectRoom(token);
    console.log(room);
    roomConnected(room);
}

async function initializeMedia() {
    const settings = {
        video: true,
        audio: true,
    }
    const media = await navigator.mediaDevices.getUserMedia(settings);
    console.log(media);
    userVideoTrack = new Twilio.Video.LocalVideoTrack(media.getVideoTracks()[0], { name: 'video', logLevel: 'warn' });
    console.log(userVideoTrack);
    userAudioTrack = new Twilio.Video.LocalVideoTrack(media.getAudioTracks()[0], { name: 'audio', logLevel: 'warn' });
    console.log(userAudioTrack);
    audioVideoTracks = [userVideoTrack, userAudioTrack];
}

function getTwillioToken(identity) {
    return new Promise((resolve, reject) => {
        const req = new XMLHttpRequest();
        req.onload = (e) => {
            const response = JSON.parse(req.responseText);
            resolve(response.token);
        };
        req.onerror = () => reject();
        req.open("GET", `/home/GetTwilioToken?id=${identity}`);
        req.send();
    });
}

async function connectRoom(token) {
    const options = {
        name: 'TheRoomName1',
        audio: true,
        video: true,
        tracks: [...audioVideoTracks, dataTrack],
    };
    return Twilio.Video.connect(token, options);
}

function roomConnected(room) {
    room.participants.forEach((p) => participantConnected('forEach', p));
    room.on('participantConnected', (p) => participantConnected('event', p));
    room.on('participantDisconnected', (p) => console.log('participantDisconnected', p));
    room.on('disconnected', (p) => console.log('participantDisconnected', room.participants, p));
}

function participantConnected(calledFrom, participant) {
    console.log('==============================');
    console.log('participantConnected', calledFrom, participant);
    participant.tracks.forEach((track) => console.log('trackSubscribed', 'forEach',track));
    participant.on('trackSubscribed', (track) => console.log('trackSubscribed', 'event', track));
    participant.on('trackUnsubscribed', (track) => console.log('trackUnsubscribed', 'event', track));
}

function publishAll() {
    console.log('Publish All CLick', '==================');
    room.localParticipant.publishTracks([...audioVideoTracks, dataTrack]);
}

function unPublishAll() {
    console.log('UnPublish All CLick', '================');
    room.localParticipant.unpublishTracks([...audioVideoTracks, dataTrack]);
}

function publishData() {
    console.log('Publish Data CLick', '================');
    room.localParticipant.publishTracks([dataTrack]);
}

function unPublishData() {
    console.log('UnPublish Data CLick', '==============');
    room.localParticipant.unpublishTracks([dataTrack]);
}

@dlippy
Copy link

dlippy commented Oct 15, 2023

It seems to be related to publishing all 3 at once because when I unpublish and re-publish just the data track by itself it seems to work fine most of the time.

Delaying publish doesn't solve the issue for us. Our work around is currently to send a message indicating data track not received so that the participant can unpublish current data track and republish (and just keep doing this until it shows up).

@dallinskinner
Copy link

I am having this same issue. When both participants connect the first time everything is fine but if one participant disconnects and reconnects the trackSubscribed event never fires for the data track. I receive a published event for the track but isSubscribed is false and the track property on the RemoteDataTrackPublication is always null.

I tried delaying the publish up to 10 seconds after the audio/video tracks but it does not affect anything. This makes it seem like it has something to do with the disconnect/connect more so than publishing all 3 tracks at the same time.

@taitruong007
Copy link

taitruong007 commented May 16, 2024

I am having this same issue. When both participants connect the first time everything is fine but if one participant disconnects and reconnects the trackSubscribed event never fires for the data track. I receive a published event for the track but isSubscribed is false and the track property on the RemoteDataTrackPublication is always null.

I tried delaying the publish up to 10 seconds after the audio/video tracks but it does not affect anything. This makes it seem like it has something to do with the disconnect/connect more so than publishing all 3 tracks at the same time.

Hi @dallinskinner .
May I know if the issue has been solved yet? 🙏
Recently, I noticed this issue when testing with Chrome (Version 124.0.6367.207 (Official Build) (arm64)), the issue did not happen when I tested with Safari (Version 15.3 (17612.4.9.1.5)) and Firefox (Version 126.0 (64-bit)).

@PrakashC1
Copy link

Hi all, is there any update on this issue? Facing same issue...

@jamesonsaunders
Copy link

Same issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

8 participants