Browser Dialer with Node.js and React - Twilio

Learn how to make phone calls from your browser using Twilio Client, Node.js, and React. TwilioDocs SMS Voice Runtime Video Studio Alldocs... SDKs Help Login Signup SMS Voice Runtime Video Studio Alldocs... SDKs Help Login Signup ProgrammableVoice Twilio Menu BacktoallVoicedocs Basiccallhandling Makeoutboundphonecalls Respondtoincomingphonecalls Modifycallsinprogress Recordphonecalls Createconferencecalls Gatheruserinputviakeypad/DTMF Retrievecalllogs Recordcalls Recordphonecalls Recordasinglesideofacall Encryptvoicerecordings Advancedcallhandling BuildanInteractiveVoiceResponse(IVR)phonetree BuildanInteractiveVoiceResponse(IVR)forscreeningandrecordingcalls Buildwarmtransfers Buildanautomatedsurvey Buildcallforwarding Trackcallstomeasuremarketingcampaigneffectiveness Addclick-to-calltoyourwebapplication BuildarapidresponsekitwithVoiceConferenceandbroadcasting MediaStreams Consumeareal-timeMediaStreamusingWebSockets,Python,andFlask Payments CaptureapaymentwithandabrandedPayConnector CaptureapaymentwithandaGenericPayConnector SIP AddprogrammabilitytoyourexistingSIPnetwork RoutecallstoyourSIPnetworkwithanoutboundcall Callsinthebrowser Buildin-browsercallingwiththeVoiceJavaScriptSDK Collapse Expand Ratethispage: HectorOrtega Publishedon2022-07-14 SelectaDifferentLanguage Node.js:AngularJS Node.js:Ember.js Node.js:React Node.js:Vue.js ThisapplicationallowsyoutomakeaphonecallfromyourbrowserusingTwilioClient. Italsoincludesacoupleotherstandardfeaturesyouwouldexpectabrowserphonetohave: Muteandunmutemicrophoneinput SendDTMFtouchtonesusingtheHTMLkeypad Thistutorialhighlightsthekeybitsofcodethatmakethisapplicationwork.CheckouttheprojectREADMEonGitHubtoseehowtorunthecodeyourself. Let'sgetstarted! CreatingaTwilioApplication ThisapplicationrequiresaTwiMLapplicationtomakeaphonecall,inthisstepwe'llshowyouhowtocreateit. TocreateaTwiMLAppopenyourConsoleandclickthebutton"CreatenewTwiMLApp". EveryTwiMLapplicationneedsafriendlyname(wecalledours“BrowserDialer”)andeitheraVoiceURLoraMessagingURL.Sincewewantouruserstomakephonecalls,weusedaURLtoourapplication’s“/voice”route. Note:Whenrunningtheapplocally,youcanuseatoollikengroktogetapubliclyaccessibleURLforyourdevelopmentenvironment. YouareviewinganoutdatedversionofthisSDK. Showsampleresponse ExampleJSONresponse Showcode index.js TheMainApplicationFile index.js You'veseenhowtocreatetheTwiMLapplication.Next,let'slearnhowtogenerateacapabilitytokensothatourclientscanmakeoutboundcalls. Generateacapabilitytoken GenerateaCapabilityToken Beforeouruserscanmakeanycallsintheirbrowsers,weneedtocreateacapabilitytokenforthem. Capabilitytokensareyourwaytocontrolexactlywhatyouruserscanandcan'tdowithTwilioClient.Inthiscase,ourserverwillprovidealluserswithtokensthatallowthemtomakeoutboundphonecalls. WeusetheTwilioNodeHelperLibrarytogenerateandconfigureacapabilitytokenwiththeSIDofourTwilioApplicationtoallowoutgoingcalls. YouareviewinganoutdatedversionofthisSDK. Showsampleresponse ExampleJSONresponse Showcode index.js TokenGenerationRoute index.js TheTwilio.jsclientneedscredentialstobeabletoinitiatecallsaswellassendmessages,amongothercoolfeatures.TheTwilio.jsclientrequeststhetokenfromthe/tokenroute,atwhichpointtheclientisinitializedandreadytostartusingTwilioAPI's.Next,let'ssetuptheTwilioDeviceinthebrowser. Learnhowtosetupatwiliodevice SetUptheTwilioDevice Inourclient-sidecode,westartbyincludingtheTwilio.jslibrary. Wethenretrievethecapabilitytokenfromtheroute/tokenwithaPOSTrequestusingjQuery. Lastly,wepassourtokentoTwilio.Device.setup()tofinishthesetup. TheTwilio.Device.ready()callbackisusedtonotifyuswhenthedeviceisreadytomakecalls. YouareviewinganoutdatedversionofthisSDK. Showsampleresponse ExampleJSONresponse Showcode public/dialer.jsx SetUptheTwilioDevice public/dialer.jsx SettinguptheTwilioDevicewaseasysincethe/tokenroutesimplifiesauthorization.NowthattheTwilioClientisinitialized,let'sseehowtostartanoutboundcall. Learnhowtomakeacall MakeaCall NowthatTwilioClientisready,ouruserscanstartmakingphonecalls.They'llstartbyinputtingthephonenumbertheywishtocall. WemassagethatinputbeforepassingthenumberontoTwilio,addinga+sign,thenacountrycode,andtheactualnumber.ThisiscalledtheE.164formatandisrequiredbymostpartsofTwilio'sAPI. WethenuseTwilio.Device.connecttostartthecall.TwiliowillsendarequesttotheURLyouspecifiedinyourTwilioApplicationconfiguration,lookingforinstructionsonhowtohandlethecall. Inthiscase,weincludethephonenumbertheuserwishestodialinourconnect()call,andwethenaccessitinourserver-sidecodehere. YouareviewinganoutdatedversionofthisSDK. Showsampleresponse ExampleJSONresponse Showcode public/dialer.jsx CallToggle public/dialer.jsx Asyouhaveseen,connectinganddisconnectingfromacallisquitesimple.Next,we'llenabletheclienttomuteandunmuteactivecalls. Muteorunmuteanactivecall MuteandUnmuteanActiveCall Sometimesyouwanttomuteorunmutethecurrentcall,haltinginputfromtheuser'smicrophone. WecanuseTwilio.Device.activeConnection()togettheactivecall,andthencallitsmute()methodtomuteorunmutetheuser'smicrophone. YouareviewinganoutdatedversionofthisSDK. Showsampleresponse ExampleJSONresponse Showcode public/dialer.jsx TheMuteToggle public/dialer.jsx NowyouhaveanideaofhowsimpleitistousetheTwilioClientinthebrowser.Therearemuchmorefeaturestoexplore.Next,let'sallowtheusertosendDTMFtones,incasetheyarecallinganautomatedphonesystem. SeehowtoworkwithDTMFtones SendDTMFTones Ifourusercallsanautomatedphonesystem,theymightneedtonavigateamenusystemusingourphone'skeypadandDTMFtones. DTMFstandsfor"Dual-tonemulti-frequencysignaling"andarethefamiliarsoundsyouhearwhendialingaphone.DTMFhavebeenstandardizedsotheycanbeunderstoodanddecodedbymachines. ToplayDTMFtoneswiththeTwilio.jsclientlibraryweusethesendDigitsmethod,passingwhichdigittheuserpressedasoursoleargument. YouareviewinganoutdatedversionofthisSDK. Showsampleresponse ExampleJSONresponse Showcode public/dialer.jsx DigitInputHandler public/dialer.jsx Asyouhaveseen,sendingDTMFtonesinresponsetobuttonclicksisstraightforward.Lastlyourclientsmaywanttohangupacall.Let'sseehowwecandothatnext. Learnhowwehangupthecall HanguptheCall Lastly,ourusersshouldbeabletoendacall. ToachievethisweuseTwilio.Device.disconnectAll(),whichterminatesthecurrentcall. YouareviewinganoutdatedversionofthisSDK. Showsampleresponse ExampleJSONresponse Showcode public/dialer.jsx HangupCall public/dialer.jsx That'sit!Wecraftedanapplicationthatallowsouruserstomakebrowser-to-phonecallsusingTwilio.js. Wheretonext? WheretoNext? Ifyou'reanodedeveloperworkingwithTwilio,youmightalsoenjoythesetutorials: IVR:PhoneTreewithNode.jsandExpress EasilyroutecallerstotherightpeopleandinformationwithanIVR(interactivevoiceresponse)system. ClicktoCallwithNode.jsandExpress Click-to-callenablesyourcompanytoconvertwebtrafficintophonecallswiththeclickofabutton. Didthishelp? Thanksforcheckingthistutorialout!IfyouhaveanyfeedbacktosharewithuspleasecontactusonTwitter,we'dlovetohearit. Contributors: Ratethispage: Needsomehelp? Wealldosometimes;codeishard.Gethelpnowfromoursupportteam,orleanonthewisdomofthecrowdbyvisitingTwilio'sStackOverflowCollectiveorbrowsingtheTwiliotagonStackOverflow. YouareviewinganoutdatedversionofthisSDK. NextSample ExampleJSONresponse Thankyouforyourfeedback! Pleaseselectthereason(s)foryourfeedback.Theadditionalinformationyouprovidehelpsusimproveourdocumentation: IfapplicablefillinthecountrieswhereyouareusingTwilio Missinginformationorcode Contentisconfusingorhardtofollow Inaccurateoroutdatedinformation Brokenlinkortypo Didnotsolvemyproblem Contentiseasytofollow Solvedmyproblem Other Sendyoursuggestions Needhelp?TalktoSupport ProtectedbyreCAPTCHA–Privacy-Terms Sendingyourfeedback... 🎉Thankyouforyourfeedback! Somethingwentwrong.Pleasetryagain. Thanksforyourfeedback! Referusandget$10in3simplesteps! Step1 Getlink Getafreepersonalreferrallinkhere Step2 Give$10 Yourusersignsupandupgradeusinglink Step3 Get$10 1,250freeSMSesOR1,000freevoiceminsOR12,000chatsORmore Learnmoreaboutthereferralprogram