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.

Thursday, September 26, 13

#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?

Thursday, September 26, 13

#TWILIOCON

A brief history of MMS & Twilio Picture Messaging.

Thursday, September 26, 13

#TWILIOCON

SMS was never meant to be

It was an accident.

the most popular messaging format.

Thursday, September 26, 13

#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. ;)

Thursday, September 26, 13

#TWILIOCON

Then there was MMS:The 2nd System Effect.

Thursday, September 26, 13

#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:

Thursday, September 26, 13

#TWILIOCON

New Protocol.Then there was MMS:

Thursday, September 26, 13

#TWILIOCON

Thursday, September 26, 13

#TWILIOCON

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

Thursday, September 26, 13

#TWILIOCON

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

That’s cool, right?

Thursday, September 26, 13

#TWILIOCON

No SMIL. No SOAP. No Worries.

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

Thursday, September 26, 13

#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

Thursday, September 26, 13

#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'

Thursday, September 26, 13

#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

Thursday, September 26, 13

#TWILIOCON

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

Thursday, September 26, 13

#TWILIOCON

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

Thursday, September 26, 13

#TWILIOCON

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

Thursday, September 26, 13

#TWILIOCON

How to Receive Picture Messages with Twilio.

Thursday, September 26, 13

#TWILIOCON

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

How to Receive Picture Messages with Twilio.

1

Thursday, September 26, 13

#TWILIOCON

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

TwilioCDN

How to Receive Picture Messages with Twilio.

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

1 2

Thursday, September 26, 13

#TWILIOCON

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

TwilioCDN

http://www.example.com/

How to Receive Picture Messages with Twilio.

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

Thursday, September 26, 13

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 #

Thursday, September 26, 13

#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') ]

Thursday, September 26, 13

#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"

Thursday, September 26, 13

#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",

Thursday, September 26, 13

#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.

Thursday, September 26, 13

#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).

Thursday, September 26, 13

#TWILIOCON

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

Thursday, September 26, 13

#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

Thursday, September 26, 13

#TWILIOCON

Use HTTP because HTTP is universal

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

Thursday, September 26, 13

#TWILIOCON

If we send MediaUrls[]

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

params[:MediaUrls] = [...]

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

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

Thursday, September 26, 13

#TWILIOCON

If we send MediaUrls

$_POST[“MediaUrls”] = only first URL

params[:MediaUrls] = only first URL

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

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

Thursday, September 26, 13

#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'

Thursday, September 26, 13

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 #

Thursday, September 26, 13

#TWILIOCON

<TwiML>

<Sms />

<Message />

<Redirect />

<Message />

Thursday, September 26, 13

#TWILIOCON

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

<TWIML>

Thursday, September 26, 13

#TWILIOCON

Example: Real-time Gallery.

Thursday, September 26, 13

#TWILIOCON

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

Example: Real-time Gallery.

1

Thursday, September 26, 13

#TWILIOCON

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

Example: Real-time Gallery.

2 Twilio stores the Photo in the TwilioCDN.

1 2

Thursday, September 26, 13

#TWILIOCON

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

Example: Real-time Gallery.

2 Twilio stores the Photo in the TwilioCDN.

http://twiliocdn/ .jpg

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

1 2

3

Thursday, September 26, 13

#TWILIOCON

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

Example: Real-time Gallery.

2 Twilio stores the Photo in the TwilioCDN.

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

Thursday, September 26, 13

QUESTIONS?@twilsher

twilsher@twilio.com@kelvl

kelvin@twilio.com

Thursday, September 26, 13