Altitude San Francisco 2018: Video Workshop Docs

Video Workshop Docs
GitHub Link:
https://bit.ly/alt2018-video
Optimizing Video Delivery

presents
How I Learned to Stop
Worrying and Love
VideoChris Buckley and Jim Hall | Sr. Solutions
Engineers

Who the hell are we?
Optimizing video delivery
Introductions

Log Streaming with
Sumo Logic
Visibility Performance
VOD
Live
Scaling
Shielding
CDN Stacking

Quick poll:
How would you categorize your comfort-
level with video delivery?
Introductions

Visibility

You need two things:
● Log analysis tool
● Logs
Visibility

Visibility - Configure log streaming
Log Analysis

STEPS
● Clone the service
● Add the Sumo Logic endpoint
● Add the custom VCL
● Upload the custom VCL
● Activate the updated version

Workshop Setup

Download / clone the Git repo:
https://bit.ly/alt2018-video
Install JQ (or any JSON parser):
https://bit.ly/jq-json
GitHub, JSON, Environment Configuration

Export API token & Service ID:
bash$ export API_TOKEN=<token>
bash$ export SERVICE_ID=<service id>

In the console, navigate to the repo's `workshop-1`
directory

In GitHub, open the ReadMe.md and the Workshop-1
as two tabs

curl to clone
curl -X PUT
https://api.fastly.com/service/${SERVICE_ID}/version/1/clone
-H "Fastly-Key: ${API_KEY}" | jq
Talk Title

api response
should look
something like this
{
"testing": false,
"locked": false,
"number": 2,
"active": false,
"service_id": "2KVPqlEPCh6tRCVQBxlUYk",
"staging": false,
"created_at": "2018-08-31T17:04:51Z",
"deleted_at": null,
"comment": "",
"updated_at": "2018-08-31T17:16:00Z",
"deployed": false
}
Talk Title

Configure the logging endpoint.

Recommended logging variables for
video
Visibility - Logging Variables

Questions on logging variables?
Visibility - Logging Variables

client_ip=%{req.http.Fastly-Client-IP}V
client_as_number=%{client.as.number}V
client_country_code=%{client.geo.country_code3}V
client_city_code=%{client.geo.city}V
tls_version=%{tls.client.protocol}V
ua="%{req.http.User-Agent}V"
ref=%{req.http.Referer}V
host=%{req.http.host}V
url=%{req.url}V
http_status=%{resp.status}V
http_status_message=%{resp.response}V
origin_http_status=%{beresp.status}V
pop=%{server.datacenter}V
server_id=%{server.identity}V
hit_or_miss="%{resp.http.X-Cache}V"
fastly_state=%{fastly_info.state}V
client_ttfb=%{time.to_first_byte}V
response_time=%{time.elapsed}V
response_bytes=%{resp.bytes_written}V
...
Standard VCL
Log Format
Talk Title

JSON Log Format
{"client_ip":"%{req.http.Fastly-Client-IP}V",
"client_as_number":%{client.as.number}V,
"client_country_code":"%{client.geo.country_code3}V",
"client_city":"%{client.geo.city}V",
"tls_version:":"%{tls.client.protocol}V",
"host":"%{req.http.host}V",
"url":"%{cstr_escape(req.url)}V",
"http_status":%{resp.status}V,
"http_status_message":"%{resp.response}V",
"restarts":%{req.restarts}V,
"pop":"%{server.datacenter}V",
"cache_status":"%{resp.http.X-Cache}V",
"fastly_state":"%{fastly_info.state}V",
"client_ttfb":%{var.client_ttfb_msecs}V,
"response_time":%{time.elapsed.msec}V,
"response_bytes":%{resp.bytes_written}V,
...
}
Talk Title

api endpoint
parameters url-
encoded JSON
name=workshop1-
SumoLogic&message_type=blank&url=https://endpoint3.collection.us2.sumologic.
com/receiver/v1/http/ZaVnC4dhaV1z1AeZ1Y1MjfCQd5Ypwxi7jXvw0uY2hR3ycKg_lCVd77r
j5lgKm-8krz30nPgv-dBhWCqIl_et_Yez_BMeVUnv2S4d9iqYD1uWMqOZcgiT-
A==&format=%7B%22timestamp%22%3A%22%25%7Bbegin%3A%25Y-%25m-
%25d%20%25H%3A%25M%3A%25S%7Dt.%25%7Btime.start.usec_frac%7DV%22%2C%0A%20%22c
lient_ip%22%3A%22%25%7Breq.http.Fastly-Client-
IP%7DV%22%2C%0A%20%22client_as_number%22%3A%25%7Bclient.as.number%7DV%2C%0A%
20%22client_country_code%22%3A%22%25%7Bclient.geo.country_code3%7DV%22%2C%0A
%20%22client_city%22%3A%22%25%7Bclient.geo.city%7DV%22%2C%0A%20%22tls_versio
n%3A%22%3A%22%25%7Btls.client.protocol%7DV%22%2C%0A%22user_agent%22%3A%22%25
%7Bregsuball%28cstr_escape%28req.http.User-
Agent%29%2C%22%28%3F%3C%21%5C%5C%5C%5C%29%5C%5C%5C%5C%28%3F%21%5C%5C%5C%5C%2
9%22%2C%22%5C%5C%5C%5C%5C%5C%5C%5C%22%29%7DV%22%2C%0A%22referer%22%3A%22%25%
7Bregsuball%28cstr_escape%28req.http.Referer%29%2C%22%28%3F%3C%21%5C%5C%5C%5
C%29%5C%5C%5C%5C%28%3F%21%5C%5C%5C%5C%29%22%2C%22%5C%5C%5C%5C%5C%5C%5C%5C%22
%29%7DV%22%2C%0A%20%22host%22%3A%22%25%7Breq.http.host%7DV%22%2C%20%0A%20%22
url%22%3A%22%25%7Bcstr_escape%28req.url%29%7DV%22%2C%0A%20%22http_status%22%
3A%25%7Bresp.status%7DV%2C%0A%20%22http_status_message%22%3A%22%25%7Bresp.re
sponse%7DV%22%2C%0A%20%22origin_http_status%22%3A%22%25%7Bberesp.status%7DV%
22%2C%0A%20%22restarts%22%3A%25%7Breq.restarts%7DV%2C%0A%20%22pop%22%3A%22%2
5%7Bserver.datacenter%7DV%22%2C%0A%20%22cache_status%22%3A%22%25%7Bresp.http
.X-
Cache%7DV%22%2C%0A%20%22fastly_state%22%3A%22%25%7Bfastly_info.state%7DV%22%Talk Title

curl to set up
Sumo Logic
logging endpoint
curl -X POST
https://api.fastly.com/service/${SERVICE_ID}/version/2/logging/sumologic
-H "Fastly-Key: ${API_KEY}"
-d@logging-log_format.txt | jq
Talk Title

api response
should look
something like this
{
"name": "workshop1-SumoLogic",
"message_type": "blank",
"format": "<redacted>",
"url":
"https://endpoint3.collection.us2.sumologic.com/receiver/v1/http/ZaVnC4dhaV1z1AeZ1
Y1MjfCQd5Ypwxi7jXvw0uY2hR3ycKg_lCVd77rj5lgKm-8krz30nPgv-
dBhWCqIl_et_Yez_BMeVUnv2S4d9iqYD1uWMqOZcgiT-A==",
"version": "1",
"placement": null,
"format_version": "2",
"response_condition": "",
"updated_at": "2018-09-08T09:12:09Z",
"deleted_at": null,
"created_at": "2018-09-08T09:12:09Z"
}
Talk Title

Modify the VCL…

Save the file as:
workshop1_v2.vcl

Upload the custom VCL…

curl to upload
custom VCL
curl -X POST
https://api.fastly.com/service/${SERVICE_ID}/version/2/vcl
-H "Fastly-Key:${API_KEY}"
-H 'content-type: multipart/form-data'
--data "name=workshop1&main=true"
--data-urlencode "content@workshop1_v2.vcl" | jq
Talk Title

api response
should look
something like this
{
"name": "workshop1",
"main": true,
"version": 12,
"content": "",
"deleted_at": null,
"created_at": "2018-09-08T15:32:34Z",
"updated_at": "2018-09-08T15:32:34Z"
}
Talk Title

Activate the service…

curl to activate the
service
curl -X PUT
https://api.fastly.com/service/${SERVICE_ID}/version/2/activate
-H "Fastly-Key: ${API_KEY}" | jq
Talk Title

…make a bunch of requests from around
the world using Catchpoint

….annnnnnnnd behold!
Visibility - Sumologic

Walkthrough of the Sumo Logic
dashboard

Questions?

• Two main ways of delivering video
• Progressive download
• HTTP Streaming
Quick video overview

• Progressive Download
• Supported natively in all modern
browsers via the HTML5 <video> tag
• Usually for short videos ~30 secs
• VOD only
Quick video overview

• HTTP Streaming
• VOD and Live
• No special server software or license required
• Provides Adaptive Bit Rate (ABR)
• Video is packaged into discrete chunks or
segments
• Generally requires a player
Quick overview of video delivery via HTTP

• HTTP streaming comes in a variety of
flavors
• HLS (Apple)
• DASH (MPEG)
• HDS (Adobe)
• Smooth Streaming (Microsoft)

• HLS Components
• Manifests (.m3u8)
• Master
• Child or Media Playlist
• Segments
• Transportation Segments (.ts)
• Fragmented MP4 (.fmp4)

Questions?

Optimizing VOD
Delivery

1. Get familiar with the Fastly API
2. Understand video delivery challenges
3. Test, optimize, and confirm improvements for VOD delivery
Goals: Optimize VOD Delivery

A
CDN's
Role
● CDNs help scale & accelerate content
delivery
● Reduce origin load by serving cached
objects
● Works great for smaller objects
● Larger objects benefit from optimizations

A content delivery workflow
End user CDN Origin
Requests Object Fetches Object
Delivers Object Caches Object

Obstacles to Video Delivery
TCP Congestion Windows Fetching Entire Objects

HTTP & TCP Optimizations
Increase Congestion Window
Allows clients to better estimate
network bandwidth and thereby
select the ideal rendition and
bitrate for the best playback
quality.
Configure Streaming Miss
Reduces the time clients (players)
must wait to begin downloading
streams when Fastly's edge
servers must fetch content from
your origin.

Step 1: Testing download
alias curltest="curl -w
'nLookup time:t%{time_namelookup} n
Connect time:t%{time_connect} n
App Con time:t%{time_appconnect} n
PreXfer time:t%{time_pretransfer} n
Redirect time:t%{time_redirect} n
StartXfer time:t%{time_starttransfer} nn
Total time:t%{time_total}n'
-svo /dev/null -H 'Fastly-Debug: 1'"
Test Curl Command
Download Video File
time curltest https://<num>-
videoworkshop.global.ssl.fastly.net/vod/tears_of_steel/720p.mp4

Step 1: Testing download cont….
Lookup time: 0.067303
Connect time: 0.081613
App Con time: 0.145351
PreXfer time: 0.145988
Redirect time: 0.000000
StartXfer time: 2.429937
Total time: 12.066361
real 0m12.087s
user 0m0.563s
sys 0m0.561s
Output

Clone service from version 2 to version 3
Step 2: Cloning new service
curl -sv -H "Fastly-Key: ${API_KEY}" -X PUT
https://api.fastly.com/service/${SERVICE_ID}/version/2/clone
| jq

Open main.vcl in your git repo, and add specific configuration optimizations.
In vcl_fetch add contents of vod-vcl_fetch.vcl:
Talk Title
Step 3: Add optimizations
############################################
# VIDEO WORKSHOP: INSERT vcl_fetch CODE HERE
############################################
# Set 1s ttl if origin response HTTP status code is anything other than 200 and 206
if (!http_status_matches(beresp.status, "200,206")) {
set beresp.ttl = 1s;
}
# Enable Streaming Miss only for video or audio objects.
# Below conditions checks for video or audio file extensions commonly used in
# HTTP Streaming formats.
if (req.url.ext ~ "m4s|mp4|ts|aac|fmp4") {
set beresp.do_stream = true;
}
# Configure caching for VOD content
if(req.http.X-Service == "vod") {
/* set stale_if_error and stale_while_revalidate (customize these values) */
set beresp.stale_if_error = 7d;
set beresp.stale_while_revalidate = 60s;
# Cache VOD content for 1 year
set beresp.ttl = 365d;
}
############################################
# END VIDEO WORKSHOP
############################################

Add final optimizations in vcl_deliver from the file vod-vcl_deliver.vcl
Talk Title
Step 3: Add optimizations cont...
############################################
# VIDEO WORKSHOP: INSERT vcl_deliver CODE HERE
############################################
# increase init cwnd
if (client.requests == 1) {
set client.socket.cwnd = 45;
}
############################################
# END VIDEO WORKSHOP
############################################

Save config, upload using the API, and activate the version in our service (version 3).
In order to upload VCL we must URL encode the file so that we can send it via cURL:
Talk Title
Step 4: Upload & activate version
curl -vs -H "Fastly-Key: ${API_KEY}" -X POST -H
"Content-Type: application/x-www-form-urlencoded"
--data "name=workshop2&main=true"
--data-urlencode "content@workshop2_v3.vcl"
https://api.fastly.com/service/${SERVICE_ID}/version/3/vcl
| jq

Response:
Talk Title
{
"name": "workshop2",
"main": true,
"content": "<lots of VCL>,
"service_id": "1OPpKYvOlWVx37twfGVsq0",
"version": 3,
"deleted_at": null,
"created_at": "2018-06-20T20:23:52+00:00",
"updated_at": "2018-06-20T20:23:52+00:00"
}

Now,we can activate the version we just uploaded
Talk Title
curl -vs -H "Fastly-Key: ${API_KEY}" -X PUT
https://api.fastly.com/service/${SERVICE_ID}/version/3/activate | jq

Purge our video content (updating host to your specific service):
Talk Title
Step 5: Purge URL & re-test
curl -X PURGE https://<num>-
Finally, test our video download again:
time curltest https://<num>-

Talk Title
Step 5: Purge URL & re-test cont...
Lookup time: 0.067303
Connect time: 0.081613
App Con time: 0.145351
PreXfer time: 0.145988
Redirect time: 0.000000
StartXfer time: 0.429937
Total time: 11.066361
real 0m12.087s
user 0m0.563s
sys 0m0.561s
Output

Optimizing Live
Video Delivery
Talk Title

1. Learn the differences between VOD and live video delivery
2. Deploy a new origin to deliver live video
3. Configure live streaming specific optimizations
4. Create a scalable live video configuration
Talk Title
Goals: Optimize Live Delivery

Why Live
is
Different
● Content is more dynamic
● Stale content not as important
● Thundering Herd issues
● Protecting origin more critical

Talk Title
A live delivery workflow
End user CDN Origin
Requests Object Fetches Object
Delivers Object Caches Object
Client wants fresh content
CDN doesn't need to
cache as long

Talk Title
Optimizations for Live
Keeping Manifests "Dynamic"
Reduces time in cache to allow for
frequent updates of video
segments.
"Right-sizing" TTLs for segments
Old segments have no need to be
cached, reducing storage
requirements and increasing CHR
for other content.

Talk Title
Step 1: Add New Origin Server
● Clone the active service to a new development version (this time cloning
version 3 to version 4):
curl -sv -H "Fastly-Key: ${API_KEY}" -X PUT
https://api.fastly.com/service/${SERVICE_ID}/version/3/clone | jq
{
"testing": false,
"locked": false,
"number": 4,
....
}
● JSON response:

Talk Title
Step 1: Add New Origin Server Cont..
Now, lets add a new backend, our "live" service.
curl -sv -H "Fastly-Key: ${API_KEY}" -X POST -H
"Content-Type: application/x-www-form-urlencoded" --data
"ipv4=35.230.111.226&name=live"
https://api.fastly.com/service/${SERVICE_ID}/version/4/backend

Talk Title
Step 2: Add live optimizations
● In your repo you will find a file live-vcl_recv.vcl.
● This contains VCL to send any requests on the live route (in this case /live) to the new created created origin
● Add this to workshop2.vcl in the workshop section. It should look something more like this, ready to upload:
###########################################
# VIDEO WORKSHOP - DO STUFF HERE
###########################################
if(req.url.path ~ "^/live") {
set req.backend = F_live;
set req.url = regsub(req.url, "/live", "/hls");
set req.http.X-Service = "live";
}
######## vcl_recv ###########
# Record number of retrans on the connection
set req.http.total_retrans = client.socket.tcpi_total_retrans;
###############################

Talk Title
Step 2: Add live optimizations cont..
● In your repo you will find a file live-vcl_fetch.vcl.
● This contains VCL to set specific caching behavior for manifests and segments
if(req.http.X-service == "live") {
# Set 1s ttls for video manifest and 3600s ttls for segments of HTTP Streaming formats.
# Microsoft Smooth Streaming format manifest and segments do not have file extensions.
# Look for the keywords "Manifest" and "QualityLevel" to identify manifest and segment requests.
if (req.url.ext ~ "m3u8|mpd" || req.url.path ~ "Manifest") {
} else {
if (req.url.ext ~ "m4s|mp4|ts|aac" || req.url.path ~ "QualityLevel") {
}
}
}

Talk Title
Step 3: Upload and activate
Upload our new configuration:
curl -vs -H "Fastly-Key: ${API_KEY}" -X POST -H
"Content-Type: application/x-www-form-urlencoded"
--data "name=workshop3&main=true" --data-urlencode "content@workshop3_v4.vcl"
https://api.fastly.com/service/${SERVICE_ID}/version/4/vcl | jq
Activate the draft version:
curl -vs -H "Fastly-Key: ${API_KEY}" -X PUT
https://api.fastly.com/service/${SERVICE_ID}/version/4/activate | jq

Talk Title
Step 4: Play our live stream
● Open a media player (or Safari)
● https://<num>-
videoworkshop.global.ssl.fastly.net/live/stream.
m3u8
● Let the good times roll!
● We're not done just yet

● Many services / POPs connecting to origin
● Higher egress
● Higher infrastructure costs (CPU, etc)
Talk Title
What's the Thundering Herd?

● Designating a PoP as your "shield" reduces requests to
origin
● Delivers content to edge PoPs requesting content
● Collapses multiple requests to 1 for new content
Talk Title
Origin Shielding

● Enabling shielding in Fastly helps mitigate this issue
● What about my other CDNs?
Talk Title
Shielding all the Things

Talk Title
Fastly Media Shield - A CDN for your CDNs
Misses from edge sent to Media Shield
Significant reduction in origin load
Request collapsing consolidates
multiple requests for same content
down to one request to origin
OriginMedia Shield
End User Edge POP

Altitude San Francisco 2018: Video Workshop Docs

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Altitude San Francisco 2018: Video Workshop Docs

Similar a Altitude San Francisco 2018: Video Workshop Docs (20)

Más de Fastly

Más de Fastly (20)

Último

Último (20)

Altitude San Francisco 2018: Video Workshop Docs