javascripttwiliotwilio-video

Connecting to a Twilio video room that already has participants


When user joins a room that has another individual already in the room then the person joining should see the video and audio of the user already in the room*.

As seen in the docs, on room initialization I iterate over all participants in the room to attach to their track by executing participant.tracks.forEach(publication => publication.track.attach()). However I get an error because track is undefined which I learn was because I was not subscribed to the track.

How do I subscribe to tracks/track publication of users who are already in the room?

*The user already in the room is using and old Android SDK and the user in the room is using the latest 2.0 Javascript SDK


Solution

  • Twilio developer evangelist here.

    When you iterate over those existing participants their tracks may be published but you might not have subscribed to the track yet. So you should check if the track publication isSubscribed yet and only add the track at that point. Otherwise you can listen to the track publication's subscribed event and then attach the track.

    room.participants.forEach(participant => {
      participant.tracks.forEach(publication => {
        if (publication.isSubscribed) {
          const mediaElement = publication.track.attach();
          // add mediaElement to the DOM
        } else {
          publication.on("subscribed", track => {
            const mediaElement = track.attach();
            // add mediaElement to the DOM
          })
        }
      })
    })
    

    Alternatively, you can also listen to the trackSubscribed event of a participant and perform the same action at that point.