SlideShare a Scribd company logo
TwitchCon 2018 San Jose, California
Greg Humphreys
Extensions Tech Lead
@deflatormouse7
Andy Morrell
Dev Speedrunner
@LuckyNoS7evin
Twitch Extensions 101
TwitchCon 2018 San Jose, California
What are
Extensions?
Twitch Extensions 101
Twitch Extensions 101
TwitchCon 2018 San Jose, California
Extension
Architecture
TwitchCon 2018 San Jose, California
Extension Architecture
Extension Backend
Service (EBS)
/broadcast
Twitch API
Browser
Extension Helper
Iframe
Twitch PubSub
Twitch CDN
Front-end
Javascript / HTML
TwitchCon 2018 San Jose, California
Viewer
HTML
TwitchCon 2018 San Jose, California
Viewer
HTML
TwitchCon 2018 San Jose, California
Configuration
HTML
TwitchCon 2018 San Jose, California
Live Dashboard
HTML
TwitchCon 2018 San Jose, California
Extension Communication
Extension
Viewer App
EBS (hosted
somewhere)
Twitch
PubSub
Extension
Viewer App
Extension
Viewer App
Extension
Viewer App
State Updates
(Broadcast, Websocket)
User Actions
(HTTP AJAX)
State Updates
(Twitch API)
TwitchCon 2018 San Jose, California
Extension
Authorization
TwitchCon 2018 San Jose, California
JSON Web Tokens (JWT)
Opaque User ID
Channel ID
Role
Twitch User ID
1
2
3
4
Authorization &
Per-User Data
createNewPoll(request) {
incomingToken = getJWT(request)
if not verifySignature(incomingToken, sharedSecret) {
return 401
}
if incomingToken["role"] != "broadcaster" {
return 403
}
questions = getPollQuestions(request)
poll = setupPoll(request)
outgoingToken = createAndSignJWT(
incomingToken["user_id"],
incomingToken["channel_id"],
sharedSecret)
sendPollOverPubsub(poll, outgoingToken)
}
1

2

3

4

5

6

7

8

9

10

11

12
13
14
15
16
17
18
New Poll Backend
Example
// Extract JWT
// Check for proper signature
// Now that we trust the
// JWT, verify that the
// broadcaster requested this
// Construct a new JWT
// using our shared signature
// and use that JWT to
// authorize a broadcast
// over Twitch PubSub
TwitchCon 2018 San Jose, California
Practical Considerations
and Common Mistakes
Andy Morrell @LuckyNoS7evin
Pitfalls &
Issues
PRACTICAL CONSIDERATIONS & COMMON MISTAKES
Scaling
Include the Extension Helper Library
- <script src="https://extension-
files.twitch.tv/helper/v1/twitch-
ext.min.js"></script>
PubSub Rate Limits
- 1 message per second, per channel
- 1 message per second to “global”
Secret Rotation
- Please keep your EBS safe; rotate your
secret every 12 hours
- Previous secret still available for up to an
hour
Zip Assets
- Wrong directory
TwitchCon 2018 San Jose, California
iOS Support
Join the Apple Developer Program, this is
required for you Extension tp be on mobile
iOS devices
JSON Web Tokens (JWT)
4 Types of JWT, 6 variations
User not Authenticated User Authenticated:
- User Authenticated & Not Sharing User ID
- User Authenticated & Sharing User ID
Shared
Pitfalls &
Issues
PRACTICAL CONSIDERATIONS & COMMON MISTAKES
Broadcaster
EBS
- Signed
- Signed with PubSub Broadcast to Channel
- Signed with PubSub Global
Signed
{

"exp": 1484242525,

"user_id": "14900522",

"role": "external"

}
Signed with PubSub Broadcast to Channel
{

"exp": 1484242525,

"user_id": "14900522",

"role": "external",
"channel_id": “14900522",
"pubsub_perms": {

send: ["broadcast"]

}

}
Signed with PubSub Global
{

"exp": 1484242525,

"user_id": "14900522",

"role": "external",
"channel_id": "all",

"pubsub_perms": {

send: ["global"]

}

}
1

2

3

4

5

6

7

8

9

10

11

12
13
14
15
16
17
18
19
20
21
22
23
24
TwitchCon 2018 San Jose, California
What is it for
- Get your Extension up and running quickly,
with faster iteration
- A lot better than when there was no rig
Developer Rig
PRACTICAL CONSIDERATIONS & COMMON MISTAKES
Where to get it
- https://dev.twitch.tv/dashboard/extensions
- https://github.com/twitchdev/developer-rig
Prerequisites
- Node
- Yarn
- Python 2
- Git
TwitchCon 2018 San Jose, California
Scaling
Bursty Traffic
- Single or Multiple Channel; build to your needs
- Multiple Channel
‣ Possible two million unique broadcasters a
month
‣ Hundreds of thousands of requests in bursts
Twitch AWS Program
- https://dev.twitch.tv/extensions/aws
My Architecture and Mistakes
- Single server
- Single application
- Microservices
PRACTICAL CONSIDERATIONS & COMMON MISTAKES
Other Talks To Attend
- Get Your Extension Discovered
- Rapid Prototyping Twitch Extensions
- Monetize your Extension One Bit at a Time
- Extension Design Patterns for Twitch Scale
Questions?
Documentation
https://dev.twitch.tv/docs/extensions
Forums
https://discuss.twitch.tv/c/extensions
Twitter
@TwitchDev
@deflatormouse7, @TheS7evin
Where to go from here?

More Related Content

Twitch Extensions 101

  • 1. TwitchCon 2018 San Jose, California Greg Humphreys Extensions Tech Lead @deflatormouse7 Andy Morrell Dev Speedrunner @LuckyNoS7evin
  • 3. TwitchCon 2018 San Jose, California What are Extensions?
  • 6. TwitchCon 2018 San Jose, California Extension Architecture
  • 7. TwitchCon 2018 San Jose, California Extension Architecture Extension Backend Service (EBS) /broadcast Twitch API Browser Extension Helper Iframe Twitch PubSub Twitch CDN Front-end Javascript / HTML
  • 8. TwitchCon 2018 San Jose, California Viewer HTML
  • 9. TwitchCon 2018 San Jose, California Viewer HTML
  • 10. TwitchCon 2018 San Jose, California Configuration HTML
  • 11. TwitchCon 2018 San Jose, California Live Dashboard HTML
  • 12. TwitchCon 2018 San Jose, California Extension Communication Extension Viewer App EBS (hosted somewhere) Twitch PubSub Extension Viewer App Extension Viewer App Extension Viewer App State Updates (Broadcast, Websocket) User Actions (HTTP AJAX) State Updates (Twitch API)
  • 13. TwitchCon 2018 San Jose, California Extension Authorization
  • 14. TwitchCon 2018 San Jose, California JSON Web Tokens (JWT) Opaque User ID Channel ID Role Twitch User ID 1 2 3 4 Authorization & Per-User Data
  • 15. createNewPoll(request) { incomingToken = getJWT(request) if not verifySignature(incomingToken, sharedSecret) { return 401 } if incomingToken["role"] != "broadcaster" { return 403 } questions = getPollQuestions(request) poll = setupPoll(request) outgoingToken = createAndSignJWT( incomingToken["user_id"], incomingToken["channel_id"], sharedSecret) sendPollOverPubsub(poll, outgoingToken) } 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12 13 14 15 16 17 18 New Poll Backend Example // Extract JWT // Check for proper signature // Now that we trust the // JWT, verify that the // broadcaster requested this // Construct a new JWT // using our shared signature // and use that JWT to // authorize a broadcast // over Twitch PubSub
  • 16. TwitchCon 2018 San Jose, California Practical Considerations and Common Mistakes Andy Morrell @LuckyNoS7evin
  • 17. Pitfalls & Issues PRACTICAL CONSIDERATIONS & COMMON MISTAKES Scaling Include the Extension Helper Library - <script src="https://extension- files.twitch.tv/helper/v1/twitch- ext.min.js"></script> PubSub Rate Limits - 1 message per second, per channel - 1 message per second to “global” Secret Rotation - Please keep your EBS safe; rotate your secret every 12 hours - Previous secret still available for up to an hour Zip Assets - Wrong directory
  • 18. TwitchCon 2018 San Jose, California iOS Support Join the Apple Developer Program, this is required for you Extension tp be on mobile iOS devices JSON Web Tokens (JWT) 4 Types of JWT, 6 variations User not Authenticated User Authenticated: - User Authenticated & Not Sharing User ID - User Authenticated & Sharing User ID Shared Pitfalls & Issues PRACTICAL CONSIDERATIONS & COMMON MISTAKES Broadcaster EBS - Signed - Signed with PubSub Broadcast to Channel - Signed with PubSub Global
  • 19. Signed {
 "exp": 1484242525,
 "user_id": "14900522",
 "role": "external"
 } Signed with PubSub Broadcast to Channel {
 "exp": 1484242525,
 "user_id": "14900522",
 "role": "external", "channel_id": “14900522", "pubsub_perms": {
 send: ["broadcast"]
 }
 } Signed with PubSub Global {
 "exp": 1484242525,
 "user_id": "14900522",
 "role": "external", "channel_id": "all",
 "pubsub_perms": {
 send: ["global"]
 }
 } 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12 13 14 15 16 17 18 19 20 21 22 23 24
  • 20. TwitchCon 2018 San Jose, California What is it for - Get your Extension up and running quickly, with faster iteration - A lot better than when there was no rig Developer Rig PRACTICAL CONSIDERATIONS & COMMON MISTAKES Where to get it - https://dev.twitch.tv/dashboard/extensions - https://github.com/twitchdev/developer-rig Prerequisites - Node - Yarn - Python 2 - Git
  • 21. TwitchCon 2018 San Jose, California Scaling Bursty Traffic - Single or Multiple Channel; build to your needs - Multiple Channel ‣ Possible two million unique broadcasters a month ‣ Hundreds of thousands of requests in bursts Twitch AWS Program - https://dev.twitch.tv/extensions/aws My Architecture and Mistakes - Single server - Single application - Microservices PRACTICAL CONSIDERATIONS & COMMON MISTAKES
  • 22. Other Talks To Attend - Get Your Extension Discovered - Rapid Prototyping Twitch Extensions - Monetize your Extension One Bit at a Time - Extension Design Patterns for Twitch Scale