Twilio MMS: Taming the Complexity

#TWILIOCON

Twilio MMS: Taming the Complexity

THOMAS WILSHER, LEAD ENGINEER, MESSAGING @TWILIOKELVIN LAW, SOFTWARE ENGINEER, MESSAGING @ TWILIO

Thursday, September 26, 13

#TWILIOCON

Hi. I’m Thomas Wilsher.I’m the Messaging Tech Lead at Twilio.


#TWILIOCON

By the end of this talk,

1. What is the difference between SMS, MMS, and Twilio Picture Messaging?

you’ll be able to answer these questions.

2. How do I send Twilio Picture Messages?

3. How can I receive Picture Messages in my apps?


#TWILIOCON

A brief history of MMS & Twilio Picture Messaging.


#TWILIOCON

SMS was never meant to be

It was an accident.

the most popular messaging format.


#TWILIOCON

(1/2) SMS is totally limited. You can only send a message to 1 recipient at a time and how am I supposed to fully express myself in 160

(2/2) characters or less?

I see what you mean haha. Write shorter messages I guess. ;)


#TWILIOCON

Then there was MMS:The 2nd System Effect.


#TWILIOCON

New Content Types.

Images (JPEG, GIF,

PNG, WBMP) and video.

MULTIMEDIAMessages longer than

140 characters!

TEXTSlide show support.

Thought to be a big deal.

SMIL

Then there was MMS:


#TWILIOCON

New Protocol.Then there was MMS:


#TWILIOCON


#TWILIOCON

Great news everyone!There’s an API for MMS.


#TWILIOCON

Oh, by the way...our API is SOAP only.

That’s cool, right?


#TWILIOCON

No SMIL. No SOAP. No Worries.

There’s no need to fear - Twilio Picture Messaging is here.


#TWILIOCON

Keepin’ things RESTful.Thanks to our Uni!ed Messaging API, you can send

Twilio format you know and love.

both SMS and MMS messages using the same


#TWILIOCON

Let’s look at an example Outbound API Request.

POST https://api.twilio.com/2010-04-01/Accounts/AC123/Messages/ From='894546' To='16505766372' Body='Test MMS' MediaUrl='http://twilio.com/logo.png'


https://api.twilio.com/2010-04-01/Accounts/AC648d937704b94309822578b85ff1227f/Messages/'


http://www.twilio.com/packages/company/img/logos_downloadable_round.png


#TWILIOCON

POST https://api.twilio.com/.../Messages/ MediaUrl='http://example.com/ .jpg'

1 An app sends a Message with a media URL

http://www.example.com/

Sending Picture Messages with Twilio.

2 Twilio enqueues the message and downloads the media in the background

3 MMS message is sent to phone

1

3

2



























http://www.example.com/app.php








#TWILIOCON

Sending Picture Messages.Twilio Style.Let’s see some code.


#TWILIOCON

Hi. I’m Kelvin LawI’m an Messaging Engineer at Twilio.


#TWILIOCON

Receiving Picture Messages. The Hitchhiker’s Guide.Let’s see what it takes to receive a picture message using Twilio.


#TWILIOCON

How to Receive Picture Messages with Twilio.


#TWILIOCON

1 A user sends an Message with an attached Photo to a Twilio Number.


1


#TWILIOCON


TwilioCDN


2 Twilio stores the Photo in the TwilioCDN and responds with it’s location.

1 2


#TWILIOCON


TwilioCDN

http://www.example.com/


2 Twilio stores the Photo in the TwilioCDN and responds with it’s location. http://twiliocdn/ .jpg

3 A webhook !res a POST to your app pointing to the Photo’s new home on the CDN.

1 2

3




TwiML RequestMessageSid

AccountSid

From

To

Body

NumMedia

MediaUrl#

MediaContentType#

A 34 character unique identifier for the message.

The 34 character ID of your Account

From Number

To Number

Text Body of the Message

# of Media Elements in Message

Url of Media Element #

ContentType of Media Element #


#TWILIOCON

[ ('AccountSid', u'AC648d937704b94309822578b85ff1227f'), ('MessageSid', u'MM150b3799a0adfeaee0ae5e6635bf2ab3'), ('From', u'+14159944805'), ('To', u'894546'), ('Body', u'Hello TwilioCon!'), ('FromCity', u'SAN FRANCISCO'), ('FromState', u'CA'), ('FromZip', u'94112'), ('FromCountry', u'US') ('NumMedia', u'1'), ('MediaUrl0', u'https://api.twilio.com/2010-04-01/Accounts/AC648d937704b94309822578b85ff1227f/Messages/MM150b3799a0adfeaee0ae5e6635bf2ab3/Media/MEf920a1af0983ba2911ec16a1f2bb2378'), ('MediaContentType0', u'image/jpeg'), ('ApiVersion', u'2010-04-01'), ('SmsSid', u'MM150b3799a0adfeaee0ae5e6635bf2ab3'), ('SmsMessageSid', u'MM150b3799a0adfeaee0ae5e6635bf2ab3') ]


https://api.twilio.com/2010-04-01/Accounts/AC648d937704b94309822578b85ff1227f/Messages/MM150b3799a0adfeaee0ae5e6635bf2ab3/Media/MEf920a1af0983ba2911ec16a1f2bb2378'






#TWILIOCON

New Param: MessageSid

Contains a unique, 34 character identi!er for all types of

messages. SmsSid will still be sent for backwards compatibility.

Ex. “MessageSid”: “MM150b3799a0adfeaee0ae5e6635bf2ab3"


#TWILIOCON

New Param: NumMedia

The NumMedia param tells you how many media attachments a

message has. Defaults to 0 for SMS messages.

Ex. “NumMedia”: “2",


#TWILIOCON

New Param: MediaUrl#

Ex. MediaUrl0 -> MediaUrlN

“MediaUrl0”: “https://api.twilio.com/2010-04-01/...",“MediaUrl1”: “https://api.twilio.com/2010-04-01/...",

Each media attachment gets its own MediaUrl# parameter pointing

to the image hosted on the Twilio CDN.


https://api.twilio.com/2010-04-01/

https://api.twilio.com/2010-04-01/

#TWILIOCON

New Param: MediaContentType#

Ex. MediaContentType0 -> MediaContentTypeN

“MediaContentType0”: “image/png",“MediaContentType1”: “image/jpeg",

Each media attachment gets its own MediaContentType# parameter telling

you what kind of media it is (using the standard HTTP content types).


#TWILIOCON

Why not just use MultiValue parameters?Wait a minute...


#TWILIOCON

What are MultiValue Parameters?

POST https://www.myawesomeapp.com/webhook.php From='894546' To='16505766372' Body='<3 TwilioCon!' MediaUrl[]='http://twilio.com/logo1.png' MediaUrl[]='http://twilio.com/logo2.png' MediaUrl[]='http://twilio.com/logo3.png' } Overloaded










#TWILIOCON

Use HTTP because HTTP is universal

Can’t send MultiValue params because of bad HTTP framework support


#TWILIOCON

If we send MediaUrls[]

$_POST[“MediaUrls”] = array(...)

params[:MediaUrls] = [...]

body[‘MediaUrls’] = [...]

request.form.getlist(‘MediaUrls[]’) = [...]


#TWILIOCON

If we send MediaUrls

$_POST[“MediaUrls”] = only first URL

params[:MediaUrls] = only first URL

body[‘MediaUrls’] = [...]

request.form.getlist(‘MediaUrls’) = [...]


#TWILIOCON

What are MultiValue Parameters?

POST https://www.myawesomeapp.com/webhook.php From='894546' To='16505766372' Body='<3 TwilioCon!' MediaUrl0='http://twilio.com/logo1.png' MediaUrl1='http://twilio.com/logo2.png' MediaUrl2='http://twilio.com/logo3.png'










TwiML RequestMessageSid

AccountSid

From

To

Body

NumMedia

MediaUrl#

MediaContentType#

A 34 character unique identifier for the message.

The 34 character ID of your Account

From Number

To Number

Text Body of the Message

# of Media Elements in Message

Url of Media Element #

ContentType of Media Element #


#TWILIOCON

<TwiML>

<Sms />

<Message />

<Redirect />

<Message />


#TWILIOCON

<Response> <Message> <Body>Hello TwilioCon!</Body> <Media>https://twilio.com/logo.png</Media> <Media>https://twilio.com/logo2.png</Media> </Message> </Response>

<TWIML>


#TWILIOCON

Example: Real-time Gallery.


#TWILIOCON

1 Send a Message with an attached Photo to a Twilio Number.


1


#TWILIOCON

1 Send a Message with an attached Photo to a Twilio Number. TwilioCDN


2 Twilio stores the Photo in the TwilioCDN.

1 2


#TWILIOCON




http://twiliocdn/ .jpg

3 A webhook !res a POST to real-time gallery app.

1 2

3


#TWILIOCON




http://twiliocdn/ .jpg

3 A webhook !res a POST to real-time gallery app.

1 2

3

4 Use Pusher to send the photo to the browser in real-time with websockets.

4


QUESTIONS?@twilsher

[email protected]@kelvl

[email protected]


mailto:[email protected]




Twilio MMS: Taming the Complexity

Technology

Transcript of Twilio MMS: Taming the Complexity