We are currently in the process of updating this sample template. If you are encountering any issues with the sample, please open an issue at github.com/twilio-labs/code-exchange/issues and we'll try to help you.
Learn how to use Twilio Client to make browser-to-phone and browser-to-browser calls with ease. The unsatisfied customers of the Birchwood Bicycle Polo Co. need your help.
Implementations in other languages:
| PHP | Java | Python | Ruby | Node |
|---|---|---|---|---|
| Done | Done | Done | Done | Done |
- .NET Framework
- A Twilio account - sign up
- ngrok
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 and save its Sid. You will need it to setup your app settings.
Using the twilio-cli ?
twilio api:core:applications:create --friendly-name browser-calls --voice-url [your-app-url]
If not you can do it at https://www.twilio.com/console/voice/twiml/apps/create See the end of the "Local development" section for details on the exact URL to use in your TwiML 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 the Twilio Console.
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:
| Config Value | Description |
|---|---|
TwilioAccountSid |
Your primary Twilio account identifier - find this in the console here. |
TwilioTwimlAppSid |
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. |
TwilioCallerId |
A Twilio phone number in E.164 format - you can get one here |
TwilioApiKey / TwilioApiSecret |
Your REST API Key information needed to create an Access Token - create one here. |
After the above requirements have been met:
- Clone this repository and
cdinto it
git clone git@github.com:TwilioDevEd/browser-calls-csharp.git
cd browser-calls-csharp- Set your configuration variables
cd BrowserCalls.Web
copy Web.config.sample Web.configSee Twilio Account Settings to locate the necessary environment variables.
-
Build the solution
-
Run
Update-Databaseat Package Manager Console to execute the migrations. -
Run the application
-
Run ngrok (or use the ngrok Visual Studio extension)
ngrok http -host-header="localhost:9932" 9932- 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/Call/Connect
If you make changes to your ASP.NET application and restart it, there is no need to restart the ngrok tunnel. Leaving it running will avoid getting a new ngrok subdomain and requiring you to update your TwiML app's voice URL.
Note: You must set your webhook urls to the
httpsngrok tunnel created.
That's it!
-
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.ioNote: Make sure you use the
httpsversion of your ngrok URL as some browsers won't allow access to the microphone unless you are using a secure SSL connection. -
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
- The CodeExchange repository can be found here.
This template is open source and welcomes contributions. All contributions are subject to our Code of Conduct.
No warranty expressed or implied. Software is as is.