This is a talk about Twilio's new Picture Messaging API given by Thomas Wilsher, the Messaging Tech Lead, and Kelvin Law, Messaging Software Engineer, at Twiliocon 2013.

1. #TWILIOCON
Twilio MMS: Taming the Complexity
THOMAS WILSHER, LEAD ENGINEER, MESSAGING @TWILIO
KELVIN LAW, SOFTWARE ENGINEER, MESSAGING @ TWILIO
Thursday, September 26, 13

2. #TWILIOCON
Hi. I’m Thomas Wilsher.
I’m the Messaging Tech Lead at Twilio.
Thursday, September 26, 13

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

4. #TWILIOCON
A brief history of MMS & Twilio Picture Messaging.
Thursday, September 26, 13

5. #TWILIOCON
SMS was never meant to be
It was an accident.
the most popular messaging format.
Thursday, September 26, 13

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

7. #TWILIOCON
Then there was MMS:The 2nd System Effect.
Thursday, September 26, 13

8. #TWILIOCON
New Content Types.
Images (JPEG, GIF,
PNG, WBMP) and video.
MULTIMEDIA
Messages longer than
140 characters!
TEXT
Slide show support.
Thought to be a big deal.
SMIL
Then there was MMS:
Thursday, September 26, 13

9. #TWILIOCON
New Protocol.Then there was MMS:
Thursday, September 26, 13

10. #TWILIOCON
Thursday, September 26, 13

11. #TWILIOCON
Great news everyone!
There’s an API for MMS.
Thursday, September 26, 13

12. #TWILIOCON
Oh, by the way...
our API is SOAP only.
That’s cool, right?
Thursday, September 26, 13

13. #TWILIOCON
No SMIL. No SOAP. No
Worries.
There’s no need to fear -
Twilio Picture Messaging is here.
Thursday, September 26, 13

14. #TWILIOCON
Keepin’ things RESTful.
Thanks to our Unified Messaging API, you can send
Twilio format you know and love.
both SMS and MMS messages using the same
Thursday, September 26, 13

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

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

17. #TWILIOCON
Sending Picture Messages.Twilio Style.
Let’s see some code.
Thursday, September 26, 13

18. #TWILIOCON
Hi. I’m Kelvin Law
I’m an Messaging Engineer at Twilio.
Thursday, September 26, 13

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

20. #TWILIOCON
How to Receive Picture Messages with Twilio.
Thursday, September 26, 13

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

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

23. #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 fires a POST to your
app pointing to the Photo’s new
home on the CDN.
1 2
3
Thursday, September 26, 13

24. TwiML Request
MessageSid
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

25. #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/MEf920a1af0983ba2911ec16a1f2bb2
('MediaContentType0', u'image/jpeg'),
('ApiVersion', u'2010-04-01'),
('SmsSid', u'MM150b3799a0adfeaee0ae5e6635bf2ab3'),
('SmsMessageSid', u'MM150b3799a0adfeaee0ae5e6635bf2ab3')
]
Thursday, September 26, 13

26. #TWILIOCON
New Param: MessageSid
Contains a unique, 34 character identifier for all types of
messages. SmsSid will still be sent for backwards compatibility.
Ex. “MessageSid”: “MM150b3799a0adfeaee0ae5e6635bf2ab3"
Thursday, September 26, 13

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

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

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

30. #TWILIOCON
Why not just use MultiValue parameters?
Wait a minute...
Thursday, September 26, 13

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

32. #TWILIOCON
Use HTTP because HTTP is universal
Can’t send MultiValue params because of bad
HTTP framework support
Thursday, September 26, 13

33. #TWILIOCON
If we send MediaUrls[]
$_POST[“MediaUrls”] = array(...)
params[:MediaUrls] = [...]
body[‘MediaUrls’] = [...]
request.form.getlist(‘MediaUrls[]’) = [...]
Thursday, September 26, 13

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

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

36. TwiML Request
MessageSid
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

37. #TWILIOCON
<TwiML>
<Sms />
<Message />
<Redirect />
<Message />
Thursday, September 26, 13

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

39. #TWILIOCON
Example: Real-time Gallery.
Thursday, September 26, 13

40. #TWILIOCON
1 Send a Message with an
attached Photo to a Twilio
Number.
Example: Real-time Gallery.
1
Thursday, September 26, 13

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

42. #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 fires a POST to real-
time gallery app.
1
2
3
Thursday, September 26, 13

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

44. QUESTIONS?
@twilsher
twilsher@twilio.com
@kelvl
kelvin@twilio.com
Thursday, September 26, 13