Phone Calls from the Browser.

96 |

97 |

Introduction

98 |

99 | This is a tutorial that demonstrates how to make a phone call using the Twilio API in an AngularJS application. We are assuming you already have a Twilio account and Node.js installed on your machine. You can download the complete source code for our test application on GitHub here. 100 |

101 |

Part I: The Server

102 |

103 | Making a phone call from the browser in an AngularJS application requires both a client and server implementation using the Twilio API. We will first create a file called server.js that will contain our server implementation. 104 |

105 | The servers job here will be to create a Twilio capability token and send it to the client upon a request (this will be through a standard HTTP GET request). A capability token is used to tell Twilio's back-end which permissions your browser-based client has. It verifies that you have given the client permission to consume the Twilio services the application uses. The capability token must be signed with your ACCOUNT SID and AUTH TOKEN for this verification to work. This must happen on the server to avoid exposing your ACCOUNT SID and AUTH TOKEN to users. See Figure 1.0 for an example of making an initial compatibility token on the server. 106 |

(Figure 1.0) 107 |
108 | The next thing we want to do is create a TwiML app. See Figure 1.1 for an example of what to enter in the form - boxed in red. 109 |

110 |

(Figure 1.1) 111 |
112 | When we create a TwiML app a special SID is created for that app - call it APP SID. After we create our capability token we need to set to allow the client to make outgoing calls. We do this with the allowClientOutgoing() function along with the APP SID. See Figure 1.2 for the code on how to do this. 113 |

114 |

(Figure 1.2) 115 |
116 | The trick here occurs in Figure 1.1 where we set the Voice Request URL to http://twimlets.com/forward. Here we are telling Twilio to allow outgoing calls from the client to our TwiML app which defines the rule - in TwiML - to forward calls by dialing. TwiML - the Twilio Markup Language - is a set of XML instructions which tell Twilio how to handle a call or SMS message for a given number. This is essentially what gives us the ability - or capability :) - to call out from the browser. 117 |

118 | Next we simply send the capability token to the client. See Figure 1.3 for the full capability token setup and server GET request. Notice that in order to get a capibility token, the client must do an HTTP GET request for the URL '/twilio/token' from our server. 119 |

120 |

(Figure 1.3) 121 |

122 | 123 |

Part II: The Client

124 |

125 | On the client side we have an AngularJS application set up in the single app.html file. In this file we define the 'twilioTest' module as well as the 'twilioTestCtrl' controller. The 'twilioTestCtrl' controller has control over the entire body of the app.html file. There are three functions in the 'twilioTestCtrl' controller that provide the functionality for making a client-side browser based phone call. 126 |

127 | The first is the HTTP GET request that we issue to get the compatibility token from our server. See Figure 2.0 for how this works. 128 |
129 |

(Figure 2.0) 130 |
131 | You can see here that after we successfully get the token we set it on the Twilio Device using the setup() function. This device is an abstraction to our browser phone that allows us to connect with and send requests to Twilio. 132 |

133 | The second function we define is $scope.call(), which will be activated using a button with the directive ng-click="call()". This function will make the actual phone call request to the Twilio servers, and the phone should start ringing after it is activated - this is of course after you hit 'Allow' to give permission to the browser to use the microphone. See Figure 2.1 for the implementation of this function. 134 |

135 |

(Figure 2.1) 136 |
137 | The third and final function we define for this controller is the $scope.hangUp() function, which will be activated using a button with the directive ng-click="hangUp()". This function will disconnect a current phone call if there is one, effectively hanging up the phone. See Figure 2.2 for the implementation. 138 |

139 |

(Figure 2.2) 140 |

141 | Here is the full module and controller definition for our client test application: 142 |

143 |

(Figure 2.3) 144 |

145 |

Conclusion

146 |

147 | We hope you enjoyed this tutorial. Click here to download the source from GitHub. Thanks for reading! 148 |

149 |

150 |

Making Phone Calls from the Browser with Twilio and AngularJS.

Introduction

Part I: The Server

Part II: The Client

Conclusion

Making Phone Calls from the Browser with
Twilio and AngularJS.