CODEWITHSUNDEEP
javascriptdomvideotwiliowebrtc
Tim
Tim

Reputation: 7056

Twilio video participant track not loading to dom

I'm following the example from the quickstart tutorial

Basically my local video works fine, but when a participant joins the room I can't seem to add the track to a DOM element because the format of the object is different.

line 13 has: container.appendChild(track.attach());

But I get the following error on a participant joining:

Uncaught (in promise) TypeError: track.attach is not a function

This is because the structure of the RemoteVideoTrackPublication object (parsed as track above) contains the object 'track' within it, so it should really be container.appendChild(track.track.attach()); for the participant object.. HOWEVER

This only works from the JS console. I can attach the video stream AFTER this error occurs from the client-side JS console - but no matter what I try, I cannot seem to be able to add the track normally because the attach.() function doesn't seem to exist on the track object.

Is this a simple DOM or ordering of events issue?

Upvotes: 1

Views: 2182

Answers (2)

Miguel Arenas
Miguel Arenas

Reputation: 11

room.participants.forEach(function(participant) {
    let previewContainer = document.getElementById('remoteTrack');
    participant.on('trackSubscribed', track => {
       previewContainer.appendChild(track.attach());
    });
});

Upvotes: 0

Yakub
Yakub

Reputation: 205

I have same problem and i fixed it when i update twilio to version 2 and change code after connect

room.participants.forEach(function (participant) {
     console.log('Remote Participant connected: ', participant);

     participant.tracks.forEach(function (publication) {
        if (publication.isSubscribed) {
            const track = publication.track;
            document.getElementById('co-browsing-remote-screen').appendChild(track.attach());
        }
     });
});

Upvotes: 1

Related Questions