# RTSP Sever Using VlcPlayer & Depoly web through ZK
###### tags: `智慧影像科專案`
### 2020/02/19
## 影音資料傳輸的架構
> 此章節完全整理自 [30天之即時網路影音開發攻略(小白本)](https://ithelp.ithome.com.tw/users/20089358/ironman/1923) by [我是小馬克](https://ithelp.ithome.com.tw/users/20089358/ironman) @ iThome 的筆記，無原創內容。
>
### 即時串流直播情境 (Real Time Streaming)
### 方法一 : 將檔案直接透過網路丟給對方_UDP
> 用戶資料報協定（User Datagram Protocol，又稱用戶資料包協定）
>
* 透過 AirDrop 直接把檔案丟到別人的電腦
* 先上傳到雲端空間，產生連結後給他人下載
* 缺點：全部下載完才能開始聽或看影片
### 方法二 : 以串流的方式傳送給對方_RTSP
> 即時串流協定（Real Time Streaming Protocol，RTSP）
>
* 將資料切成一段一段傳出去，使用者可以一邊下載一邊觀看
* 不會花費使用者的儲存空間，串流的檔案會儲存在使用者的緩衝記憶體中，播完後即捨棄
* 傳統的影音檔由表頭和表身組成，通常需要在所有資料都傳輸完成後，才可以根據表頭知道這個影音的編碼為何，解碼完後才可以開始觀看。
* 串流的影音則需要先透過伺服器轉成「流容器」，流容器的一個檔案中包含多塊的表頭和表身，每次傳輸的資料都同時包含了表頭和表身，因此可以一邊傳送檔案一邊觀看影音。
### 容器架構
### 方法三：即時影音傳輸（直播、視訊通話）_RTMP
> RTMP（Real Time Messaging Protocol —即時訊息協定）
>
基本的原理和串流傳輸相同，但同時需要使用「推流傳輸協議」，影音錄製這端會一小段一小段的上傳，使用者也是一小段一小段的取得
### 常見的網路傳輸協定（Communications Protocol）
### 比較表
| 協議 | 傳輸層選擇 | 聲音編碼 | 影像編碼 | 延遲性 |
| ---- | ---------- | -------- | -------- | --- |
| RTSP| RTP、TCP、UDP RTP| 可支援的都行|RTP 可支援的都行| 低 |
| RTMP | TCP | AAC、MP3 |H.26X 系列|低|
| HLS | TCP (因為它是用 HTTP ) |AAC、MP3|H.26X 系列|高|
| HTTP-FLV |TCP (因為它是用 HTTP )|AAC、MP3|H.26X 系列|低|
| MEPG-DASH |TCP (因為它是用 HTTP )|AAC 用比較多|H.26X、VPX 系列|高|
### 支援度
| 協議 | 支援 Web Html5 | 支援 IOS | 支援 Mac | 支援 Android |
| -------- | -------- | -------- | --- | --- |
| RTSP |不支援，需使用套件|不支援，需使用套件|不支援，需使用套件|不支援，需使用套件|
| RTMP |不支援，需使用套件|不支援，需使用套件|不支援，需使用套件|不支援，需使用套件|
| HLS |支援|支援|支援|支援|
|HTTP-FLV|支援 (flv.js)|不支援，需使用套件|不支援，需使用套件|不支援，需使用套件|
|MPEG-DASH|支援 (dash.js)|不支援，需使用套件|不支援，需使用套件|不支援，需使用套件|
* #### RTP over UDP：效率較好但品質較差
* #### RTP over TCP：效率較差但品質較好
#### [影音傳輸協議總整理連結](https://ithelp.ithome.com.tw/articles/10207561) by [我是小馬克](https://ithelp.ithome.com.tw/users/20089358/ironman)
---
## RTSP轉換為HTTP的伺服器透過VLC Player
> (Install a conversion server from RTSP to HTTP via VLC Player)
>
### 安裝VLC Player
[VLC 官方安裝網址](https://www.videolan.org/vlc/index.zh-TW.html)
### 架設 Server
#### VLC Player 開啟網路串流
#### 貼上Rtsp的URL
> 範例 : rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov
>
> #### RTSP URL format
> ***Live :***
> rtsp://127.0.0.1/stream/live?ch=1_0
> ***Playback :***
> rtsp://172.16.17.226/stream/playback?ch=1_0&begin_time=1552368263&end_time=1552368280
>
> :::info
> IP : 127.0.0.1 Channel : ch=1_0
> 視來源IP以及Channel做調整
> :::
#### 選擇串流
#### 下一步
#### 目的地選擇HTTP
::: danger
*按加入*
:::
#### 設定一個未使用的Port
#### 選擇轉碼的格式
#### 我選擇Ogg/Ogm格式
#### 解碼器設定
#### 開始串流
#### Google Chrome上看RTSP影片
## ZK(Test.zul)
### 程式碼
```zul=
<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<zk>
<window title="new page title" border="normal">
<html xmlns:w="client" >
<video src="http://127.0.0.1:7777" autoplay="autoplay" controls="controls" width="704" height="480"/>
</html>
</window>
</zk>
```
### 實作
:::success
(成功的話就可以直接看到影片了)
:::
> <video src="http://127.0.0.1:7777" autoplay="autoplay" controls="controls"/>
### 多工DEMO
#### DEMO
[私人測試](https://youtu.be/2pRUykFMjZw)
### 程式碼(SYSTest.zul)
```zul=
<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<zk>
<hlayout>
<vlayout>
<div>
<window title="2F門口" border="normal">
<html xmlns:w="client" >
<video src="http://127.0.0.1:7777" autoplay="autoplay" controls="controls" width="900" height="480"/>
</html>
</window>
</div>
<div>
<window title="3F門口" border="normal">
<html xmlns:w="client" >
<video src="http://127.0.0.1:2114" autoplay="autoplay" controls="controls" width="900" height="480"/>
</html>
</window>
</div>
<div>
<window title="4F門口" border="normal">
<html xmlns:w="client" >
<video src="http://127.0.0.1:2125" autoplay="autoplay" controls="controls" width="900" height="480"/>
</html>
</window>
</div>
</vlayout>
<vlayout>
<div>
<window title="5F門口" border="normal">
<html xmlns:w="client" >
<video src="http://127.0.0.1:2147" autoplay="autoplay" controls="controls" width="900" height="480"/>
</html>
</window>
</div>
<div>
<window title="6F門口" border="normal">
<html xmlns:w="client" >
<video src="http://127.0.0.1:21710" autoplay="autoplay" controls="controls" width="900" height="480"/>
</html>
</window>
</div>
<div>
<window title="7F雲碼門口" border="normal">
<html xmlns:w="client" >
<video src="http://127.0.0.1:22114" autoplay="autoplay" controls="controls" width="900" height="480"/>
</html>
</window>
</div>
</vlayout>
<vlayout>
<div>
<window title="GVD_Channel1" border="normal">
<html xmlns:w="client" >
<video src="http://127.0.0.1:1273" autoplay="autoplay" controls="controls" width="900" height="480"/>
</html>
</window>
</div>
<div>
<window title="GVD_Channel2" border="normal">
<html xmlns:w="client" >
<video src="http://127.0.0.1:1272" autoplay="autoplay" controls="controls" width="900" height="480"/>
</html>
</window>
</div>
<div>
<window title="GVD_Channel3" border="normal">
<html xmlns:w="client" >
<video src="http://127.0.0.1:1273" autoplay="autoplay" controls="controls" width="900" height="480"/>
</html>
</window>
</div>
</vlayout>
</hlayout>
</zk>
```
Sign in via Facebook
Sign in via X(Twitter)
Sign in via GitHub
Sign in via Dropbox
Sign in with Wallet
Connect another wallet