Code Monkey home page Code Monkey logo

browser-calls-csharp's Introduction

Twilio

Browser Calls (ASP.NET MVC)

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!

Set up

Requirements

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

Twilio Account Settings

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.

Local development

After the above requirements have been met:

  1. Clone this repository and cd into it
git clone [email protected]:TwilioDevEd/browser-calls-csharp.git
cd browser-calls-csharp
  1. Set your configuration variables
cd BrowserCalls.Web
copy Web.config.sample Web.config

See Twilio Account Settings to locate the necessary environment variables.

  1. Build the solution

  2. Run Update-Database at Package Manager Console to execute the migrations.

  3. Run the application

  4. Run ngrok (or use the ngrok Visual Studio extension)

ngrok http -host-header="localhost:9932" 9932

Learn 6 awesome reasons why to use ngrok.

  1. 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 https ngrok tunnel created.

That's it!

Try it out

  1. 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.io
    

    Note: Make sure you use the https version of your ngrok URL as some browsers won't allow access to the microphone unless you are using a secure SSL connection.

  2. 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
    
    

Resources

  • The CodeExchange repository can be found here.

License

MIT

Disclaimer

No warranty expressed or implied. Software is as is.

browser-calls-csharp's People

Contributors

acamino avatar atbaker avatar bld010 avatar dependabot-preview[bot] avatar dprothero avatar hortega avatar jonedavis avatar kwhinnery avatar maylonpedroso avatar smendes avatar well1791 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

browser-calls-csharp's Issues

Code Exchange quality checklist

The purpose of this checklist is to assess the state of this repository, and bring it to an acceptable level for long-term support by completing the tasks listed below.

Please check every part of this checklist for us to process your request. You can do this by marking them with [x] instead of [ ].

Documentation

  • Twilio LICENSE exists in repository

  • Code of Conduct exists in repository

  • CONTRIBUTING exists in repository

  • No broken links in README.md

  • Build status exists at top of README.md

  • Set up steps are complete and accurate

  • CodeExchange repository is linked in README.md

GitHub

  • Dependabot set up

  • Dependabot automerge set up

  • Uses GitHub Actions (required for Twilio sample) or other CI

Code

  • Packages/dependencies are up to date

  • Code compiles against latest packages/dependencies

  • Matches CodeExchange Guidelines to the best of ability

Tests

  • Functionality tests have been created

  • All tests pass

App

  • Confirmed sample behaves as expected (after dependencies have been updated)

  • This file has been copied into a wiki entry for the respective repository or added as a GitHub issue

General

  • I've read and followed the contribution guidelines

  • I've read and implemented my template according to the respective coding guidelines for my project

  • I agree and adhere to the Code of Conduct

  • The template has been authored by me / or my organization and will be kept up-to-date. If the template will not longer be maintained, I'll notify this project.

Jquery not loading

Hi there,

I'm attempting to get this running as a template for voice development with twilio. However, when I run it and navigate to the home page, I'm faced with this javascript error in my console

Uncaught ReferenceError: $ is not defined <anonymous> https://b4f8-67-240-52-42.ngrok.io/Scripts/browser-calls.js:7

It appears as though jQuery isn't actually loading (see below for console output).

>> typeof jQuery

"undefined"

Before I try to hack it together, is there something I'm missing?

new to twilio - .net sample code challenges

When I try to make a call Chrome console says "A connection error occurred during the call" as well as the audio that an error had occurred. If I check in the Twilio Debugger, it says Error - 12100 Document parse failure. It seems to be expecting an XML post but is getting the entire document posted to the server. I have not made any changes except the web config.

Mitigate need to use View path in Tickets controller

Using the string path to the Home view form the Tickets controller is pretty brittle.

https://github.com/TwilioDevEd/browser-calls-csharp/blob/master/BrowserCalls.Web/Controllers/TicketsController.cs#L30

I can see two options here that might be better:

  • Move the Index view currently loaded by the HomeController to the Tickets controller and change the default route
  • Move the Index view currently loaded by the HomeController to the Tickets controller and use Attribute routing to apply both ad default and a specific route to it

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.