CODEWITHSUNDEEP
twilio
ma11achy
ma11achy

Reputation: 132

Trying to connect to Twilio video room with screen sharing

I've been researching methods to design a new application around Twilio's "Screen Capture on Chrome" guide here: https://www.twilio.com/docs/api/video/screen-capture-chrome

I've successfully created a Chrome extension, published it and was able to share a screen and connect it to a Room.

What I'm hoping someone can help with is getting another user to connect and view the shared Room (shared screen).

I've shared my screen via the following code (snipped for length) and verified via the Twilio console that it is indeed connected:

const room = await connect(twToken, {
    name: 'marty',
    tracks: []
  });

  const stream = await getUserScreen(['screen'], chrmExID);
  const screenLocalTrack = new LocalVideoTrack(stream.getVideoTracks()[0]);

I've then created a test site accessed by a second system to connect to the room above. I've tried different methods, but the second user never seems to see the shared video in the room. For example:

const remoteDiv = document.getElementById('bodyScreen');
 room.participants.forEach(participant => {
participant.tracks.forEach(track => {
            remoteDiv.appendChild(track.attach());
          });

Debugging via Chrome, I see that the forEach is trying to enumerate on an undefined object.

I've also tried some of the ASP.NET C# solutions Twilio has on GitHub, but I seem to be having mismatch issues between the Twilio NuGet packages and the twilio-video.min.js I'm using

Upvotes: 1

Views: 1657

Answers (1)

philnash
philnash

Reputation: 73029

Twilio developer evangelist here.

I am currently writing a blog series about building an application like this, but it's not done just yet. However, I might be able to help a little here.

When you join a room, as well instantly enumerating the existing participants and their tracks, you should also listen for each participant's trackAdded event. Tracks may not connect as soon as a participant is connected, so listening on that event will receive any tracks that are added after the participant has joined the room.

room.participants.forEach(participant => {
  participant.on('trackAdded', track => {
    remoteDiv.appendChild(track.attach());
  });
});

Like I said, I am still working on and writing up my experiences here, so keep an eye on the Twilio blog for when the series is published.

Let me know if this helps at all.

Upvotes: 2

Related Questions