Mashing up Voice and the Web Through Open Source and XML Dan York - PowerPoint PPT Presentation

July 23, 2008 OSCON 2008 Mashing up Voice and the Web Through Open Source and XML Dan York Dir. of Emerging Comm Tech dyork@voxeo.com

Why Voice?

The Problem

Telephony Sucks

Complex Photo: http://www.flickr.com/photos/28481088@N00/

Arcane

Proprietary

Simple

Ubiquitous

Open

The Solution?

Phone Developers Web Developers Web Developers

They Understand XML

Let's build an API...

Proprietary = Lock-In

Open

Standards Matter

Lock-In

Open

The Building Blocks

Building Blocks VoiceXML CCXML SIP

Application XML+HTTP Platform SIP Network

Application XML+HTTP Platform SIP Network

Session Initiation Protocol -Session Initiation Protocol (SIP) defines how to establish a communication session between two endpoints -Primarily used for voice, but can for IM or virtually any other protocol -Almost always used in client/server configuration with "SIP proxies" in control of "SIP endpoints" - Work going on in P2PSIP - see www.p2psip.org -Text-based protocol, originally modeled on HTTP

SIP Communication INVITE Alice Bob 180 RINGING 200 OK ACK RTP (voice) BYE 200 OK

Proxy Proxy SIP A B P SIP I S Alice Bob RTP

SIP Resources -Internet Engineering Task Force (IETF) - RFC 3261 - Hitchhiker’s Guide to SIP -Open Source Info - VoIP Info Wiki: www.voip-info.org -Industry Sites - SIP Forum: www.sipforum.org - SIP Foundry: www.sipfoundry.org - OpenSBC: www.opensourcesip.org

Open Source SIP Software -Systems - Asterisk: www.asterisk.org - sipXecs: www.sipfoundry.org - FreeSWITCH: www.freeswitch.org - OpenSER: www.openser.org -SIP Stacks - reSIProcate: www.resiprocate.org -Phones: - Gizmo: www.gizmoproject.org -MANY, many more: www.voip-info.org

Application XML+HTTP Platform SIP Network

So how does this work?

Web Browser Diagram HTTP App Web Web ? Browser Svr Svr HTML PHP perl python ruby servlets Java ??? XML XML

Web Browser Diagram - Thin Client HTTP Web App Web Thin ? Browser Protocol Client Svr Svr (on svr) HTML PHP perl python ruby servlets Java ??? XML XML

Voice Browser Diagram HTTP Voice App Web ? Phone Browser Audio Svr Svr (on svr) XML PHP perl python ruby servlets Java ??? XML XML

VoiceXML -W3C standard to define speech dialogs -Defines prompts and grammars that together create a phone application -Thousands of developers -30+ Open source projects -Can include JavaScript -http://www.w3.org/TR/voicexml21/

VoiceXML Hello World <?xml version="1.0" encoding="UTF-8"?> <vxml version = "2.1" > <form> <block> <prompt> Hello World. This is my first telephone application. </prompt> </block> </form> </vxml>

VoiceXML Elements assign menu audio meta block noinput break nomatch catch one-of choice option clear paragraph data param disconnect phoneme else prompt elseif property emphasis record enumerate reprompt error return example rule exit ruleref field say-as filled script foreach send form sentence goto sub grammar subdialog help submit if tag initial throw item token link transfer log value mark var

CCXML -Call Control XML (CCXML) is the W3C standard for call control using XML -Sister standard to VoiceXML -Integrates with VoiceXML for dialog control -Provides a framework for issuing call control commands and handling call control events -http://www.w3.org/TR/ccxml/

CCXML and State Alerting Connected Disconnected (Ringing) Events trigger transitions between states.

CCXML Hello World <?xml version="1.0" encoding="UTF-8"?> <ccxml version="1.0"> <eventprocessor> <transition event="connection.alerting"> <log expr="'***** CONNECTION ALERTING *****'"/> <if cond="event$.connection.remote == '8315551234'"> <reject/> <else/> <accept/> </if> </transition> <transition event="connection.connected"> <log expr="'***** CALL WAS ANSWERED *****'"/> </transition> <transition event=”connection.disconnected”> <log expr=”‘*** Call was disconnected ***’”/> <exit/> </transition> <transition event="error.*"> <log expr="'an error has occured (' + event$.reason + ')'"/> <exit/> </transition> </eventprocessor> </ccxml>

CCXML Elements accept foreach assign goto authenticate if cancel join createcall log createccxml meta createconference metadata destroyconference move dialogprepare redirect dialogstart reject dialogterminate script disconnect send else transition elseif unjoin eventprocessor var exit fetch

ENOUGH ALREADY... SHOW ME THE CODE!

Application XML+HTTP For this demo, I'm using Platform evolution.voxeo.com but it could be any VXML platform SIP Network

Demo #1 Seeking to solve the universal question...

IS DOWN?

Demo #1 - Is Twitter Down? -VoiceXML & JavaScript -Connects to www.istwitterdown.com -Uses JavaScript to parse the result -Relays result to caller using Text-To-Speech -Demo: - 1-206-701-7091 - sip:9996078017@sip.voxeo.net

Demo #1: VoiceXML & JavaScript <?xml version="1.0" encoding="UTF-8"?> <vxml version = "2.1"> <var name="MyData"/> <form id="F1"> <script> <![CDATA[ function GetData(d,t,n) { return (d.getElementsByTagName(t).item(n).firstChild.data); } ]]> </script> <block> <data name="MyData" src="http://www.istwitterdown.com/"/> <assign name="document.MyData" expr="MyData.documentElement"/> <assign name="status" expr="GetData(MyData,'a',0)"/> <if cond="status=='No'"> <prompt>Twitter is currently up. Yea!</prompt> <else/> <prompt>Twitter is currently down. </prompt> </if> </block> </form> </vxml>

Demo #2 Listen to identi.ca

Demo #2 - Listen to identi.ca -VoiceXML -Reads out latest identi.ca notices -Caller says: - "friends" - "replies" - "public" -Caveat - hardcoded to single identi.ca user -Demo - 1-617-401-7088 - sip:9992002598@sip.voxeo.net

Demo #2: VoiceXML <?xml version="1.0" encoding="UTF-8"?> <vxml version = "2.1"> <var name="MyData"/> <form id="F1"> <script> <![CDATA[ function GetData(d,t,n) { return (d.getElementsByTagName(t).item(n).firstChild.data);} ]]> </script> <field name="Choice"> <audio src="../audio/identicachoice.wav"/> <grammar xmlns="http://www.w3.org/2001/06/grammar" xml:lang="en-US" root="MYRULE"> <rule id="MYRULE"> <one-of> <item>friends</item> <item>replies</item> <item>public</item> </one-of> </rule> </grammar> <noinput>I did not hear anything. Please try again. <reprompt/> </noinput> <nomatch> I did not recognize that word. Please try again. <reprompt/> </nomatch> </field> <filled namelist="Choice"> <if cond="Choice == 'friends'"> <data name="MyData" src="http://identi.ca/danyork/all/rss?limit=1"/> <assign name="document.MyData" expr="MyData.documentElement"/> <prompt>Your last notice is from <value expr="GetData(MyData,'dc:creator',0)"/>. The notice is: <value expr="GetData(MyData,'title',2)"/>. </prompt> <elseif cond="Choice == 'replies'"/ <data name="MyData" src="http://identi.ca/danyork/replies/rss?limit=1"/> <assign name="document.MyData" expr="MyData.documentElement"/> <prompt>Your last reply is from <value expr="GetData(MyData,'dc:creator',0)"/>. The reply is: <value expr="GetData(MyData,'title',2)"/>.</prompt> <elseif cond="Choice == 'public'"/> <data name="MyData" src="http://identi.ca/rss?limit=1"/> <assign name="document.MyData" expr="MyData.documentElement"/> <prompt>The last public notice is from <value expr="GetData(MyData,'dc:creator',0)"/>. The notice is: <value expr="GetData(MyData,'title',1)"/>. </prompt> </if> <prompt> That is all. Thank you for calling in. </prompt> </filled> </form> </vxml>