WebRTC Change Communications Forever

WebRTC Change Communications Forever

by Greg Baugues

The video titled "WebRTC Change Communications Forever" features Greg Baugues, a developer evangelist at Twilio, who discusses the transformative potential of WebRTC (Web Real-Time Communication). Baugues highlights how WebRTC is revolutionizing voice, video, and data communications by enabling direct peer-to-peer communication within web browsers, shifting away from hardware dependency.

Key points covered in the video include:

- Historical Context: Baugues compares the evolution of communication technologies at Epcot, illustrating the legacy of tools like the printing press, telegraph, and telephone, concluding with the innovative leap introduced by personal computers.

- Definition of WebRTC: WebRTC allows for real-time communication in browsers without the need for plugins. It encompasses three primary JavaScript APIs:

- getUserMedia for camera and microphone access.

- RTCPeerConnection to establish direct connections.

- RTCDataChannel for unknown yet potential applications beyond video calls.
- Peer-to-Peer Connections: Unlike traditional models where data routes through servers, WebRTC enables fast and secure peer-to-peer connections, reducing latency and enhancing security since messages are encrypted and not routed by third parties.
- WebRTC’s Impact: Baugues asserts that WebRTC can disrupt various industries by empowering developers to create applications that revolutionize how we communicate. He cites applications beyond video conferencing, such as distributed CDN capabilities and peer-to-peer file sharing akin to BitTorrent.
- Adoption Challenges: While WebRTC is compatible with Chrome and Firefox, Baugues notes that challenges remain with Microsoft and Apple fully adopting it, emphasizing the need for developers to create applications that spur demand for wider adoption.
- Signaling and Connection Setup: Although WebRTC does not handle signaling, Baugues explains the process required to establish connections, using protocols like ICE (Interactive Connectivity Establishment) and STUN.
- Practical Applications: Baugues demonstrates backend code to create a simple communication app using Twilio, showcasing the ease of integrating WebRTC for both browser-to-browser and browser-to-telephone calls.

In conclusion, the video reinforces the notion that software, particularly through technologies like WebRTC, is significantly enhancing communication capabilities, making it easier for people to connect irrespective of hardware constraints. Baugues encourages developers to leverage these tools to innovate and improve societal communication on a larger scale.

WebRTC (Real Time Communications) is revolutionizing the way we handle voice, video and data communication by providing native peer-to-peer communication inside the browser. In this talk we'll discuss: - History: How has WebRTC evolved since it's birth just three years ago? - Applications: How are developers using WebRTC beyond video conferencing? (Such as a peer distributed CDN and "bittorrent in the browser"). - Getting Started: What is the WebRTC Hello World?

Help us caption & translate this video!

RailsConf 2014

00:00:17.160 it's uh my name is Greg I am a developer evangelist for twio and just out of curiosity how many
00:00:22.720 of you have heard of too before know of too that's awesome so cool uh how many of you have used too before that is awes
00:00:30.000 Al so cool all right um awesome so uh so yeah so I'm developer evangelist for
00:00:35.680 them and like I said I live here in Chicago uh I'm so incredibly happy to be here this is to be able to speak at
00:00:41.239 rails comp I I programed for a good chunk of my life but I just picked up rails uh about 3 years ago um and I just
00:00:48.160 started working for twio about two months ago um and it has been absolutely incredible and so to be able to speak at
00:00:54.960 rails comp in the city I love uh you know for this company it's like I don't
00:01:01.000 know it kind of feels like a big accomplishment uh for me so um so if you were to like come up to me afterwards
00:01:07.680 and you were say hey Greg you just spoke at rails comp in the city that you love uh what are you going to do next
00:01:15.400 what do you think I would say Disney World damn right I'm going to Disney World I'm going on
00:01:21.880 Saturday so I wish I could say I actually planned it that way my wife and I just happened to uh to to plan a
00:01:27.840 vacation to Disney World uh and it happened to be that we're flying out the exact day after real C so that worked
00:01:33.720 out nice um and I don't know like when I was growing up I absolutely love Disney
00:01:40.320 World it was an amazing place for me it probably was actually the the happiest place on Earth for me um so much so that
00:01:45.799 when I was in college I took a semester off and I went and I picked up trash at the Magic Kingdom uh and I got paid 585
00:01:52.560 an hour like literally clean up puke um and it was awesome and uh but when I was
00:01:58.200 actually when I was younger Epcot was my favorite I didn't have much use for castles and stuff but Epcot was you know
00:02:05.560 it stands for experimental prototype community of tomorrow it is a is a vision of the future uh Epcot was built
00:02:13.080 to inspire us about what is possible with technology and the ways in which technology can change our life and and
00:02:19.800 to come up with new ideas and new ways to communicate um and you know the the
00:02:25.959 big golf ball here is actually a ride it's called spaceship earth if you haven't been there before and when you go inside of it you get in one of these
00:02:32.720 cars that looks like this and it's not a fast ride it's not a particularly exciting ride what it is is about a 20
00:02:39.000 minute tribute to the history of communication and uh you go through and you see these different scenes and so
00:02:46.319 you see like the the monks who were copying manuscripts by hand and all
00:02:51.400 these guys are animatronics they're all robots right except for he might not be moving he might be snoring or something um and then you see the printing press
00:02:57.959 during the Industrial Revolution and then you see the Advent of the telegraph the first time that we had
00:03:03.519 real time Communications over great distance and then we see the Advent of the telephone system the first time that
00:03:10.440 we had uh realtime voice communication over a distance and back when I was a
00:03:15.959 kid in the mid 80s and the the you know like the late ' 80s or stuff um this was the last scene in the history it was the
00:03:22.480 vision of the future it was it was a boy in America talking on a video screen to
00:03:28.680 a girl in Japan that that was that was the vision of the future from from the mid to late ' 80s
00:03:35.599 and uh the thing about Epcot is that you know it's this vision of the future and the thing about the future is that it
00:03:41.360 comes you know uh and so so every 10 years or so uh they shut down spaceship
00:03:47.280 earth for for a few weeks and they update it and I just found this out I didn't know this was the case I haven't
00:03:52.680 been there in like 10 years but I'm going to see this next week uh but they added a new scene depicting what Disney
00:03:59.079 considers to be a uh you know what has been an important
00:04:04.799 contribution to to human communication as the telephone and the Telegraph and that movement is represented by was
00:04:11.640 sitting in his garage tinkering on the first Apple Disney believes that the Advent of
00:04:17.400 the personal computer and and the proliferation of software has had as big of effect on human communication as has
00:04:25.479 the telephone and we at toio would agree with that our uh mission statement is to
00:04:30.560 change Communications Forever at least that's the short version of it the the longer version is to change
00:04:36.320 Communications Forever by migrating this industry from its Legacy and Hardware to its future and software that's kind of
00:04:43.039 mouthful so let me let me help explain that a little bit better it's a little bit easier to explain that by talking about other Industries because we're
00:04:48.960 seeing this trend everywhere you know Mark Andre that software is eating the world and what we're seeing is all these
00:04:55.720 these industries that used to be dependent upon Hardware are now becoming playground for people who can write
00:05:01.160 software people like you so what if I said change hosting Forever by migrating this industry from its Legacy and
00:05:07.080 Hardware to its future and software who might have be talking about there anyone Heroku yeah Amazon with
00:05:16.240 AWS uh you know it used to be that if you wanted to host a website you needed to know how to do this and now when I
00:05:22.560 want to host a new website I create a new server I click that blue button up there uh I don't know anything about Hardware the these guys are digital
00:05:29.120 ocean na a I'm guessing youall probably heard of they're awesome I just started using them a few months ago they have a
00:05:34.600 booth downstairs uh what about this change payments forever who might this
00:05:40.600 be stripe yep yeah exactly who else yeah PayPal brain tree yeah it used
00:05:48.720 to be that if you wanted to uh process a bunch of credit cards you had to buy one of these things and 5 years later uh
00:05:54.759 that was going to be the exact same device as the day it rolled off the line and uh today Square spend so so little
00:05:59.960 money on the actual Hardware they give it away you know they're not Hardware people they're software people software
00:06:05.120 people who are changing the payments industry what about this change Transportation forever who's doing this
00:06:10.639 Uber Uber how would you like to be the guy who owns the company that makes these things right
00:06:16.319 here it was like five years ago life looked pretty good you know you didn't have to change things you sell pretty
00:06:21.520 much the same product been sell for the last 10 years and then these guys come along Uber doesn't make any hardware
00:06:27.560 they're software people and yet software people who have totally disrupted this Transportation
00:06:33.800 industry we have as software people I I don't think that there is any other
00:06:39.280 skill set that you can have that gives you more power to impact the world right now than the skill set that youall have
00:06:46.199 in here today and so that's what we're passionate about we're passionate about changing Communications Forever by
00:06:51.720 migrating this industry from its Legacy and Hardware as future and software how do we use software how do we Empower all
00:06:57.360 of you here to change Communications there's a technology that's new it's just in the last 3 years has come around
00:07:03.720 was not invented by us but we love it uh and it's called Web RTC and we believe that it's going to change the way that
00:07:09.680 the world communicates uh just that who here has heard of web RTC or I mean I guess y all
00:07:15.240 showed up in the room so uh it wasn't like totally un disinteresting for you
00:07:21.520 um wonder I put my water B here okay so what is web RTC so web RTC enables
00:07:28.280 real-time communication in the browser via open peer-to-peer protocols that's more of a mouthful than
00:07:34.879 the uh migrating this industry from Legacy so let's break this down a little
00:07:41.960 bit um so real realtime communication in the browser we've had real-time
00:07:47.159 communication on the internet for a while this is not necessarily a new thing um Skype came out about 10 years
00:07:53.840 ago and it provided real-time voice communication over the internet you know
00:07:58.960 now we have Hangouts uh which happens in the browser but it requires a plugin in order to
00:08:04.280 install we've had real-time communication in the browser before but it's always required plugins especially flash um and then you have FaceTime
00:08:10.680 which is again it's a standalone app it's not happening in the browser and I don't know like everyone here is a web
00:08:16.400 developer I'm guessing um I have never tried to screw around with media before I don't know if any of you have but uh
00:08:24.080 it's pain in the ass uh you have to first figure out how to get access to the camera how to get access to a
00:08:29.639 microphone you have to be able to pull in that data you have to be able to code it some way and you have to figure out how to transfer it which is a little bit
00:08:35.279 more complicated making HTTP requests uh then once it gets there you have to figure out how to decode it there's all
00:08:40.719 this information going back and forth it's way more difficult than building CR apps and rails um web RTC gives us all
00:08:47.800 of that for free okay so web RTC is is this open set of protocols it's this tool set that lives in the browser and
00:08:55.720 it allows you to have access to the video camera and to the microphone and it will capture that information for you
00:09:02.800 and then it will it'll wrap it up for you and allow you to ship it off so that's amazing like it's uh it's it's
00:09:08.160 absolutely incredible that the the tools we have and it's happening in the browser um which is you know we used to
00:09:15.079 have you know in Skype we're used to installing these third party apps right
00:09:20.440 um which means if the other person doesn't have Skype and doesn't want to install it you can't communicate with them um and it also means that if you
00:09:26.959 wanted to build something that took advantage of real time Communications before you know had to know how to build a standalone app uh so that wasn't
00:09:34.079 necessarily something that was open to web developers out there um now if you know how to build apps for the browser
00:09:42.160 especially get you in a second it's all JavaScript um you can build real time build apps that use realtime
00:09:47.600 communication so web RTC is Javascript apis it's actually three apis that are
00:09:53.399 in JavaScript uh one is called get user media that's the one that actually captures the media for us that's the one
00:09:59.160 that will open up the camera it will open up the microphone start recording that
00:10:05.160 information uh then you have this other one called RTC pure connection which we'll talk about in a second but it's
00:10:10.600 the one that establishes the connection that lets you communicate and send that information off and then we have RTC
00:10:16.160 data Channel which is actually super interesting this is whenever we talk about web RTC the first thing that comes
00:10:21.839 up is video communication or voice communication um but the people who are
00:10:26.959 really into this stuff are actually most into this RTC data channel one or it's
00:10:32.440 it's kind of the biggest unknown because the the use cases for the media stuff is pretty obvious um although I'm sure
00:10:38.720 we're going to think of things that we've never thought of before but this data channel one opens up a lot of opportunities that not a whole lot of
00:10:44.440 people have thought through yet uh and I'll talk about that again in just a second well I love to talk about it here I guess because that's where the slide
00:10:50.519 is uh so so the thing with the uh with the RTC Pier connection is that we're
00:10:57.600 not bouncing these messages through a ser the uh the way in which this is going to work is that we're going to open up a
00:11:03.959 direct connection between two browsers and so these guys have thought of using that data Channel they got acquired um
00:11:10.720 they wrote something called Pure CDN so this idea that as visitors came to your website they could download those assets
00:11:16.320 and then open up direct connections to other visitors who came to your website and serve that um you know this uh the
00:11:24.800 data Channel allows us to start doing things thinking about things like bit torn in the browser
00:11:30.040 uh let me talk a little bit more about that the peer-to-peer connection so it's open peer-to-peer protocols so this is
00:11:35.800 the standard web model right we have data going to a server and coming back what web RTC allows us to do is to
00:11:42.160 establish a peer-to-peer secure encrypted peer-to-peer connection between two browsers so this means that
00:11:48.920 a it's really fast because the data is not going through a server you know like if you
00:11:55.800 right now you could have a situation in which you have two people sitting in Japan and their messages are are bouncing off a server in New York before they get to each other web RTC can help
00:12:03.360 figure out that hey you're on the same network uh you can just open up a connection right here and you can communicate it's also secure your
00:12:09.920 messages are not going through a third party and uh all web uh RCC connections or transfers are encrypted um so it
00:12:18.240 solves a lot of security issues that people are concerned about these days uh and it's also interoperable if you have
00:12:24.720 Skype you can't talk to somebody on FaceTime you know you can't talk to somebody um on Google Hangouts versus
00:12:31.720 FaceTime uh web RTC is open protocol so this means that a you don't have to get
00:12:36.839 people to install special software if they have a browser then they can use your app and these protocols mean that
00:12:42.440 you could set it up we're all using the same protocols for this so that your app can talk to another app uh which is super
00:12:48.279 cool um all right so web RTS going to change the world it's so easy it's amazing uh it's actually unfortunately a
00:12:53.639 little bit more complicated that's the the pretty picture um so is web r TC
00:12:59.480 ready uh this is a site that's put up by the people at and yet and if
00:13:05.480 you want to learn more about web RTC uh they're kind of leaders in the space their Consulting shop out in Seattle uh
00:13:12.000 they've done some great tools I'll show you the actually the the the video conferencing thing I showed you a little bit earlier that's by those guys
00:13:18.880 um and you have two people they go to the same URL and it pops up starts a video chat uh amongst you um so they're
00:13:24.959 keeping a scorecard here of who is what browsers are web RTC right ready yet and you know those big black lines going
00:13:31.639 through anything that's owned by Microsoft uh and apple um because they PR don't do anything unless you twist
00:13:37.839 their arm uh to do it which also unfortunately means that web RTC is not currently enabled on iOS devices uh on
00:13:44.800 Google on Chrome for Android you can do web RTC uh so that means you could build an app someone could visit on their
00:13:50.040 Android phone and communicate video chat with somebody else who was on desktop you can't do that uh on iOS
00:13:55.720 unfortunately yet and um you know one of the things that we really need for more people more developers to start building
00:14:01.720 apps because app Apple and Microsoft have proven they're pretty much only going to do something if you twist their arm and do it like we need web RTC to
00:14:08.759 reach a critical maass we need like that killer app that everybody's complaining about that their iOS device doesn't do
00:14:14.720 it and so the best way to get them to make web RTC more open standard or you
00:14:21.440 know just more widely adopted is we need developers to start building with it um but Chrome and Firefox are fully
00:14:27.959 supported so this means you can build an app in Firefox you know use a web RTC and Firefox and and someone in Chrome
00:14:34.199 can use it and hopefully we'll get to the point where pretty much every browser I I don't really have a lot of Hope for ID but you know um we go um and
00:14:42.160 web RTC does not do signaling so you know I'm I'm a rails guy I I don't
00:14:47.519 really know a whole lot about Network protocols and stuff and I don't really get like tcpi like kind of know what it
00:14:52.600 is I don't know how it works I don't know if any of you are like that but this diagram that I had up here earlier
00:14:59.399 um might surprise you but it actually painted a little bit of a well simple
00:15:04.720 picture of how things actually work it's not actually quite like this um so if I want these two machines to actually talk
00:15:11.199 to each other then I need them to open up a signal between each other there a whole lot of information that they need
00:15:16.839 to communicate back and forth before they actually can start talking and to use that to to set up that connection
00:15:22.639 we'll use STP or session description protocol and STP is going to answer questions like are you there you know
00:15:29.480 who are you uh what is it you're sending me are you sending me a video are you sending me audio how is it encoded what
00:15:34.839 am I going to do with it when it comes back and then this question of which is a pretty important question to have first off is where are you actually
00:15:41.040 because um you know the slightly more complicated view of how the world
00:15:46.800 actually works is that your computer is actually sitting behind a router uh it's not uh connected directly the internet
00:15:53.759 and we use Nat in order to give that computer that's on the local network a local IP address and then it's hiding
00:16:00.440 behind a router that has the the publicly available IP address um so there's a set of protocols in order to
00:16:05.600 figure out where these computers are so that one computer can figure out hey where am I on the internet um it's
00:16:11.199 called ice interactive connectivity establishment uh one of them is called stun uh which is how do we Traverse the
00:16:18.120 net so the idea here is that you have a server sitting out in the world somewhere and this one computer is
00:16:23.759 trying to figure out hey where am I so it pings the stun server the stun server relays back that computer's IP address
00:16:30.199 and then this computer can send that IP address to the other computer and now they found each other they can set up
00:16:35.240 direct connection um sometimes that doesn't work so we have this thing called Turn which is like hey that didn't work and so then we just end up
00:16:41.480 bouncing messages through the turn uh the turn takes care of it for us um I
00:16:46.560 don't have much interest in any of this stuff like it's uh it's kind of a pain in the ass uh and and web rtz does not
00:16:53.399 include and that's actually a good thing um the reason for it is that there are all sort there are flame war is about
00:17:00.440 what signaling protocol is best which of you know the whole network connectivity
00:17:05.640 thing is is this whole other mind field and for web RTC to have bundled that in they would have had to come down on a
00:17:11.039 hard stance instead what they're saying is depending on your app you can implement this in whatever way you think
00:17:16.400 is is correct um and so it doesn't build in that signaling Force web RTC does not
00:17:23.280 also doesn't really scale well between multiple people so you can do multiple connections uh but it happens through
00:17:30.039 what is called a mesh Network so for each additional person who's added the network everybody else has to open up uh
00:17:36.799 a you know connection to them so you run into these problems where once you start
00:17:42.360 adding four or five people like the number of connections grows exponentially and everything slows down
00:17:47.440 so on that you can get three or four people on there for video chat but anything more than that it really starts
00:17:53.919 to to slow down and doesn't really work that well um and what RTC doesn't do
00:17:59.159 telephones um you know no matter what apps we're building you know it's super cool we can do this stuff in the browser
00:18:04.520 the fact is that for most business applications most communication is happening over the teleph network um and
00:18:11.440 so at some point you're probably if you're building a business application you're probably going to need some sort of way to get in the telephones um but
00:18:19.919 let's say that you're not you're not deterred by those downsides there uh and you want to get started how would you go
00:18:26.520 about doing that um there is a library called Simple web RTC it is built by the
00:18:33.840 people at and yet um and what he has done is this guy named Henrik uh who
00:18:39.480 also gave this awesome talk at cascadiajs last year talking about this stuff uh he does a great job of
00:18:46.159 communicating this but with simple web RTC is just a set of JavaScript tools that takes care of a lot of the stuff so
00:18:51.760 there is a simple signaling server that's built in node that you can set up and and take care of some of these
00:18:57.320 problems he also standardized even though they open protocols the way in which you implement something in Firefox
00:19:02.480 is a little bit different than the way that you would implement it in Chrome and you kind of have to um that they're just not entirely standardized and uh
00:19:10.080 his Library service is a wrapper for that to standardize those protocols or you know the the
00:19:15.640 JavaScript actions for you um and then of course you know I have an or for toio
00:19:21.039 so I might surprise you that we have a uh a way that you can take advantage of some of this stuff um so we have what's
00:19:26.520 called toio client uh and too client as a way to enable communication in the browser and we leverage web RTC for some
00:19:33.280 of it it's not a fully uh it's I say it's not a web RTC solution and that you
00:19:39.280 can't just use twilio and solve all your web RTC problems for you but it is a web
00:19:44.400 RTC enable solution and that we're using web RTC to solve a lot of problems that we were doing before and they become
00:19:50.679 much easier for us uh now that we've been doing web RTC um or at least they
00:19:56.080 will be you know more so in the future and a lot of the things that you want to do with web RTC you can actually do uh
00:20:02.440 with twio client and we will handle the signaling for you we will handle the issues such as what happens if the uh
00:20:10.640 the person who comes to your website is using Internet Explorer if they're using Safari you know what do you do then you
00:20:16.480 know and uh the answer is that you fall back to a flash plugin and that's kind of a pain in the answer to right so we
00:20:22.200 take care of that stuff for you so uh with that I want to show you just a quick demo of what it looks like and do
00:20:29.000 a little bit of coding here and just show you what it looks like to build an app that uses too client that would
00:20:34.360 enable browser to browser communication or enable browser to telephone communication
00:20:41.080 um let me do this because it's hard to type onehanded all right can you still hear
00:20:48.960 me all right all right so the first thing I
00:20:54.320 want to do I don't know if I need to speak into this for the uh app or what uh for the
00:21:00.400 recording uh but I'm want to come to my twilio uh dashboard here and I'm going to create a new app and I'll just call
00:21:06.640 this my rails comp phone and I need to provide a uh
00:21:14.120 URL for where I want twio to get the instructions from
00:21:20.520 for uh what to do once I actually try to make an outbound call um and once I've
00:21:25.559 actually created my application here this I'm provided with a unique identifier for that app so I'm going to
00:21:33.559 build this thing in Sinatra every familiar with Sinatra so okay so Sinatra
00:21:39.440 for those of you who aren't Sinatra is just super stripped down uh web framework so it's like in rails if you
00:21:45.799 could just Define your routes on the Fly uh and then just kind of like stick the controllers in there at the same time um
00:21:51.440 it it just lets you really build things really fast so I'm going to build a Sinatra app so I'll require Sinatra
00:21:58.640 um I'm going to require the twio Ruby Library uh if I'm assuming everyone here's a Ruby programmer since you're
00:22:04.279 here at rails comp uh if you're not or if you're into other things we also have libraries for python we have libraries
00:22:09.440 for uh for node we have if you're net person which oh my God does anyone here
00:22:14.960 wow that's awesome I would didn't imagine that's so cool like do you does your company also do rails as well or is
00:22:22.120 that something you do I don't do it very much you don't okay cool well if you decide you want to build something you
00:22:27.200 can tool we got you uh so and then I'm I'm going to require
00:22:32.960 some uh credentials that I have because I do not feel like sharing my off token and
00:22:38.360 whatnot with you um so I'm going to just set up this is basically like think of it from a rails persec perspective as my
00:22:46.120 uh my root my index um and what I need to do is send a a capability token is
00:22:52.400 what we call it to twio to let it know that this client is able to interact with twio on behalf of my account um so
00:23:00.159 I'll set up it's called capability and I'll use the twio
00:23:07.240 library this is one of those words I misspell all the time capability uh and I'm just going to pass to that my uh
00:23:14.919 authentication information and then once I have my capability token uh I need to tell it
00:23:21.960 what are the capabilities that I'm actually offering to the client what am I letting the client do and in this case
00:23:27.200 I'm going to let the client have outgoing connections and I'm going to paste in my uh application ID that I
00:23:33.400 just got and I'm going to allow it to have allow the client to have incoming
00:23:38.840 applications and I just need to give this client a name just so toio knows how to uniquely identify this particular
00:23:45.480 client um and once I've done that then I can uh generate my
00:23:51.679 token and then I can use Erb to pass that token into
00:24:00.159 uh the HTML and some JavaScript that I wrote ahead of time actually I say I
00:24:05.559 wrote it ahead of time I didn't actually write it ahead of time what I'm doing here is just following along with the um
00:24:12.039 the quick start guide so you can actually go through the same thing and you can have this if you are interested
00:24:18.840 in what I'm doing here afterwards uh you can recreate this whole thing in probably 15 or 20 minutes going through the quick start guides on goo's docs so
00:24:27.200 I'll save this I just want to show you what this looks
00:24:32.279 like all right so this is all the uh the I well not many of you know me but if
00:24:39.039 you did know me or my wife will tell you that I am not much of a designer so I can tell you I definitely did not do this part uh but uh but yeah so it's
00:24:45.799 it's probably about 15 lines of HTML about 15 lines of JavaScript that's happening um and you can see that from
00:24:51.039 the docs if you go through this um so what's going to happen here is I'm going to punch in a phone number I'm going to
00:24:56.399 hit the call button and I hit the call button twio is going to send that phone number it's going to send the capability
00:25:02.000 token uh or my client's going to send that to twio and then twilio is going to
00:25:07.159 check see if I have the uh you know permissions to actually interact with that application and if I do then twilio
00:25:13.399 is going to go looking for instructions to say okay what do you want me to do with this information um and that's what I set up over here is I set up the URL I
00:25:20.000 said this is where you go to find that information um and so I'm just going to write a set of instructions for
00:25:26.760 twilio um that will tell it what I want to do once I try to place a call
00:25:33.360 here and the way it works is that toio makes an HTTP request to my server and
00:25:39.039 so then my server is going to send back a response and that response is going to be in
00:25:45.919 XML and so my response is going to tell tlio to
00:25:54.159 dial a number
00:26:01.799 like so now I need two numbers to make a phone call uh I need a from number and
00:26:08.799 toia won't let you just put any number on your caller ID uh for you know obvious reasons um but so this has to be
00:26:16.600 a number that either you bought through twio you can buy phone numbers on twio for about a dollar no for actually
00:26:21.679 exactly a dollar um or you can register say at like your own phone you verify you know how you can do two Factor off
00:26:28.360 send you a code and you can say hey I actually verify that you do own that number and then you can send uh calls from that so I'll do that I'm going to
00:26:35.520 use my mobile number as the from here I'm going to drop
00:26:43.919 some all right and then the two number I'm going to I have my form set up so
00:26:49.399 twilio is going to or my client's going to take that that number that I punch in the form it's going to send it to twilio
00:26:54.559 and then twio is going to send that number back to this endpoint here when it makes that a HTP request um so that
00:27:00.080 number is going to come through in the prams like that and I need Ruby to
00:27:07.480 actually interpret that all right so there we go so that's
00:27:13.440 my instructions I I have five lines of instructions to tlio of how to actually make a call so they send me an HTTP
00:27:20.360 request I send them a response it says Hey dial from this number to this other number all right
00:27:26.679 so reload we'll pull open the soft
00:27:31.919 phone and I going to call once my loading pigeons here
00:27:37.000 Stranges there you go I'm actually calling my wife's phone
00:27:42.039 because she was kind of not to borrow it for the purposes of this uh this presentation so watch what happens when
00:27:47.799 I call here I get a little uh a little warning from chrome up here just a
00:27:52.919 permission thing Chrome is asking me do you want to let this application use your microphone this is is a native
00:28:00.120 Chrome dialogue all right so prior to web RTC this would be a flash app asking you
00:28:07.200 this so can youall hear me sorry uh so this would be a flash app asking you this now like I said earlier if somebody
00:28:13.720 were to come to this app that I built on a non web RTC enabled browser twio would figure that out and then we would serve
00:28:20.000 up the the flash app so you can just build it once here and we'll take care of all the the interoperability think that's the way
00:28:25.640 you pronounce that word um but yes I do want to2 or I do want Chrome to use this
00:28:31.760 so so there we go and we're dialing the
00:28:37.200 phone and I'm going to answer and now I can and now I can speak
00:28:43.159 from over here over here the lagging
00:28:49.000 ISS but yeah that's how yeah that's how
00:28:54.519 you can we cost feedback doing this earlier earlier
00:28:59.840 destroying destroying all right so how you can make
00:29:05.799 a browser call a
00:29:13.200 phone um like I said that's super simple and thank you for the Applause I love when that goes
00:29:19.760 well like I said I've only been doing this for two months so live coding still a little bit scary for me but uh um but
00:29:25.279 it's pretty awesome that it's that easy to do uh so that was super small app built in Sinatra there's a whole lot of cool
00:29:32.000 stuff you can do with twia so besides just making that first call so you can do things like transcribing the call you
00:29:37.960 can do things like dropping 40 people or 100 people into a conference call um you can do things like recording the call uh
00:29:44.919 you can build an entire call center using numbers that you bought for a dollar on twilio um and this is an app
00:29:52.480 called zest zest phone which was built by a company out in um California they
00:29:58.399 are a finance company that uses big data in order to um in order
00:30:03.880 to make better loans I guess and uh they built this whole call center they're dealing with tons of phone calls and
00:30:10.039 they open source the entire thing and it's all un rail so if you want to study a really cool codebase and rails about
00:30:15.200 how you do some more advanced uh functionality on toio um doing things like placing people on hold or you know
00:30:21.360 like the the the supervisor might be listening in on mute uh sort of stuff you can do all that using this package
00:30:27.559 so go Google that zest phone um it's super super cool and and you can drop this functionality into just about any
00:30:34.679 app that You' be working on so there just add-on functionality so if you ever have an app you need it to call people or you need it to receive calls or you
00:30:41.480 need that uh you want to build a soft phone so you can have two browsers communicate with each other so let's say
00:30:46.880 that you built a multiplayer game and you wanted everybody who was in there talk to one another you can do that
00:30:53.080 using the the to your client as well um so that's it you know that the like I
00:30:59.399 said we're super super excited about this we're super excited about web RTC and but more broadly speaking we're so
00:31:04.720 excited about the way in which software is now enabling people like us like people who know absolutely nothing about
00:31:10.679 telep equipment um it used to be that if you wanted to build a call center then you had to spend $100,000 minimum well
00:31:17.919 actually the first thing you probably need to do is hire a lawyer and you need to negotiate contracts with major
00:31:23.360 carriers so that you could use their their equipment and their lines and um you be locked in for a long time they
00:31:28.440 need to spend hundreds of thousand dos on equipment and fill up a closet full of that um and now like you need a free
00:31:36.840 Tulio account it's it's pretty crazy um and for for literally like instead of
00:31:44.039 hundreds of thousands of dollars for dollars uh you could build a call center um you can take this too client and you
00:31:50.559 could buy a $200 Chromebook and and you know put a mic on it and give it to a
00:31:56.240 person in a call center instead of having buy all the the expensive telphy equipment we've always needed before so
00:32:02.320 um yeah we are so excited ATO about the way in which um the way in which
00:32:07.919 software is allowing us to make a huge impact on the World by just making it easier to communicate and we
00:32:13.039 fundamentally believe that the more we communicate as a society the better our society we get so I just like to
00:32:18.919 encourage you to go play around whether it's we RTC or whether it's with t client go use the tools use the skill
00:32:23.960 set that you have to go change the world thank you very much