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

nsmithdev commented 1 year ago

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);
  }

[x] 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.
[x] I reviewed the Common Issues and open GitHub issues and verified that this report represents a potentially new issue.
[x] I verified that the Quickstart application works in my environment.
[x] 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 commented 1 year ago

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 commented 1 year ago

We are having and identical issue to this.

nsmithdev commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

We are seeing this same issue as well.

nsmithdev commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 6 months ago

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 commented 1 month ago

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

jamesonsaunders commented 1 month ago

Same issue.

HS180617 commented 4 days ago

Same issue

twilio / twilio-video.js

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