browser-calls-flask icon indicating copy to clipboard operation
browser-calls-flask copied to clipboard

A sample application which shows you how to make and receive phone calls with a browser and Twilio Client

Twilio

Browser Calls for Python - Flask

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

About

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!

Create a TwiML App

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.

Local development

This project is built using the Flask web framework. It runs on Python 2.7+ and Python 3.4+.

  1. To run the app locally, first clone this repository and cd into it.

  2. Create and activate a new python3 virtual environment.

    python3 -m venv venv
    source venv/bin/activate
    
  3. Install the requirements using pip.

    pip install -r requirements.txt
    
  4. Copy the .env.example file to .env, and edit it including your credentials for the Twilio API (found at https://www.twilio.com/user/account/settings). You will also need a Twilio Number and TwiML App SID you made above. You will also need a SECRET_KEY.

  5. Run source .env to apply the environment variables (or even better, use autoenv)

  6. Run the migrations.

    python manage.py db upgrade
    
  7. Modify seed data.

    We have provided an example of name and phone number in the seed data. In order for the application to send SMS notifications, you must edit this seed data providing a real phone number where you want the SMS notifications to be received.

    In order to do this, you must modify this file that is located at: project_root/manage.py

  8. Seed the database.

    python manage.py dbseed
    
  9. Start ngrok.

    To actually forward incoming calls, your development server will need to be publicly accessible. We recommend using ngrok to solve this problem.

    ngrok http 5000
    

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

    http://[your-domain].ngrok.io/support/call
    
  10. Start the development server.

    python manage.py runserver
    

Once ngrok is running, open up your browser and go to your ngrok URL.

That's it!

Run the tests

You can run the tests locally through coverage:

  1. Run the tests.

    FLASK_ENV=testing manage.py test
    

Meta

  • No warranty expressed or implied. Software is as is. Diggity.
  • MIT License
  • Lovingly crafted by Twilio Developer Education.