# Video Streaming 101
slide: <https://hackmd.io/@EastSun5566/video-streaming-101>
---
> As of February 2020, more than 500 hours of video were uploaded to YouTube every minute.
---
- what is video?
- what is streaming? How does it works? <!-- .element: class="fragment" -->
- adaptive streaming <!-- .element: class="fragment" -->
- on-demand / live streaming <!-- .element: class="fragment" -->
- content protection & DRM <!-- .element: class="fragment" -->
---
# MP4, H.264, HLS, AAC, DRM...
> Wait... What? π€ <!-- .element: class="fragment" -->
---
## What is video?
- "I see" in latin
- what is image? <!-- .element: class="fragment" -->
---
### Image
- binary representation of visual information
- `[pixel, pixel, pixel, ...]` <!-- .element: class="fragment" -->
- `pixel = (R, G, B)` <!-- .element: class="fragment" -->
 <!-- .element: class="fragment" -->
---
<!-- .slide: data-background="https://upload.wikimedia.org/wikipedia/en/2/21/The_dress_blueblackwhitegold.jpg" data-background-size="contain"
-->
white/gold or blue/black π§ <!-- .element: class="fragment" -->
---
<!-- .slide: data-background="https://i.imgur.com/E2OFdhk.png" data-background-size="contain"
-->
---
`1920 x 1080 (pixels) x 24 bits (1 byte per colors) β 6 MB`
> Well... That's way too big π <!-- .element: class="fragment" -->
---
<!-- .slide: data-auto-animate -->
<div data-id="box" style="height: 50px; background: salmon;"></div>
---
<!-- .slide: data-auto-animate -->
<div data-id="box" style="height: 200px; background: blue;"></div>
---
<!-- .slide: data-background="#ff0000" -->
---
> How is that even possible π€― <!-- .element: class="fragment" -->
---
### [Codec](https://w3.ual.es/~vruiz/Docencia/Apuntes/Coding/Image/Summary/index.html)
- coder/decoder
- encoding/decoding data so that it can be easily transported
- [compression](https://zh.wikipedia.org/zh-tw/%E6%95%B0%E6%8D%AE%E5%8E%8B%E7%BC%A9)
- lossy compression
- [JPEG](https://zh.m.wikipedia.org/zh-tw/JPEG)
- [WebP](https://zh.m.wikipedia.org/zh-tw/WebP)
- lossless compression
- PNG
- WebP
---
[](https://zh.wikipedia.org/zh-tw/%E7%A1%85%E8%B0%B7_(%E7%94%B5%E8%A7%86%E5%89%A7))
---
## Video
- sequence of images / time
- frame rate(fps)
- [beta movement](https://zh.wikipedia.org/zh-tw/%E8%B4%9D%E5%A1%94%E8%BF%90%E5%8A%A8)
---
length: 10 sec
fps: 30
`6 MB * 30 * 10 β 1 GB`
> π‘
---
### [Conatiner](https://developer.mozilla.org/zh-TW/docs/Web/Media/Formats/Containers)
- video container = video codec + audio codec + meta data
- MP4 aka MPEG-4 Part 14
- same video codec can with different audio codec
- MP4 = H.26x + AAC
- MP4 = H.26x + MP3
---
---
## Common video container
- [MP4](https://zh.m.wikipedia.org/zh-tw/MP4) - MPEG-4 Part 14 created by the Motion Picture Expert Group
- MOV - QuickTime Movie created by Apple
- FLV - Flash Video Format created by Adobe
---
### Common video/audio codec
- video codec
- [H264](https://zh.m.wikipedia.org/zh-tw/H.264/MPEG-4_AVC) β AVC, Advanced Video Coding or MPEG-4 Part 10
- H265 - HEVC, High-Efficiency Video Coding or MPEG-H Part 2
- audio codec
- [MP3](https://zh.wikipedia.org/zh-tw/MP3) β MPEG-2 Audio Layer III
- [AAC](https://zh.m.wikipedia.org/zh-tw/%E9%80%B2%E9%9A%8E%E9%9F%B3%E8%A8%8A%E7%B7%A8%E7%A2%BC) β Advanced Audio Coding
---
## Delivery
- downloading
- streaming
- on-demand
- live
---
### Downloading
- copy of the entire file is saved onto disk
- video cannot play until the entire file downloaded
---
> Can we do better π₯Ί
---
### Streaming
- continuous transmission
- audio and video data is broken down into chunk
- consume chunk by chunk
---
---
#### How to do streaming? does it do that?
```htmlembedded=
<video src="./big_buck_bunny.mp4">
```
- HTTP range requests
- Media Source Extensions
---
#### [HTTP range requests](https://developer.mozilla.org/en-US/docs/Web/HTTP/Range_requests)
```shell=
curl -I http://i.imgur.com/z4d4kWk.jpg
```
```shell=
HTTP/1.1 200 OK
β¦
Accept-Ranges: bytes
Content-Length: 146515
```
---
```shell=
curl http://i.imgur.com/z4d4kWk.jpg -i -H "Range: bytes=0-1023"
```
```shell=
HTTP/1.1 206 Partial Content
Content-Range: bytes 0-1023/146515
Content-Length: 1024
β¦
(binary content)
```
---
#### [Media Source Extensions (MSE)](https://developer.mozilla.org/en-US/docs/Web/API/Media_Source_Extensions_API#media_source_extensions_concepts_and_usage)
- web API
- programmatic interface for `<video>` src
- create stream by JS
- load chunks to the `<video>`
---
```javascript=
async function getChunk(range) {
const res = fetch(`/path/to/chunks/${range}`);
const buffer = await res.arrayBuffer();
return new Uint8Array(buffer);
}
const mediaSource = new MediaSource();
mediaSource.addEventLinstener('sourceopen', () => {
const mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
const chunk = await getChunk('0-150');
sourceBuffer.appendBuffer(chunk);
})
const video = document.querySelector('video');
video.src = URL.createObjectURL(mediaSource);
```
---
> Can we do even better π₯Ί
---
## [Adaptive Streaming](https://zh.wikipedia.org/zh-tw/%E8%87%AA%E9%81%A9%E6%80%A7%E4%B8%B2%E6%B5%81)
- Adaptive (bitrate) streaming adjusts video quality based on network conditions
---
> ζθ¬οΌζη΄―δΊοΌδΈεεΎ
ηΊ π΅
---
{"metaMigratedAt":"2023-06-17T09:05:51.308Z","metaMigratedFrom":"YAML","title":"Video Streaming 101","breaks":true,"description":"slide: https://hackmd.io/@EastSun5566/video-streaming-101","slideOptions":"{\"theme\":\"moon\"}","contributors":"[{\"id\":\"aea2de01-287c-4473-816d-99fbcb2dee7f\",\"add\":14892,\"del\":9051}]"}