-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
117 lines (110 loc) · 7.58 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!doctype html>
<html>
<head>
<title>Sammy: Making video traffic a friendlier internet neighbor | Example implemenation</title>
<link rel="stylesheet" href="main.css" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
</head>
<body>
<header class="site-header">
<div class="wrapper">
<h1 class="site-title"><a href="/">Sammy</a></h1>
<nav class="site-nav">
<a class="page-link" href="/sammy.pdf">Research Paper</a>
<a class="button" href="mailto:sammy@brucespang.com">Contact</a>
</nav>
<h2 class="tagline">Making video traffic a friendlier internet neighbor</h2>
</div>
</header>
<main class="page-content" aria-label="Content">
<div class="wrapper">
<h2>About</h2>
<p>
Video streaming traffic today takes up <a href="https://www.sandvine.com/global-internet-phenomena-report-2022">60-75% of all bytes sent on the internet</a>.
Sammy is a joint project between Netflix and Stanford researchers to make video traffic friendlier to neighboring applications sharing the same networks.
</p>
<p>
Video traffic today is bursty. Every few seconds, video traffic switches between a period of sending data as fast as possible and a period of silence.
This burstiness has consequences on internet congestion—causing queueing delay and packet loss as <a href="https://tcpcc.systemsapproach.org/">congestion control algorithms</a> try to send as fast as possible into the network without causing packet loss.
</p>
<p>
Sammy aims to smooth out video traffic and reduce video throughput below the capacity of typical home networks. By reducing video throughput, Sammy can avoid congestion completely—eliminating queueing delay and packet loss, and making more bandwidth available for neighboring traffic.
In experiments run at Netflix, Sammy reduces chunk throughput (how fast Netflix sends data, when it is sending data) by more than 60%, without reducing video quality of experience.
</p>
<p>For more information, see the research paper published at SIGCOMM 2023: <a class="button" href="/sammy.pdf">Research Paper</a>
<h2>Dash.js Demo</h2>
<a class="button" href="https://github.com/brucespang/sammy">View on Github</a>
<p class="pad-top">
The following is a demo of Sammy running with an unmodified version of dash.js.
Sammy works by using information about the video to pick a <em>pace rate</em>, or upper limit on how fast the server will send.
</p>
<p>
For the first few requests, the video buffer is empty and Sammy picks a high pace rate and downloads video quickly in order to build up a buffer.
As the buffer fills up, Sammy picks lower and lower pace rates, down to close to the highest bitrate of the video.
Note how the throughput the video client measures from the network decreases to match the pace rate as more and more chunks are downloaded.
</p>
<p>
<b>Setup:</b> We use <a href="https://fastly.com">Fastly</a> as a CDN, which has built-in <a href="https://developer.fastly.com/reference/vcl/variables/client-connection/client-socket-pace/">support for pacing</a>. We pick a pace rate 3x higher than the maximum of all encoding bitrates when the buffer is empty, and 1.5x higher when the buffer is full.
We make no distinction between playing and not playing states, so you can see pacing take effect without watching the video.
</p>
<p>
<b>Note on QoE for dash.js:</b> One of Sammy's main contributions is that it reduces chunk throughputs by 60%, while maintaining the QoE as Netflix's existing production algorithm.
In this demo, we are only showing how the ABR algorithm can pick pace rates, and that the end-to-end pacing functionality works.
We make no claims about QoE parity to dash.js today—achieving QoE parity is left as an exercise to the reader (but interested readers should reach out to the <a href="https://brucespang.com">first author</a>, who would be happy to give advice).
</p>
<div id="video-container">
<video id="video-player" controls></video>
</div>
<div id="controls">
<h3>Pacing controls</h3>
<div id="empty-controls" class="controls">
<h4>Enable Sammy?</h4>
<input type="checkbox" id="enable-sammy" checked />
<p>If Sammy is disabled, the congestion control algorithm will decide what throughput to send at. Throughput will likely be much higher than with Sammy.</p>
</div>
<div id="empty-controls" class="controls">
<h4>Pace rate for empty buffer</h4>
<div id="empty-buffer-slider">
<div id="empty-handle" class="ui-slider-handle handle"></div>
</div>
<p>Sammy will pace at this value times the max bitrate when the buffer is empty.</p>
<p>For example, if this is set to 2.8, Sammy will pace at 2.8x the max bitrate when the buffer is empty</p>
</div>
<div id="full-controls" class="controls">
<h4>Pace rate for full buffer</h4>
<div id="full-buffer-slider">
<div id="full-handle" class="ui-slider-handle handle"></div>
</div>
<p>Sammy will pace at this value times the max bitrate when the buffer is full.</p>
<p>If this is set lower than about 1.4x, the lower throughput will cause dash.js to pick lower bitrates.<p>
</div>
<div id="cc-controls" class="controls">
<h4>Congestion Control</h4>
<select id="cc-algorithm">
<option value="cubic">Cubic</option>
<option value="bbr">BBR</option>
<option value="reno">Reno</option>
</select>
<p>The server will use this congestion control algorithm to send data.</p>
<p>BBR does pacing, but it paces at a much higher rate than Sammy. You should see no large decrease in throughput with BBR.</p>
</div>
</div>
<div id="graphs">
<h3>Performance graphs</h3>
<p>Note: if throughput is very high, you may need to disable the cache. In Chrome, you can do this at the top of the inspector's network tab</p>
<div id="pace-rate-graph"></div>
<div id="client-graph"></div>
<div id="buffer-graph"></div>
<div id="rtt-graph"></div>
<div id="retrans-graph"></div>
</div>
</div>
</main>
<script src="https://cdn.dashjs.org/v4.7.0/dash.all.min.js"></script>
<script src="https://cdn.plot.ly/plotly-2.20.0.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script src="graphs.js"></script>
<script src="sammy.js"></script>
</body>
</html>