twiliodeved / voice-javascript-sdk-quickstart-php

Twilio Client Quickstart for PHP

This template is part of Twilio CodeExchange. If you encounter any issues with this code, please open an issue at github.com/twilio-labs/code-exchange/issues.

About

This application should give you a ready-made starting point for writing your own voice apps with the Twilio Voice JavaScript SDK (formerly known as Twilio Client).

Once you set up the application, you will be able to make and receive calls from your browser. You will also be able to switch between audio input/output devices and see dynamic volume levels on the call.

Implementations in other languages:

.NET	Java	Python	Ruby	Node
Done	Done	Done	Done	Done

Set up

Requirements

• PHP >= 7.2.5 and composer
• ngrok
• A Twilio account - sign up

Twilio Account Settings

Before we begin, we need to collect all the config values we need to run the application.

Config Value	Description
TWILIO_ACCOUNT_SID	Your primary Twilio account identifier - find this in the console here.
TWILIO_TWIML_APP_SID	The TwiML application with a voice URL configured to access your server running this app - create one in the console here. Also, you will need to configure the Voice "REQUEST URL" on the TwiML app once you've got your server up and running.
TWILIO_CALLER_ID	A Twilio phone number in E.164 format - you can get one here
API_KEY / API_SECRET	Your REST API Key information needed to create an Access Token - create an API key here. The API_KEY value should be the key's SID.

Local Development

1. Clone this repository and cd into it

   git clone https://github.com/TwilioDevEd/voice-javascript-sdk-quickstart-php.git
   cd voice-javascript-sdk-quickstart-php

2. Install PHP dependencies

   make install

3. Download the Twilio Voice JavaScript SDK code from GitHub.

   In a production environment, we recommend using npm to install the SDK. However, for the purposes of this quickstart, we are not introducing Node or build tools, and are instead getting the SDK code directly from GitHub.

   See the instructions here for downloading the SDK code from GitHub. You will download a zip or tarball for a specific release version of the Voice JavaScript SDK (ex: 2.0.0), extract the files, and retrieve the twilio.min.js file from the dist/ folder. Move that twilio.min.js file into this directory (the main voice-javascript-sdk-quickstart-php directory).

4. Create a configuration file for your application by copying the .env.example file to a new file called .env. Then, edit the .env file to include your account and application details.

   cp .env.example .env

   See Twilio Account Settings to locate the necessary environment variables.

5. Run the application. It will run locally on port 8000.

   make serve

6. Expose your application to the wider internet using ngrok. You can click here for more details. This step is important and your application won't work if you only run the server on localhost.

   ngrok http 8000

7. When ngrok starts up, it will assign a unique URL to your tunnel. It might be something like https://asdf456.ngrok.io. Take note of this.

8. Configure your TwiML app's Voice "REQUEST URL" to be your ngrok URL plus /voice.php. For example:

   

Note: You must set your webhook urls to the https ngrok tunnel created.

You should now be ready to rock! Open a browser to localhost:8000 and make some phone calls. Open it on another device and call yourself. Note that Twilio Client requires WebRTC enabled browsers, so Edge and Internet Explorer will not work for testing. We'd recommend Google Chrome or Mozilla Firefox instead.

Your Web Application

When you navigate to localhost:8000, you should see the web application containing a "Start up the Device" button. Click this button to initialize a Twilio.Device.

When the Twilio.Device is initialized, you will be assigned a random client name, which will appear in the top left corner of the homepage. This client name is used as the identity field when generating an access token for the client, and is also used to route incoming calls to the correct client device.

To make an outbound call to a phone number:

Under "Make a Call", enter a phone number in E.164 format and press the "Call" button.

To make a browser-to-browser call:

Open two browser windows to localhost:8000 and click "Start up the Device" button in both windows. You should see a different client name in each window.

Enter one client's name in the other client's "Make a Call" input field, and press the "Call" button.

Receiving incoming calls from a non-browser device:

You will first need to configure your Twilio Voice phone number (the phone number you used as the TWILIO_CALLER_ID configuration value) to route to your TwiML app. This tells Twilio how to handle an incoming call directed to your Twilio Voice number.

1. Log in to the Twilio Console
2. Navigate to your Active Number list
3. Click on the number you are using as your TWILIO_CALLER_ID.
4. Scroll down to find the "Voice & Fax" section and look for "CONFIGURE WITH".
5. Select "TwiML App".
6. Under "TwiML App", choose the TwiML App you created earlier for this quickstart.
7. Click the "Save" button at the bottom of the browser window.

You can now call your Twilio Voice phone number from your phone.

Note: Since this is a quickstart with limited functionality, incoming calls will only be routed to your most recently created Twilio.Device.

Unknown Devices

If you see "Unknown Audio Output Device 1" in the "Ringtone" or "Speaker" devices lists, click the button below the boxes (Seeing "Unknown" Devices?) to have your browser identify your input and output devices.

Docker

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 and that Docker is running on your machine.
2. Retrieve the twilio.min.js file and move it to the project's root directory as outlined in Step 3 of the Local Development steps.
3. Setup the .env file as outlined in Step 4 of the Local Development steps.
4. Run docker-compose up.
5. Follow the steps in Local Development on how to expose your port to Twilio using ngrok and configure the remaining parts of your application.

Unit and Integration Tests

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

bin/phpunit tests

Cloud deployment

Additionally to trying out this application locally, you can deploy it to a variety of host services. Here is a small selection of them.

Please be aware that some of these might charge you for the usage or might make the source code for this application visible to the public. When in doubt research the respective hosting service first.

Service
Heroku

Resources

• The CodeExchange repository can be found here.

Contributing

This template is open source and welcomes contributions. All contributions are subject to our Code of Conduct.

Visit the project on GitHub

License

MIT

Disclaimer

No warranty expressed or implied. Software is as is.

voice-javascript-sdk-quickstart-php's Issues

Access Token expires after a few hours

The active Twilio device lasts only a few hours until "Twilio.Device Error: AccessTokenExpired (20104): The Access Token provided to the Twilio API has expired, the expiration time specified in the token was invalid, or the expiration time specified was too far in the future"

It can't be the intended functionality to only have a device session that lasts one or two hours. Any input is appreciated regarding ways to make longer sessions (a day, a week, a month?).

Thank you!

ConnectionError

Set up following instructions, and can load page from the ngrok url. When I click "Start up the device", I get a user name on the left side, but nothing else except a very generic error log:

`Requesting Access Token...

Got a token.

Initializing device

Twilio.Device Error: ConnectionError (53000): Raised whenever a signaling connection error occurs that is not covered by a more specific error code. `

The last messages in the console before the error are: WebSocket opened successfully. ... Setting token and publishing listen

Any advice?

Popup on every page?

I am having great success with this project and integrating it with an existing custom CRM. Is there a code sample or an upgrade or something that would allow us to turn this into a popup when calls come in that is visible on every page of the CRM as opposed to only being on a separate page? Also, if we are using this for multiple Twilio numbers can the name associated with the Twilio number also be displayed when a call comes in?

Incoming calls fail

Followed all instructions - outgoing calls work fine. Incoming calls (using ngrok) result in this error: 12100 - Document parse failure Undefined variable $_SESSION on line 15 of voice.php
Tried adding session_start(); to the top of voice.php
Then get 12100 - Document parse failure Undefined array key "identity" on line 16 of voice.php

Any tips? On the main page, I see a random name generated at "Your client name: XxxYyyZzz"

Call Recording

How do I retrieve the call recording URL was the call has been completed?

Voice Quality Issue During Calls Using JavaScript SDK

I'm having trouble with the Voice JavaScript SDK when making calls to customers or clients. While talking to them, their voices often become unclear or even cut off completely. But when I listen to the recordings afterward, their voices sound fine.
When I'm on a call, the other person's voice sometimes gets hard to hear or disappears altogether.

This problem keeps happening every time I make calls using the Voice JavaScript SDK.

This issue is causing a lot of trouble as it's difficult to have good conversations with clients. I really need help fixing this problem so I can communicate better.

I would really appreciate it if you could help me solve this problem. If you need more information or anything else from me, just let me know.

Thank you,

Twilio Number Receiving Call not Being Displayed

When an incoming call comes in the number of the person that is calling is showing up but not the Twilio number they are calling. It says for examp;e 250-111-1234 to _______. How would I fix this?

Also related to this, is there a way to display the Friendly Name of the Twilio Number in this space as well as the Twilio number the person is calling?

Call Not Hanging Up

When an incoming call comes in and the call is rejected and the person making the incoming call does not hang up, the browser reinitiates the request to connect the call even though reject has been pushed. Is there a way to correct this?

Also, if reject is pressed how do I modify this code to be able to send the call to voicemail?