Twilio Client 101


Published on

An introduction to Twilio Client

Published in: Technology
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • <Present myself>\nHi, my name is Jonas and I am working as a Tech Lead here at Twilio and I will take you through the basics of Twilio Client. In particular, I am going to show you how to build your first basic browser based phone so that you will have a heads start for this afternoons workshops.\n
  • Slide: Twilio Client\n\nA year ago, the only way to connect an audio pipe into twilio was to use your regular phone. We then launched Twilio Client! This allowed you to take an ordinary browser and turn it into a phone. You could make and receive phone calls from/to your browser.\n
  • One customer Wix used Client to build their own internal call center to deal with rapidly scaling customer service.\n\n
  • RingDNA used Client to build an iPad app that accelerates CRM in an easy tablet form factor, letting reps make calls directly from the context of their contacts.\n\n\n
  • WhatCheer made a rad web-based telephone for children called BumblePhone.\n\n
  • Slide: What you might build\nThis enabled you to build use cases such as:\nE-Commerce. You can now allow your customers to click directly on a link next to a product and Twilio Client is launched. This connection ends up at a customer service representative, who also is using Twilio Client. When the customer clicked on the link, you can pass along information about the product the customer has questions about so that the service representative knows exactly what the customer is looking at.\nCall-centers - by using Twilio Client browser, when a customer calls you can directly pull up the records for that customer based on the information passed along with the incoming connection.\nGaming - why not add the ability to talk to the people you play with?\n\n
  • Slide: 2 Lines of Javascript\nTo include Twilio Client into your browser app, all you need is one include line and two lines of javascript and that is it! One call to initialize Client, and another to start a call.\n
  • Slide: Live coding\n\nI am going to show you how easy it is to turn your browser into a phone.\n\n<bring up command line>\n\nI am going to write a small little php program that essentially will setup my security credentials for me and render the worlds ugliest page with one button. When we click that button, we will launch an audio connection into Twilio and if all goes well we will be connected to my phone.\n\nFirst, I have prepared my credentials so for now I am just going to include them like so:\n\n<?php include ‘auth.php’?>\n\nI will go over what actually happens behind the scene in a few moments but until then, bear with me.\n\nThen, I’m just going to create a very basic HTML page (start typing that up):\n\n<html>\n…\n</html>\n\n<add twilio.js and talk a little about that>\n\n<add Twilio.Device.setup(“<?php echo $token;?>”);\n\nand mention that this is the security details we will go over soon.\n\nAdd button:\n<button class=”call” onclick”Twilio.Device.connect();”>Call</button>\n\n<load and place call>\n
  • Slide: Security - generating your token\nSince you have no control over the browser you really want to control how people connect into Twilio. Afterall, they will be using your credentials and your account so you want to make sure that they only can do what you allow them to do.\n\nSo, when someone is surfing in to your site and you generate the page that contains the Twilio Client code  you can at that point generate a security token. This token contains what permissions you give out to the client, such as “you can only make calls, not receive” and the token is only valid for 1 hr before it expires. If we look at the code that got generated (do view source) you can see that all this garbage on Twilio.Device.setup got generated on the server side and is in fact our security token. When Twilio receives the connection it will check this token to make sure that\n\n1. the token is still valid\n2. It has been signed with the correct credentials.\n3. It has not been tampered with.\n4. Check that you have permission to issue outgoing connections.\n\nThe code for generating the token is very straightforward (bring up the auth.php code). We have helper libraries is many languages, this one happens to be in php and what it does it creating a new token with my account sid and account token. I then allow outgoing calls to take place. I am even specifying which application it can connect to. And finally I will generate the token. By default, the token is good for 1 hour but you can just specify how long it should be in the generate method.\n
  • \n
  • Slide: Live Coding - hanging up calls\nOk, we can now place a call but what about hanging up calls? Luckily, that is easy to do. Let’s add another button, hang up and when pressed, we will hangup.\n\nFirst though, let me add some CSS to this so it looks a little nicer (import css from client quickstart).\n\nAdd hangup button.\n\nPlace call, hangup.\n\nFinally, let us briefly look into call backs. You can register a number of different call backs such as listen for when the device is ready for use, when an error occurs, when you recieve an incoming call etc.\n\n<add ready and error callback>\n<add log div>\n\nPlace call and watch it change...\n\nThat is all I had to say for this very brief introduction. Remember, everything I just said can be found in our documentation online and the coding that I just did is the first part of the quickstart for Twilio Client JS. You will be using these skills later today and if you get stuck don’t hesitate to grab me\n
  • \n
  • \n
  • Twilio Client 101

    2. 2. #twiliocon
    3. 3. #twiliocon
    4. 4. #twiliocon
    5. 5. #twiliocon
    7. 7. 2 LINES OF JAVASCRIPT<script type="text/javascript"> Twilio.Device.setup(generateCapabilityToken()); Twilio.Device.connect({ PhoneNumber: "+14155551234" });</script>
    8. 8. DEMO TIMETurn my browserinto a phone...
    9. 9. SECURITY Twilio.Device.setup(...); View-Source: ... Twilio.Device.connect();
    10. 10. TOKEN GENERATION<?phpinclude ‘Services/Twilio/Capability.php’;$accountSid = ‘ACyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy’;$authToken = ‘xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx’;$cap = new Services_Twilio_Capability($accountSide, $authToken);$cap->allowClientOutgoing(‘APzzzzzzz’);$token= $cap->generateToken();?>
    11. 11. DEMO TIMEHanging up calls...
    12. 12. QUESTIONS? #twiliocon
    13. 13. THANK YOU