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.
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
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.