Prepare your Twilio Console by pinning the following products:
- Voice
- Phone Numbers
- TwiML Bins
- Functions
- Buy a Twilio Phone Number in the Console.
You'll use this for your outbound callerId. You can also use this as your inbound phone number.
- Create a TwiML Bin with the following TwiML:
<?xml version="1.0" encoding="UTF-8"?>
<Response>
<Say>Hello<Say>
<Hangup />
</Response>- Copy the URL for this endpoint.
Pro Tip: Keep it simple (no <Dial yet) to help isolate any issues that may arise.
Note: The Voice JavaScript SDK Quickstarts show examples of using your own server to provide TwiML instructions to Twilio.
-
Create a TwiML App in the Twilio Console and set the Voice Configuration URL to your TwiML endpoint's URL.
-
Copy the SID of this TwiML App. Paste it in a note file/sticky note.
For more detailed instructions, see the Node.js Quickstart Repo.
-
Copy and paste these into your note file/sticky note. (Keep them secret!)
For more detailed instructions, see the Node.js Quickstart Repo.
- Copy the contents of the `accessTokenEndpoint.js` file in this repo and deploy a public Twilio Function. You will need to include the **TwiML App SID**, **API Key and Secret**, and your **Twilio Account SID** in the Twilio Function's Environment Variables in order to generate AccessTokens.
- Copy the URL for this endpoint.
This example assumes that you'll pass the end user's identity as a query parameter when you make the request for the AccessToken.
For examples of creating AccessTokens in a different programming language, check out the Quickstarts.
Before you can use the Voice JavaScript SDK, you'll need to fetch an AccessToken from your server-side endpoint. A good time to do this is when you'd make other API calls (i.e. once your "Phone" component has been mounted on the DOM).
**Pro Tip:** Before trying to use the SDK, debug your AccessToken on [jwt.io](https://jwt.io/) and verify that it contains all of the necessary information. [See the Access Tokens page for more information.](https://www.twilio.com/docs/iam/access-tokens#create-an-access-token-for-voice)
**Note on Regional:** If you're trying to use the JS SDK in a non-US region, read the [Build a web app using the JavaScript Voice SDK page ](https://www.twilio.com/docs/global-infrastructure/use-the-programmable-voice-javascript-sdk-with-a-non-us-twilio-region)first!
- Run the following command in your terminal in the root of your project.
npm install @twilio/voice-sdk –save- Import the Device class into your JavaScript project:
import { Device } from '@twilio/voice-sdk';- Create a new Device instance with your AccessToken. Add an 'error' event listener.
const device = new Device(accessToken);
device.addListener('error', (twilioError) = {
console.log(`Twilio Device error: ${twilioError.message}`);
})Note: Do not create more than one Device instance. Keep track of this one in a variable or in the component's state or your state management tool.