CODEWITHSUNDEEP
javascriptvideowebrtctwilio
Vinay
Vinay

Reputation: 343

Twilio - Display Remote Participant Video for all connected participants

I am trying to build a Video Conference Call application where multiple clients can connect and every member should be able to see the webcam input of all other members.

So far, using the Twilio's quickstart documentation, I can initiate a conversation[1], invite Participants[2] and display their video feed once they are connected.

I am not able to figure out the part where when a new client connects, all the existing clients should also get their video feed.

Existing Code:

On the inviter side:

var video_token = 'valid video token';
var accessManager = new Twilio.AccessManager(video_token);
var conversationsClient = new Twilio.Conversations.Client(accessManager);
conversationsClient.inviteToConversation(['client1, client2']).then(function(conversation) {
  conversation.on('participantConnected', function(participant) {
     participant.media.attach('#remote-media');
  })
})

On the invtee side:

var video_token = 'valid video token';
var accessManager = new Twilio.AccessManager(video_token);
var conversationsClient = new Twilio.Conversations.Client(accessManager);
conversationsClient.listen().then(function() {
  conversationsClient.on('invite', function(invite) {
    invite.accept().then(function(conversation) {
      conversation.on('participantConnected', function(participant) {
        participant.media.attach('#remote-media');
      })
    })
  })
})

Shouldn't the code on invitee side also detect any new client that has been added and display their streams too? Right now, On the invitee side, the only stream that is displayed is that of the inviter. All subsequent connections by other members are not picked up. What am I missing?

References:

[1] https://media.twiliocdn.com/sdk/js/conversations/releases/0.13.5/docs/Conversation.html

[2] https://media.twiliocdn.com/sdk/js/conversations/releases/0.13.5/docs/Participant.html

Upvotes: 1

Views: 1737

Answers (1)

Vinay
Vinay

Reputation: 343

The issue here is that we are using conversationsClient.inviteToConversation every time to invite a new participant. This will create a new conversation for every inviter-invitee pair.

Which is why the participants never have any info about other participants. On subsequent invites after the initial conversation has been created, you have to use

conversation.invite

References:

  1. https://www.twilio.com/docs/api/video/guide/conversations#create-conversation

  2. https://www.twilio.com/docs/api/video/guide/conversations#invite-a-new-participant

Upvotes: 2

Related Questions