Twilio Room was created using the below code, but not able to produce any output, it is showing everything is working fine, but not able to know how can i proceed forward so I can add multiple participants and can make a video call for each other. it asks for the camera and mike permission but not able to see the video. thanks in advance if you see any mistake please ignore it
require_once ./vendor/autoload.php;
use TwilioRestClient;
// use TwilioTwiMLVoiceResponse;
// Find your Account SID and Auth Token at twilio.com/console
// and set the environment variables. See http://twil.io/secure
$sid = "AC3c0f477f066042308c088574dae7bf9a";
$token = "8c7e575ac24e6e6f924bbaa22c42bbb4";
$twilio = new Client($sid, $token);
$room = $twilio->video->v1->rooms
->create([
"statusCallback" => "http://example.org",
"type" => "peer-to-peer",
"uniqueName" => "DailyStandup227"
]
);
print_r($room);
*After this I generated the access token
<?php
// Get the PHP helper library from https://twilio.com/docs/libraries/php
require_once './vendor/autoload.php';// Loads the library
use TwilioJwtAccessToken;
use TwilioJwtGrantsChatGrant;
use TwilioJwtGrantsVideoGrant;
// Required for all Twilio access tokens
$twilioAccountSid = 'AC3c0f477f066042308c088574dae7bf9a';
$twilioApiKey = 'SKb30ca8d445b8bd68479c54c2544fa1b4';
$twilioApiSecret = 'ixmFdysnjHRuXgXCTOQwl4I4OIsPa27l';
// Required for Chat grant
$roomName = 'DailyStandup221';
// choose a random username for the connecting user
$identity = "amirIshaque";
// Create an access token, which we will serialize and send to the client
$token = new AccessToken(
$twilioAccountSid,
$twilioApiKey,
$twilioApiSecret,
3600,
$identity
);
// Create Voice grant
$videoGrant = new VideoGrant();
$videoGrant->setRoom($roomName);
// Add grant to token
$token->addGrant($videoGrant);
// render token to string
echo $token->toJWT();
** then by using the above access token and room **
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My Website</title>
<!-- <link rel="stylesheet" href="./style.css"> -->
<!-- <link rel="icon" href="./favicon.ico" type="image/x-icon"> -->
</head>
<body>
<main>
<h1>Welcome to My Website</h1>
<div id="container"></div>
<Response>
<Dial><Conference>DailyStandup18</Conference></Dial>
<Response>
</main>
<!-- <script src="./twilio-video.min.js"></script> -->
<script src="./twilio-video.min.js"></script>
<script>
const Video = Twilio.Video;
console.log('$TOKEN',Video);
Video.connect('eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiIsImN0eSI6InR3aWxpby1mcGE7dj0xIn0.eyJqdGkiOiJTS2IzMGNhOGQ0NDViOGJkNjg0NzljNTRjMjU0NGZhMWI0LTE2NjY0NDcyMDMiLCJpc3MiOiJTS2IzMGNhOGQ0NDViOGJkNjg0NzljNTRjMjU0NGZhMWI0Iiwic3ViIjoiQUMzYzBmNDc3ZjA2NjA0MjMwOGMwODg1NzRkYWU3YmY5YSIsImV4cCI6MTY2NjQ1MDgwMywiZ3JhbnRzIjp7ImlkZW50aXR5IjoiYW1pcklzaGFxdWUiLCJ2aWRlbyI6eyJyb29tIjoiRGFpbHlTdGFuZHVwMjIxIn19fQ.f-yld_8HU_HX6f1NVuwxSOIq3KEcuh6sWWhms6bar14', { name: 'DailyStandup227' }).then(room => {
console.log(room);
console.log('Connected to Room "%s"', room.name);
console.log(room.participants);
room.participants.forEach(participantConnected);
room.on('participantConnected', participantConnected);
room.on('participantDisconnected', participantDisconnected);
room.once('disconnected', error => room.participants.forEach(participantDisconnected));
alert('5');
});
// Twilio.Video
// .createLocalVideoTrack()
// .then(track => {
// const container = document.getElementById('container');
// container.appendChild(track.attach());
// });
function participantConnected(participant) {
console.log('Participant "%s" connected', participant.identity);
alert('1');
const div = document.createElement('div');
div.id = participant.sid;
div.innerText = participant.identity;
participant.on('trackSubscribed', track => trackSubscribed(div, track));
participant.on('trackUnsubscribed', trackUnsubscribed);
participant.tracks.forEach(publication => {
if (publication.isSubscribed) {
trackSubscribed(div, publication.track);
}
});
document.body.appendChild(div);
}
function participantDisconnected(participant) {
alert('2');
console.log('Participant "%s" disconnected', participant.identity);
document.getElementById(participant.sid).remove();
}
function trackSubscribed(div, track) {
alert('3');
div.appendChild(track.attach());
}
function trackUnsubscribed(track) {
alert('4');
track.detach().forEach(element => element.remove());
}
</script>
<!-- <script src="index.js"></script> -->
</body>
</html>