As HTML5 video gains widespread adoption, we have seen significant advances in a short period of time. While EME and webRTC get a lot of attention, they are not the only tools with the potential to change the way we stream video in the future. In this presentation, we discuss some of the new browser APIs that could usher in the next generation of HTML5 video: from the browser Fetch API to Service Workers to network side improvements such as HTTP2 and QUIC. This presentation first discusses what these new APIs can do, as well as the advantages and possible drawbacks of using them. We then examine the state of the art and obstacles to adoption (standardization, politics, etc.) to offer broadcasters a glimpse of what the future will hold.

1. The next generation of network and browser
APIs that could change video streaming
Streaming Forum London
February 28, 2017
12:00 to 12:25 pm

2. Streamroot peer-accelerated delivery enables large-scale content
providers to increase the quality of online video while drastically
improving the economics of OTT business.
Who are we?

3. © 2017 Streamroot - All rights reservedInfinite scale, limitless delivery.Infinite scale, limitless delivery.
1. Network-side standards & protocols
a. Application layer protocol: HTTP/2
b. Transport layer protocol: QUIC
1. Client-side APIs
a. Fetch API
b. Service workers
Where we’re going and what we’re
going to talk about.

4. Network protocols1

5. © 2017 Streamroot - All rights reservedInfinite scale, limitless delivery.
Where are we now?
http/1.1
PROs
Ubiquitous, enabled large scale caching infrastructure (CDN)
CONs
Congestion prone
Multiple connections
RTT sensitive
Client pull approach
Verbose headers
RESULT: induces network, server & client overhead, latency for streaming video

6. © 2017 Streamroot - All rights reservedInfinite scale, limitless delivery.
Http/2 improvements
Request / response multiplexing
Several asynchronous HTTP requests over a single TCP connection

7. © 2017 Streamroot - All rights reservedInfinite scale, limitless delivery.
Http/2 improvements
Request / response multiplexing
Several asynchronous HTTP requests over a single TCP connection

8. © 2017 Streamroot - All rights reservedInfinite scale, limitless delivery.
Http/2 improvements
Binary framing:
streams, messages
and frames
Request message
Response message
Stream 1
Stream N
HEADERS frame (stream 1)
:status:
:version:
:server:
:vary:
...
200
HTTP/2.0
nginx/1.0.11
Accept-Encoding
...
DATA frame (stream 1)
...response payload...
HEADERS frame (stream 1)
:method:
:path:
:version:
:scheme:
:user-agent:
GET
/index.html
HTTP/2.0
https
Chrome/26.0.1410.65
TCP Connection

9. © 2017 Streamroot - All rights reservedInfinite scale, limitless delivery.
Http/2 improvements
Request prioritization
Flow control
Server push
Header compression
Additional improvements
Eliminate HoL blocking / congestion
Minimize protocol overhead
Lower latency

10. © 2017 Streamroot - All rights reservedInfinite scale, limitless delivery.
Http/1.1 - Http/2 stacks
http1/1
TLS Session
http1/1
TLS Session
http1/1
TLS Session
http1/1
TLS Session
IP Network
TCP
Connection
TCP
Connection
TCP
Connection
TCP
Connection
http1/1 http1/1 http1/1 http1/1
TCP Connection
TLS Session
HTTP/2
Connection
HTTP/2
Stream
HTTP/2
Stream
HTTP/2
Stream
HTTP/2
Stream
IP Network
Browser Browser

11. © 2017 Streamroot - All rights reservedInfinite scale, limitless delivery.
Http/2 in the field
Current browser support
Total: 74% full support; 5% partial
IE
11
Edge
14
Firefox
51
Chrome
56
Safari
10
Opera
42
iOS
Safari
10.2
Opera
Mini
all
Android
browser
53
Chrome for
Android
55
15 52 57 10.1 43
50 55 9.3 4.4.4
Deployed on top websites: Twitter, Facebook, Yahoo, Google...

12. © 2017 Streamroot - All rights reservedInfinite scale, limitless delivery.
Http/2 for streaming video
Possibilities
● Better startup-time
● Lower latency
● Potential quicker ABR switches
Further R&D
● Server push & segment prioritization logic
● Flow control logic
Limitations
● Still subject to TCP constraints...

13. © 2017 Streamroot - All rights reservedInfinite scale, limitless delivery.
Quic
Transport protocol developed by Google to be optimized for HTTP2
Replacement for TCP based on UDP to reduce RTT sensitivity
HTTP/2
HTTP/2
TLS 1.2 QUIC
UDP
TCP
Q
U
I
C
uick
DP
nternet
Connections
IP NetworkIP Network

14. © 2017 Streamroot - All rights reservedInfinite scale, limitless delivery.
Quic
Key features:
● Shorter RTT connection times
● Multiplexing and flow control to avoid head of line blocking
● Forward error correction
● Improved congestion control
● Connection semantics & reliability equivalent to TCP
● Encryption over the entire channel
Q
U
I
C
uick
DP
nternet
Connections

15. © 2017 Streamroot - All rights reservedInfinite scale, limitless delivery.
Quic deployment status
Deployment largely limited to Google stack; default on Chromium
QUIC Working Group at IETF - not yet standard
Support on Google websites, including Youtube
Q
U
I
C
uick
DP
nternet
Connections

16. Browser-side APIs2

17. © 2017 Streamroot - All rights reservedInfinite scale, limitless delivery.
XHR
Fetch
● Modern alternative to XMLHttpRequest (XHR)
● Relies heavily on Streams API
What is the fetch API?
Array
Buffer
Source
Buffer
fetch()
Source
Buffer
Readable Stream

18. © 2017 Streamroot - All rights reservedInfinite scale, limitless delivery.
Fetch
Current browser support
Total: 63% full support
IE
11
Edge
14
Firefox
51
Chrome
56
Safari
10
Opera
42
iOS
Safari
10.2
Opera
Mini
all
Android
browser
53
Chrome for
Android
55
15 52 57 10.1 43
50 55 9.3 4.4.4

19. © 2017 Streamroot - All rights reservedInfinite scale, limitless delivery.
Service Workers
● Programmable network proxy in form of a script running between web pages/ network
● Intercepts, handles, modifies, redirects, etc. programmatically changing requests / responses
● Relies heavily on Promises
What is it?
● DVR / offline viewing
● Content prediction / pre-caching
● Transmuxing / transcoding...
Applications to video streaming

20. © 2017 Streamroot - All rights reservedInfinite scale, limitless delivery.
Service Workers
Current browser support
● HTTPS only
● Fetch only, no XHR
● Beware of API support
Limitations
Total: 62% partial support
IE
11
Edge
14
Firefox
51
Chrome
56
Safari
10
Opera
42
iOS
Safari
10.2
Opera
Mini
all
Android
browser
53
Chrome for
Android
55

21. So what happens when
we use it all together…?

22. © 2017 Streamroot - All rights reservedInfinite scale, limitless delivery.

23. © 2017 Streamroot - All rights reservedInfinite scale, limitless delivery.
HTTP2
QUIC
fetch()
Service workers
Faster startup
Lower latency
Less network / device overhead
Lower CPU use
Higher bandwidth
Quicker seeking
Low-latency use cases
Transmuxing
Transcoding
DVR
Offline viewing
Pre-caching
...
All together...

24. Thank you!
Infinite scale, limitless delivery.

25. © 2017 Streamroot - All rights reservedInfinite scale, limitless delivery.
Resources / contact us!
Erica Beavers, Head of Partnerships & Marketing
erica@streamroot.io
Resources:
HTTP/2 overview from `High Performance Browser Networking` (Ilya Grigorik) https://hpbn.co/http2/
HTTP/2 github pages maintained by the IETF HTTP working group https://http2.github.io/
QUIC overview (Matttias Genar) https://ma.ttias.be/googles-quic-protocol-moving-web-tcp-udp/
QUIC FAQ for geeks: https://docs.google.com/document/d/1lmL9EF6qKrk7gbazY8bIdvq3Pno2Xj_l_YShP40GLQE/edit
HTTP/2 & QUIC : TEACHING GOOD PROTOCOLS TO DO BAD THINGS (Kate Pearce/ Carl Vincent) : https://www.blackhat.com/docs/us-16/materials/us-
16-Pearce-HTTP2-&-QUIC-Teaching-Good-Protocols-To-Do-Bad-Things.pdf
Using Fetch: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
Service Worker API: https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API