I'm having an issue with 2 people in a single room. The support person shares Audio,

Data track does not trigger "trackSubscribed" on unpublish republish data track. about twilio-video.js HOT 9 OPEN

nsmithdev commented on June 16, 2024

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

from twilio-video.js.

Comments (9)

nsmithdev commented on June 16, 2024

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

from twilio-video.js.

BrandonChristensenCS commented on June 16, 2024

We are having and identical issue to this.

from twilio-video.js.

nsmithdev commented on June 16, 2024

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.

from twilio-video.js.

dlippy commented on June 16, 2024

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.

from twilio-video.js.

zmmcginnis commented on June 16, 2024

We are seeing this same issue as well.

from twilio-video.js.

nsmithdev commented on June 16, 2024

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

from twilio-video.js.

dlippy commented on June 16, 2024

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).

from twilio-video.js.

dallinskinner commented on June 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.

from twilio-video.js.

taitruong007 commented on June 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)).

from twilio-video.js.

Data track does not trigger "trackSubscribed" on unpublish republish data track. about twilio-video.js HOT 9 OPEN

Comments (9)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent