How to receive a browser call using twilio to a phone number using javascript

Question

Ok guys, I've been viewing twilio tutorials for the last couple hours and I seem to just not get it. Can someone give me a basic rundown on how to do the following?

I want to create an app that uses the microphone/speaker of my computer to receive a call.

I have a twilio account with a twilio voice phone # but I just don't seem to get how to connect a JS Device object to a phone #. I think it has something to do with a capability/auth token but can someone give me a step by step on how a phone # can be called and the headset will receive a voice call and begin the conversation. The tutorials show how you can make twilio speak a written statement in twiML but I don't understand how to make it make an actual voice call.

My current guess is that I need to do the following in the browser to accept a call. But I'm not sure what needs to be inside the token.

//I don't know what needs to be in the token in order to connect this 
//web page twilio 'Device' to. I use c# but if you have a node.js or php example that would be fine
fetch('https://mybackend/getPhoneToken').then((token) => {

  const device = new Device(token);
    
  device.on('incoming', call => {
    call.accept();
  });
});

Thank you for your help.

Answer 1

This is my first answer, let's see if I can help.

First you have to generate the access token by giving the Voice grant.

1. Generate access token with your account sid, API key ,API key secret and identity.
   access_token = AccessToken(<Account_sid>, <api_key>,<api_secret>, identity=identity) Note: Identity Should be unique for each user. You can put identity as twiliophonenumber_userid

2. Grant the Voice incoming Access.
   voice_grant = VoiceGrant(outgoing_application_sid=<twiml_sid>,incoming_allow=True)

3. Add grant to the access_token
   access_token.add_grant(voice_grant)

4. Initialise the Twilio device with this access_token. Then you can make the incoming call to the twilio number and receive the call on browser.

5. You just need only one Twiml App for all the twilio phone numbes. Create a Twiml App with Request Url and method. (Whenever the js device make/receive calls, then twilio will send a request to this URL to get further instructions)

6. In the above Request URL function, you have to tell twilio what needs to do with the request. Here is a sample function
   function handle_calls():
   if outgoing_call:
   dial.number(customer_phone_number)
   else:
   # handle incoming call
   dial.client(identity) # This is the same identity which we have given while generating access_token. This will trigger "incoming" event on Js device.
   

7. To differentiate between outgoing / incoming calls, you can send extra parameters to twilio while making outgoing calls and handle the request accordingly in the above function (pt. 6). See below sample function. var params = {"direction":"Outgoing"} # Based on this parameter you can differentiate between outgoing/incoming calls. device.connect(params)

8. You can setup status_callback events to better handle the call progress. have a look at this article...https://www.twilio.com/docs/voice/twiml/number#attributes-status-callback-event

Have a look at this article, you can get some more information - https://www.twilio.com/blog/generate-access-token-twilio-chat-video-voice-using-twilio-functions