Twilio Voice JavaScript SDK Quickstart for C#

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 Twilio Voice JavaScript SDK 2.0 (Formerly known as Twilio Client).

This application is built in ASP.NET Core 3.1.

Implementations in other languages:

Node.js	Java	Python	PHP	Ruby
Done	Done	Done	Done	Done

Set Up

Requirements

• Visual Studio 2019/Visual Studio for Mac 2019
• .NET Core 3.1 SDK with ASP.NET Core Runtime 3.1
• ngrok - this is used to expose your local development server to the internet. For more information, read this Twilio blog post.
• A WebRTC enabled browser (Google Chrome or Mozilla Firefox are recommended). Edge and Internet Explorer will not work for testing.

Create a TwiML Application, Purchase a Phone Number, Create an API Key

1. Create a TwiML Application in the Twilio Console. Once you create the TwiML Application, click on it in your list of TwiML Apps to find the TwiML App SID. You will save this SID later to your user-secrets. Note: You will also need to configure the Voice "REQUEST URL" in your TwiML App later.

   • For detailed instructions with screenshots, see the Create a TwiML App.md file

2. Purchase a Voice phone number. You will need this phone number in E.164 format for your user-secrets.

   • For detailed instructions with screenshots, see the Buy a Phone Number.md file

3. Create an API Key in the Twilio Console. Keep the API Key SID and the API Secret in a safe place, since you will need them for your user-secrets. Your API KEY is needed to create an Access Token.

   • For detailed instructions with screenshots, see the Create an API Key.md file

Gather Config Values for your User Secrets

Before we begin local development, we need to collect all the config values we need to run the application. These values will be used in Step 2 below by saving them to your .NET User Secrets.

Config Value	Description
AccountSid	Your primary Twilio account identifier - find this in the Twilio Console here.
AuthToken	Your Twilio Account Auth Token - find this in the Twilio Console below your Account SID
TwimlAppSid	The SID of the TwiML App you created in step 1 above. Find the SID in the Twilio Console here.
CallerId	Your Twilio phone number in E.164 format - you can find your number here
ApiSid / ApiSecret	The ApiSid is the API Key SID you created in step 3 above, and the ApiSecret is the secret associated with that key.

Local development

1. First clone this repository and cd into it:

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

2. Enable DotNet User Secrets. First, navigate to the Quickstart directory:

   cd Quickstart

   Run the following command to use User Secrets in your application:

   dotnet user-secrets init

   If you open the Quickstart.csproj file, you should now see something like the following:

   <PropertyGroup>
       <TargetFramework>netcoreapp3.1</TargetFramework>
       <UserSecretsId>some-guid-here</UserSecretsId>
   </PropertyGroup>

   Next, we'll save our configuration values using User Secrets.

   Run each of the following commands in your terminal, making sure you've replaced the BOILERPLATE_TEXT with your actual configuration values we gathered earlier.

   dotnet user-secrets set TwilioAccountDetails:AccountSid YOUR_ACCOUNT_SID

   dotnet user-secrets set TwilioAccountDetails:AuthToken YOUR_AUTH_TOKEN

   dotnet user-secrets set TwilioAccountDetails:TwimlAppSid YOUR_TWIML_APP_SID

   dotnet user-secrets set TwilioAccountDetails:CallerId YOUR_CALLERID

   dotnet user-secrets set TwilioAccountDetails:ApiSid YOUR_API_SID

   dotnet user-secrets set TwilioAccountDetails:ApiSecret YOUR_API_SECRET

   To check that all of your secrets have been saved properly, run the following command:

   dotnet user-secrets list

   To learn more about User Secrets, check out the Twilio Blog post called "User Secrets in a .NET Core Web App".

3. Run the Project. A new browser tab should open http://localhost:5000.

4. Expose your application to the wider internet using ngrok. This step is crucial for the app to work as expected.

   ngrok http 5000

5. ngrok will assign a unique URL to your tunnel. It might be something like https://asdf456.ngrok.io. You will need this to configure your TwiML app in the next step.

6. Configure your TwiML app

   • In the Twilio Console, navigate to Programmable Voice > TwiML > TwiML Apps
   • Select the TwiML App you created earlier
   • On your TwiML App's information page, find the 'Voice Configuration' section.
   • Change the Request URL to your ngrok url with /voice appended to the end. (E.g: https://asdf456.ngrok.io/voice) Note: You must use the https URL, otherwise some browsers will block microphone access.
   • Click the 'Save' button.

   

You should now be ready to make and receive calls from your browser.

Your Web Application

When you navigate to localhost:5000, 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 'Device Info' column on the left side of the page. This client name is used as the identity field when generating an Access Token for the Twilio.Device, and is also used to route SDK-to-SDK calls to the correct Twilio.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:5000 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 and press the 'Call' button.

Receiving Incoming Calls from a Non-Browser Device

You will first need to configure your Twilio Voice Phone Number to use the TwiML App we created earlier. This tells Twilio how to handle an incoming call directed to your Twilio Voice Number.

1. Log in to your Twilio Console
2. Navigate to your Active Numbers list
3. Click on the number you purchased earlier
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.
7. Click the 'Save' button at the bottom of the browser window.

You can now call your Twilio Voice Phone Number from your cell or landline phone.

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

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

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.

License

MIT

Disclaimer

No warranty expressed or implied. Software is as is.