Twilio-video.js: "trackPublished" event not firing

Created on 7 Jan 2018 · 4Comments · Source: twilio/twilio-video.js

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

Code to reproduce the issue:

$.getJSON('/video/getToken', {classroomId: classroomId}, function (data, status) {
    identity = data.identity;
    navigator.mediaDevices.getUserMedia({
        audio: true,
        video: {width: 320, height: 240}
    })
        .then(function (mediaStream) {
            console.log("Obtained " + mediaStream.getTracks() +" from local and joining room" + roomName);
            var connectOptions = {
                name: roomName,
                logLevel: 'off',
                tracks: mediaStream.getTracks(),
                preferredVideoCodecs: ['VP9', 'VP8']
            };
            return Video.connect(data.token, connectOptions);
        })
        .then(roomJoined)
        .catch(function (error) {
            log('Could not connect to Twilio: ' + error.message);
        });
});

function roomJoined(room) {
    const localParticipant = room.localParticipant;
    localParticipant.on('trackPublicationFailed', function(error, localTrack){
        console.log('Failed to publish track %s to room "%s": %s', localTrack,roomName, error.message);
    });

    localParticipant.on('trackPublished', function(localTrackPublication){
        console.log('Succesfully published track %s  with name %s to room "%s"', localTrackPublication.trackSid, localTrackPublication.trackName, roomName);
    });
}

// TODO

Expected behavior:
trackPublished event should fire resulting in the logging of the appropriate message to the console

Actual behavior:
No such message was logged

TODO

Software versions:

[x] Browser(s): Chrome 63.0.3239.84
[x] Operating System: Ubuntu 16.04
[x] twilio-video.js: 1.6.1
[x] Third-party libraries: Jquery

question

Source

lightbringer2994

All 4 comments

Hi @lightbringer2994,

Sorry you've run into this. I believe this behavior is by design. Before connect resolves, the SDK may learn about some set of Tracks that successfully published while connecting (for example, the LocalAudioTrack and LocalVideoTrack you publish in your example). These will be available synchronously on the LocalParticipant's trackPublications collection, and so we don't raise the "trackPublished" events for these. We only raise "trackPublished" events for LocalTracks that have not finished publishing during connect or are published after connect, via publishTrack. I see we failed to mention this in our CHANGELOG.md, though. Sorry about that!

Your code should look something like this instead:

$.getJSON('/video/getToken', {classroomId: classroomId}, function (data, status) {
    identity = data.identity;
    navigator.mediaDevices.getUserMedia({
        audio: true,
        video: {width: 320, height: 240}
    })
        .then(function (mediaStream) {
            console.log("Obtained " + mediaStream.getTracks() +" from local and joining room" + roomName);
            var connectOptions = {
                name: roomName,
                logLevel: 'off',
                tracks: mediaStream.getTracks(),
                preferredVideoCodecs: ['VP9', 'VP8']
            };
            return Video.connect(data.token, connectOptions);
        })
        .then(roomJoined)
        .catch(function (error) {
            log('Could not connect to Twilio: ' + error.message);
        });
});

function trackPublished(localTrackPublication) {
  console.log('Succesfully published track %s  with name %s to room "%s"', localTrackPublication.trackSid, localTrackPublication.trackName, roomName);
}

function roomJoined(room) {
    const localParticipant = room.localParticipant;
    localParticipant.on('trackPublicationFailed', function(error, localTrack){
        console.log('Failed to publish track %s to room "%s": %s', localTrack,roomName, error.message);
    });

    localParticipant.trackPublications.forEach(trackPublished);
    localParticipant.on('trackPublished', trackPublished);
}

Notice how I factored out the trackPublished function and