---
# System prepended metadata

title: HLS介紹

---

# HLS介紹

---

## 什麼是HLS

----

HLS，HTTP Live Streaming
一種影片串流通訊協定

被用於直播平台，像是Twtich, Youtube

----

HLS 由三個部分組成
HTTP, M3U8, TS

----

* HTTP: 通訊協定
* M3U8: UTF-8編碼的M3U文件，作為索引文件
* TS: 一種影片封裝格式

---

## M3U8

----

以UTF-8編碼的M3U檔案，M3U格式是純文本檔案，可以根據他的索引找到對印的視訊檔案的網址執行線上播放


----

以Twitch VOD為例

----

當用戶點進去一個VOD時
會先request該VOD的m3u8檔
![Pasted image 20240304214455](https://hackmd.io/_uploads/HJlXTEUap.png)
![Pasted image 20240304214442](https://hackmd.io/_uploads/HyHEaEIp6.png)

----


該m3u8檔的格式會長得像這樣
![image](https://hackmd.io/_uploads/Skwe0ELap.png)

----

<div style="text-align: left; padding-left:10vw; font-size:32px;">
    當用戶選擇解析度之後<br>
    網頁就會根據這個m3u8檔的內容<br>
    去找到解析度相對應另一個m3u8檔<br>
</div>

----

個別解析度的m3u8檔會長得像這樣
![image](https://hackmd.io/_uploads/SJyPRVLaT.png)

這樣就可以分別知道要去request哪些TS檔了

---

## TS

----

就，一種影片封裝格式

----

Why TS not MP4

----

* TS: 各片段之間的撥放，無縫接軌

* MP4: header file更大，下載緩存需花更多時間

---

## 簡單直播平台架設介紹

----

如何架一個RTMP推流，HLS拉流的直播平台

----

架構圖
![image](https://hackmd.io/_uploads/B106zSIaa.png)

----

首先你要有一台Server

----

然後我是用nginx和nginx-rtmp-module架的

----

[nginx-rtmp-module](https://github.com/sergey-dryabzhinsky/nginx-rtmp-module)
讓一切變得簡單

----

在config檔調整一下
* TS file的長度
* 推流的暫存檔案數量
* 和一些網站ㄉ基本設定

----

接著再用你的OBS推流到伺服器

----

然後就完成了
[不斷直播春日影的網站(關掉了)]()

<div style="font-size: 22px">
(不要來ddos我拜託)
</div>

----

小缺陷 <br>
<div style="font-size: 24px; text-align: left;  padding-left:10vw;">
    因為直播會有延遲 <br>
    所以當 用戶的延遲 > 伺服器暫存的檔案數 <br>
    就會造成直播卡頓<br>
    <br>
    再者我的直播檔案沒有做到解析度自適應<br>
    所以當用戶網路不好時<br>
    沒辦法調整解析度改下載較小的低畫質檔案<br>
    <br>
    然後播放器問題<br>
    我用的套件可能與對應的Browser支援的不好<br>
    所以也產生一些問題<br>
    <br>
    還有一部分應該是因為我伺服器流量不夠
</div>

----

![image](https://hackmd.io/_uploads/BkGB5BITp.png)

----

![image](https://hackmd.io/_uploads/HJYg9rITa.png)
