twiliotwilio-apitwilio-click-to-call

Twilio programmable video sdk issue


I am using twilio programmable video sdk in my application. I've created peer to peer video chat using Twilio Programmable Video. Whenever I joined a meeting. I can see and hear opposite person but opposite person is not able to hear me or see me. And Creation of room and creation of tracks are working fine.

await connect(token, { 
  audio: true,
  name: this.meetingId,
  video: { width: 640 }
 }).then(room => {

  this.meetingRoom = room;
  // display the face of you
  createLocalVideoTrack().then(track => {
    const localMediaContainer = document.getElementById('local-media');
    localMediaContainer.appendChild(track.attach());
    });

  room.on('participantConnected', participant => {
    console.log(`Participant "${participant.identity}" connected`);
    participant.tracks.forEach(publication => {
      if (publication.isSubscribed) {
        const track = publication.track;
        document.getElementById('remote-media-div').appendChild(track.attach());
        localStorage.setItem('status','live');
        this.videoStyle('remote-media-div');

      }
    });

This is the snippet of code which I am using. It is in ionic.


Solution

  • You should listen if there any participant already added in the room for the opposite site view.

    // Log any Participants already connected to the Room
    room.participants.forEach(participant => {
                    console.log(`Participant "${participant.identity}" is connected to the Room`);
                    participant.tracks.forEach(publication => {
                            if (publication.isSubscribed) {
                              document.getElementById('remote-media-div').appendChild(publication.track.attach());
                            }
                          });
    
                         participant.on('trackSubscribed', track => {
                         document.getElementById('remote-media-div').appendChild(track.attach());
                          });
                 });