[FIXED] When two people join my Twilio Video room, only one participant receives audio and video?

Issue

Every time participant 2 shows up, their audio and camera recording shows up on participant 1's screen. But participant 1's audio/video doesn't show up on participant 2's screen. So whoever is the first person to join their video and audio isn't transmitted to the other participants?

<h1>Hi there!</h1>
<div class="videos">
  <div id="video-container"></div>
</div>
<div id="remote-media-div">
</div>



<?php
include('./vendor/autoload.php');
include('./config.php');

use Twilio\Jwt\AccessToken;
use Twilio\Jwt\Grants\VideoGrant;

// Use identity and room from query string if provided

$identity = isset($_GET["identity"]) ? $_GET["identity"] : "identity" . rand();
$room = isset($_GET["room"]) ? $_GET["room"] :  "testingreal";

// Create access token, which we will serialize and send to the client
$token = new AccessToken(
    $TWILIO_ACCOUNT_SID,
    $TWILIO_API_KEY,
    $TWILIO_API_SECRET,
    3600,
    $identity
);

// Grant access to Video
$grant = new VideoGrant();
$grant->setRoom($room);
$token->addGrant($grant);

echo $token->toJWT();

?>



<script src="//media.twiliocdn.com/sdk/js/video/releases/2.7.3/twilio-video.min.js"></script>

<script>

var Video = Twilio.Video;
console.log(Video);


var connect = Video.connect;

Video.connect('<?=$token->toJWT()?>', { name: 'testingreal' }).then(room => {
  console.log('Conmnected to Room "%s"', room.name);

    room.on('participantConnected', participant => {
    console.log(`Participant "${participant.identity}" connected`);
    console.log('testing 213');

    participant.tracks.forEach(publication => {

        if (publication.isSubscribed) {
        const track = publication.track;
        document.getElementById('remote-media-div').appendChild(track.attach());
        }
    });

    participant.on('trackSubscribed', track => {
        document.getElementById('remote-media-div').appendChild(track.attach());
    });
    });  


});

The logging I inserted in the room.on('participantConnected', participant => { //code } doesn't show up when I first join the room as participant 1. But I notice once participant 2 shows up the logging does appear. So I am wondering how I set the room.on('participantConnected') code to execute right when the first participant joins, and not the 2nd.

Solution

Twillio video is just based on peer to peer connection. To be more than 2~4+ users in a room it should be based on SFU and MCU methodology.

Here is the link for more details.

• [ https://medium.com/linagora-engineering/scalability-in-video-conferencing-part-1-276f52b4acac ]

p2p connection is always working well with 1:1 connection but as you can read in the above article it should be based on SFU or MCU to be more than 3+ participants. Actually hangout and zoom are also based on MCU.

Answered By - web-sudo

Answer Checked By - Pedro (PHPFixing Volunteer)