# 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) ![](https://i.imgur.com/xqQteQj.png) ### 方法一 : 將檔案直接透過網路丟給對方_UDP > 用戶資料報協定（User Datagram Protocol，又稱用戶資料包協定） > ![](https://i.imgur.com/FO4ark7.png) * 透過 AirDrop 直接把檔案丟到別人的電腦 * 先上傳到雲端空間，產生連結後給他人下載 * 缺點：全部下載完才能開始聽或看影片 ### 方法二 : 以串流的方式傳送給對方_RTSP > 即時串流協定（Real Time Streaming Protocol，RTSP） > ![](https://i.imgur.com/Msw0oDC.png) * 將資料切成一段一段傳出去，使用者可以一邊下載一邊觀看 * 不會花費使用者的儲存空間，串流的檔案會儲存在使用者的緩衝記憶體中，播完後即捨棄 * 傳統的影音檔由表頭和表身組成，通常需要在所有資料都傳輸完成後，才可以根據表頭知道這個影音的編碼為何，解碼完後才可以開始觀看。 * 串流的影音則需要先透過伺服器轉成「流容器」，流容器的一個檔案中包含多塊的表頭和表身，每次傳輸的資料都同時包含了表頭和表身，因此可以一邊傳送檔案一邊觀看影音。 ### 容器架構 ![](https://i.imgur.com/MM7VJiD.png) ### 方法三：即時影音傳輸（直播、視訊通話）_RTMP > RTMP（Real Time Messaging Protocol —即時訊息協定） > 基本的原理和串流傳輸相同，但同時需要使用「推流傳輸協議」，影音錄製這端會一小段一小段的上傳，使用者也是一小段一小段的取得 ![](https://i.imgur.com/1i4war0.png) ### 常見的網路傳輸協定（Communications Protocol） ![](https://i.imgur.com/f0vhYne.png) ### 比較表 | 協議 | 傳輸層選擇 | 聲音編碼 | 影像編碼 | 延遲性 | | ---- | ---------- | -------- | -------- | --- | | 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 開啟網路串流 ![](https://i.imgur.com/fzl0KbW.png) #### 貼上Rtsp的URL > 範例 : rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov > ![](https://i.imgur.com/TOm3ttS.png) > #### 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做調整 > ::: #### 選擇串流 ![](https://i.imgur.com/6gpQn6P.png) #### 下一步 ![](https://i.imgur.com/GNcxBPL.png) #### 目的地選擇HTTP ::: danger *按加入* ::: ![](https://i.imgur.com/lqimbAL.png) #### 設定一個未使用的Port ![](https://i.imgur.com/B2hQ9l0.png) #### 選擇轉碼的格式 ![](https://i.imgur.com/1kjXrx9.png) #### 我選擇Ogg/Ogm格式 ![](https://i.imgur.com/elqGnRQ.png) #### 解碼器設定 ![](https://i.imgur.com/EP2usd8.png) #### 開始串流 ![](https://i.imgur.com/CO09puO.png) #### Google Chrome上看RTSP影片 ![](https://i.imgur.com/D2zOzQP.png) ## 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> ```