How to make a video call in PHP?

Question

During times where we can’t be together physically, video conferencing helps reinforce and establish relationships by allowing us to monitor visual cues sometimes lost over the phone. Conference calls are great, but studies show that when we can’t see who’s talking, we’re more likely to get distracted by our favorite apps. Not only is video conferencing an excellent way to increase focus during meetings, but it’s also a great method for keeping in touch with family and friends during the coronavirus pandemic.

Nội dung chính Show

Technical Overview and Prerequisites
Create a new Laravel project
Add the Twilio PHP SDK to the Project
Create an API Endpoint to Generate Tokens
Create a New Controller to Generate Access Tokens
Install Laravel UI and Vue Packages
Create a New Vue.js Component
Connect the VideoChat Component to the Route
How to make phone call from PHP?
How do you make a video call in HTML?
How do you create a video call?
How can I make video call from my website?

In this tutorial you will learn how to create your own video conferencing app in Vue.js, using the Laravel framework and Twilio Programmable Video. There is no software to download, nor tutorials to follow. The final result is a link to a mobile-friendly video chat room, capable of hosting up to 50 participants.

NOTE: This tutorial is written specifically for Laravel 7+ (although it may work for previous versions).

Technical Overview and Prerequisites

When your application loads in the browser, a unique identifier is generated for the user to authenticate their connection to the chat room. Once verified by Twilio’s servers, the user will be added to the existing chat room.

Our project will use Vue.js and Laravel to generate the front and backend respectively.

In order to get started, you will need the following requirements set up and ready to go:

Composer globally installed
A Twilio account (this link will give you $10 in Twilio spend when you upgrade)

Let’s get started by creating a new Laravel project.

Create a new Laravel project

In order to create the base application, open the folder where you normally store your projects and run the following command:

$ laravel new laravel-video-chat-room && cd laravel-video-chat-room

Add the Twilio PHP SDK to the Project

We’ll need an easy method to connect to the Twilio Video API so that chat rooms and tokens can be created and authenticated for the users. Luckily, this method has already been created for us in the Twilio PHP SDK. Let’s add it as a requirement of our project using Composer.

$ composer require twilio/sdk

Create an API Endpoint to Generate Tokens

Creating APIs in Laravel is a pretty seamless process. As a modern web application framework, Laravel provides the necessary scaffolding to create the controller and route needed to generate tokens on the server-side.

Create a New Controller to Generate Access Tokens

A , or class that defines application logic, will need to be created to generate all user access tokens via the Twilio Video API. To begin, run the artisan command in your terminal for creating new controllers:

$ php artisan make:controller API/AccessTokenController

This command created a new file for us at

$ php artisan make:controller API/AccessTokenController

1.

Open the newly created controller and take a moment to inspect it. You’ll notice that right now it’s empty. Outside of a couple of namespace declarations, the artisan command has generated an empty class.

We’re now ready to add a couple of namespaces to the controller that will autoload the Twilio SDK for use. Add the following lines of code beneath the

$ php artisan make:controller API/AccessTokenController

2 namespace.
use Twilio\Jwt\AccessToken;
use Twilio\Jwt\Grants\VideoGrant;
The preceding declarations give us the support needed to actually connect to the Twilio Video API and generate an access token. Now, you need to create a method to utilize the classes declared.
Add the following 
$ php artisan make:controller API/AccessTokenController
3 method below to the $ php artisan make:controller API/AccessTokenController
4 class:
public function generate_token()
    {
        // Substitute your Twilio Account SID and API Key details
        $accountSid = env('TWILIO_ACCOUNT_SID');
        $apiKeySid = env('TWILIO_API_KEY_SID');
        $apiKeySecret = env('TWILIO_API_KEY_SECRET');

        $identity = uniqid();

        // Create an Access Token
        $token = new AccessToken(
            $accountSid,
            $apiKeySid,
            $apiKeySecret,
            3600,
            $identity
        );

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

        // Serialize the token as a JWT
        echo $token->toJWT();
    }
You’ll notice the first three lines of our method search for environment variables to define our Twilio credentials. These lines reference three variables that we haven’t defined in our dotenv 
$ php artisan make:controller API/AccessTokenController
5 file yet. Let’s open the Twilio console to access them.
You’ll need to copy the Account SID from your account dashboard. An API Key and API Secret will need to be created from your API Keys list.
All three of these values will need to be copied to the 
$ php artisan make:controller API/AccessTokenController
5 file located in the project directory as follows:
TWILIO_ACCOUNT_SID="Insert your Account SID"
TWILIO_API_KEY_SID="Insert your API Key"
TWILIO_API_KEY_SECRET="Insert your API Secret"
The last step in generating an access token is to create a route (or API endpoint) that connects to our 
$ php artisan make:controller API/AccessTokenController
4. This route will provide a publicly accessible endpoint to the application logic we previously created.
Open 
$ php artisan make:controller API/AccessTokenController
8 and add the following declaration:
Route::get('access_token', 'API\AccessTokenController@generate_token');
This line of code registers the endpoint http://127.0.0.1:8000/api/access_token and responds to the 
$ php artisan make:controller API/AccessTokenController
9 verb.
To test our work thus far, run the following artisan command in your terminal:
$ php artisan serve
The 
0 command will load the PHP web server and deploy our Laravel application locally.
Install Laravel UI and Vue Packages
Because the back-end functionality is complete for our application, we are ready to scaffold the front end. As of version 6, Laravel has decoupled the JavaScript and CSS scaffolding from the application logic, so we will need to add it back using the new Laravel UI package. Once installed, it will open up our application to easily use any popular styling or scripting framework to modify the user interface and experience.
Run the following command in your terminal:
$ composer require laravel/ui
Now that the base package has been installed, we are ready to install the Vue.js front-end scaffolding. To install, run the following:
$ composer require twilio/sdk
0
Followed by:
$ composer require twilio/sdk
1
In order to see what we’ve done and test that Vue is loaded and working, we need to update the Laravel blade responsible for displaying the homepage at 
1. Open the file and replace its contents with the following:
$ composer require twilio/sdk
2
NOTE: Because our HTML has been modified, it needs to be compiled in order to see the changes. To see your changes run 
2 again or 
3 for live reloading.
This HTML will load the 
4 file, which is responsible for transforming the 
5 div into the stage of our Vue.js UI. By default, the Laravel UI package installs an ExampleComponent which is seen on the line reading 
6. This sample Vue component simply displays some HTML rendered as:
$ composer require twilio/sdk
3
If you see this in your browser, then everything is working as expected!
Create a New Vue.js Component
Let’s create a new Vue component 
7 in the 
8 folder that will house our video chat room logic. This component will be responsible for connecting to the endpoint we created earlier and rendering the chat window.
After the component has been created, add the following code:
$ composer require twilio/sdk
4
This component will just display the title “Laravel Video Chat”. Vue.js doesn’t recognize it yet so we will need to update the 
9 blade again to display our component.
Replace the 
6 line in 
1 with use Twilio\Jwt\AccessToken;
use Twilio\Jwt\Grants\VideoGrant;
2.
Lastly, open 
use Twilio\Jwt\AccessToken;
use Twilio\Jwt\Grants\VideoGrant;
3 and add the following line of code underneath the ExampleComponent to globally define our new component:
$ composer require twilio/sdk
5
Connect the VideoChat Component to the Route
Before we make an AJAX request to our access token endpoint, the needs to be installed. This SDK, written in JavaScript, is responsible for managing all of the API requests for Twilio Programmable Video.
In your terminal, install the Twilio Programmable Video JavaScript SDK by running the following command:
$ composer require twilio/sdk
6
Now that the SDK is installed, we can add the 
use Twilio\Jwt\AccessToken;
use Twilio\Jwt\Grants\VideoGrant;
4 method to connect to our endpoint.
Replace the code in 
7 with the following:
$ composer require twilio/sdk
7
The code above defines an empty variable 
use Twilio\Jwt\AccessToken;
use Twilio\Jwt\Grants\VideoGrant;
6 and assigns it an empty string. Once the component is , use Twilio\Jwt\AccessToken;
use Twilio\Jwt\Grants\VideoGrant;
4 is called to request a new access token from use Twilio\Jwt\AccessToken;
use Twilio\Jwt\Grants\VideoGrant;
8. Upon a successful response, the data is assigned to use Twilio\Jwt\AccessToken;
use Twilio\Jwt\Grants\VideoGrant;
6.
We’re now ready to add the code which will connect us to the room we defined in our controller earlier and display a live feed from our local device.
Add the following code to the list of available methods after the 
public function generate_token()
    {
        // Substitute your Twilio Account SID and API Key details
        $accountSid = env('TWILIO_ACCOUNT_SID');
        $apiKeySid = env('TWILIO_API_KEY_SID');
        $apiKeySecret = env('TWILIO_API_KEY_SECRET');

        $identity = uniqid();

        // Create an Access Token
        $token = new AccessToken(
            $accountSid,
            $apiKeySid,
            $apiKeySecret,
            3600,
            $identity
        );

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

        // Serialize the token as a JWT
        echo $token->toJWT();
    }
0 method:
$ composer require twilio/sdk
8
The 
public function generate_token()
    {
        // Substitute your Twilio Account SID and API Key details
        $accountSid = env('TWILIO_ACCOUNT_SID');
        $apiKeySid = env('TWILIO_API_KEY_SID');
        $apiKeySecret = env('TWILIO_API_KEY_SECRET');

        $identity = uniqid();

        // Create an Access Token
        $token = new AccessToken(
            $accountSid,
            $apiKeySid,
            $apiKeySecret,
            3600,
            $identity
        );

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

        // Serialize the token as a JWT
        echo $token->toJWT();
    }
1 method takes the use Twilio\Jwt\AccessToken;
use Twilio\Jwt\Grants\VideoGrant;
6 we initialized in public function generate_token()
    {
        // Substitute your Twilio Account SID and API Key details
        $accountSid = env('TWILIO_ACCOUNT_SID');
        $apiKeySid = env('TWILIO_API_KEY_SID');
        $apiKeySecret = env('TWILIO_API_KEY_SECRET');

        $identity = uniqid();

        // Create an Access Token
        $token = new AccessToken(
            $accountSid,
            $apiKeySid,
            $apiKeySecret,
            3600,
            $identity
        );

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

        // Serialize the token as a JWT
        echo $token->toJWT();
    }
0 and creates a local video track upon successful authentication. You’ll notice that there’s also a placeholder for when a participant connects to the chat room. We’ll add that logic shortly.
For now, let’s call this method from the final 
public function generate_token()
    {
        // Substitute your Twilio Account SID and API Key details
        $accountSid = env('TWILIO_ACCOUNT_SID');
        $apiKeySid = env('TWILIO_API_KEY_SID');
        $apiKeySecret = env('TWILIO_API_KEY_SECRET');

        $identity = uniqid();

        // Create an Access Token
        $token = new AccessToken(
            $accountSid,
            $apiKeySid,
            $apiKeySecret,
            3600,
            $identity
        );

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

        // Serialize the token as a JWT
        echo $token->toJWT();
    }
4 promise in public function generate_token()
    {
        // Substitute your Twilio Account SID and API Key details
        $accountSid = env('TWILIO_ACCOUNT_SID');
        $apiKeySid = env('TWILIO_API_KEY_SID');
        $apiKeySecret = env('TWILIO_API_KEY_SECRET');

        $identity = uniqid();

        // Create an Access Token
        $token = new AccessToken(
            $accountSid,
            $apiKeySid,
            $apiKeySecret,
            3600,
            $identity
        );

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

        // Serialize the token as a JWT
        echo $token->toJWT();
    }
0 as follows:
$ composer require twilio/sdk
9
Finally, we’re ready to add the logic to display the other participants in the video chat. Replace the 
public function generate_token()
    {
        // Substitute your Twilio Account SID and API Key details
        $accountSid = env('TWILIO_ACCOUNT_SID');
        $apiKeySid = env('TWILIO_API_KEY_SID');
        $apiKeySecret = env('TWILIO_API_KEY_SECRET');

        $identity = uniqid();

        // Create an Access Token
        $token = new AccessToken(
            $accountSid,
            $apiKeySid,
            $apiKeySecret,
            3600,
            $identity
        );

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

        // Serialize the token as a JWT
        echo $token->toJWT();
    }
6 code with the following:
$ php artisan make:controller API/AccessTokenController
0
This function will listen for any new connections from remote participants, and upon connection, add them to the gallery of chat windows.
Testing
In case you haven’t done so in a while, you’ll need to re-compile the code for Vue to detect the changes we’ve made. Run 
2, make sure you’re running public function generate_token()
    {
        // Substitute your Twilio Account SID and API Key details
        $accountSid = env('TWILIO_ACCOUNT_SID');
        $apiKeySid = env('TWILIO_API_KEY_SID');
        $apiKeySecret = env('TWILIO_API_KEY_SECRET');

        $identity = uniqid();

        // Create an Access Token
        $token = new AccessToken(
            $accountSid,
            $apiKeySid,
            $apiKeySecret,
            3600,
            $identity
        );

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

        // Serialize the token as a JWT
        echo $token->toJWT();
    }
8 in a separate terminal, and refresh your browser.
Using two windows or browsers, load 
public function generate_token()
    {
        // Substitute your Twilio Account SID and API Key details
        $accountSid = env('TWILIO_ACCOUNT_SID');
        $apiKeySid = env('TWILIO_API_KEY_SID');
        $apiKeySecret = env('TWILIO_API_KEY_SECRET');

        $identity = uniqid();

        // Create an Access Token
        $token = new AccessToken(
            $accountSid,
            $apiKeySid,
            $apiKeySecret,
            3600,
            $identity
        );

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

        // Serialize the token as a JWT
        echo $token->toJWT();
    }
9 and wait for your participants to connect.
Conclusion
This tutorial has not only taught us how to implement Twilio’s Programmable Video, but it also helped us to develop a starter Video Chat application. If you’re interested in extending this code further, you could:
Display the number of participants
Hide the chat room behind a secure portal/wall
Add a text-chat feature
With all of the world turning towards remote work and video-conferencing, there’s no better time than now to have your own custom implementation. I can’t wait to see what you build!
Marcus Battle is Twilio’s PHP Developer of Technical Content where he prompts and rallies PHP developers to build the future of communications. You can download the full repo from Github or contact him for any questions regarding this tutorial at:
 
How to make phone call from PHP?
Create your PHP file. Create a new file named make-call. php and paste the provided "make-call. php" code into the file.
How do you make a video call in HTML?
Place the necessary elements in video-chat-min.html:.
 Import the script of the main API: ... .
 Import the script of video chat: ... .
 Add styles to properly display video in div elements: ... .
 Initialize the API on page load: ... .
 Add a div element in which the levitra professional local (your) video stream will be displayed:.
 
How do you create a video call?
Start a video or voice call.
 Open the Google Duo app ..
 At the top, search contacts or dial a number..
 Tap the contact or number to call..
 Choose an option: To make a video call, tap Call. To make an audio-only call, tap Voice call ..
 
How can I make video call from my website?
Adding a Video Chat Embed to your web page.
 With your web page HTML open in an editor, copy the embed code from your Video API account and paste it in the body of your HTML. ... .
 Save the HTML and load it in your browser. ... .
 Click the button and you should connect to the video chat room..

How to make a video call in PHP?

Technical Overview and Prerequisites

Create a new Laravel project

Add the Twilio PHP SDK to the Project

Create an API Endpoint to Generate Tokens

Create a New Controller to Generate Access Tokens

Install Laravel UI and Vue Packages

Create a New Vue.js Component

Connect the VideoChat Component to the Route

Testing

Conclusion

How to make phone call from PHP?

How do you make a video call in HTML?

How do you create a video call?

How can I make video call from my website?

Bài Viết Liên Quan

Có thể bạn quan tâm

Xem Nhiều

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội