This repository is now archived and is no longer being maintained. Check out the JavaScript SDK Quickstarts to get started with browser-based calling.

Learn how to use Twilio's JavaScript SDK to make browser-to-phone and browser-to-browser calls with ease. The unsatisfied customers of the Birchwood Bicycle Polo Co. need your help!

• PHP >= 7.2.5 and composer
• Node.js
• SQLite
• A Twilio account - sign up

This application should give you a ready-made starting point for writing your own application. Before we begin, we need to collect all the config values we need to run the application:

This project is configured to use a TwiML App, which allows us to easily set the voice URLs for all Twilio phone numbers we purchase in this app.

Create a new TwiML app at https://www.twilio.com/console/voice/twiml/apps and use its Sid as the TWILIO_APPLICATION_SID environment variable wherever you run this app.

Once you have created your TwiML app, configure your Twilio phone number to use it (instructions here).

If you don't have a Twilio phone number yet, you can purchase a new number in your Twilio Account Dashboard.

After the above requirements have been met:

1. Clone this repository and cd into it

   git clone git@github.com:TwilioDevEd/browser-calls-laravel.git
   cd browser-calls-laravel

2. Install PHP dependencies

   make install

3. Set your environment variables

   cp .env.example .env

   See Twilio Account Settings to locate the necessary environment variables.

4. Install Node dependencies

   npm install 

5. Build the frontend assets

   npm run dev

6. Run the application

   php artisan serve

7. Run the application

   make serve

8. Expose the application to the wider Internet using ngrok

   $ ngrok http 8000

   Once you have started ngrok, update your TwiML app's voice URL setting to use your ngrok hostname, so it will look something like this:

   https://<your-ngrok-subdomain>.ngrok.io/support/call
   

9. To create a support ticket go to the home page. On this page you could fill some fields and create a ticket or you can call to support.

   https://<your-ngrok-subdomain>.ngrok.io
   

   Note: Make sure you use the https version of your ngrok URL as some browsers won't allow access to the microphone unless you are using a secure SSL connection.

10. To respond to support tickets go to the dashboard page (you should open two windows or tabs). On this page you could call customers and answers phone calls.

    https://<your-ngrok-subdomain>.ngrok.io/dashboard
    

    That's it!

If you have Docker already installed on your machine, you can use our docker-compose.yml to setup your project.

1. Make sure you have the project cloned.
2. Setup the .env file as outlined in the Local Development steps.
3. Run docker-compose up.
4. Follow the steps in Local Development on how to expose your port to Twilio using a tool like ngrok and configure the remaining parts of your application

You can run the Unit and Feature tests locally by typing:

php artisan test

• The CodeExchange repository can be found here.

MIT

No warranty expressed or implied. Software is as is.