找到了一個好用的免費開源JS庫——streamedian

當當當~上鏈接：https://streamedian.com

介紹中講到，Multifunctional HTML5 RTSP streaming video player over WebSocket
就是說，利用websocket實現(xiàn)多功能的H5的rtsp視頻流播放器

這里是使用文檔：https://streamedian.com/docs/

對于對websocket、linux、服務器、甚至英文一知半解（一竅不通）并看了文檔也不理解的同學，請繼續(xù)看手把手中文教程：

首先我們理解一下個中原理：

目標：在你的瀏覽器（browser）上播放rtsp視頻流
問題：然而，H5的標簽<video>不支持這樣的播放
方案：這里利用我們的streamedian在你的服務端開啟一個websocket代理（proxy），負責接收rtsp流，并轉播給你的瀏覽器客戶端，streamedian在客戶端利用中間件（Media Sources Extensions）將經(jīng)過轉播收到的RTP H264和AAC包轉化成MP4包，“喂給“<video>進行播放

下面拿到streamedian的code來感受一下：

JS庫下載

方法一：通過官網(wǎng)下載
可能不是最新版，streamedian團隊還在不斷地修復bug中，建議用方法二、三下載最新更新的版本

進入https://streamedian.com 完成注冊并登錄

可以看到最上面紅框標注的是我們需要的客戶端和服務端的JS程序；

針對客戶端，如果你使用H5的原生播放器<video>標簽，下載Download player即可，此外還提供了代替版本————結合非原生H5播放器的clappr integration、videojs integration、Flowerplayer integration可供選擇。這里我只下載了Download player
針對服務端，下載proxy，這里的.rpm和.deb是兩種格式，選擇其一下載，我這里用的ubuntu，.deb更適用，點擊下載

接下來是對我們使用的免費版本streamedian的特性描述；
在Domain欄里。你需要輸入你所使用的客戶端的域名或IP，Add之后，點擊Download license。保存好這個license后面會用到，后面會解釋為什么要在license中明確特定的客戶端域名

方法三：從git上拉下來
npm install git://github.com/Streamedian/html5_rtsp_player.git
方法二：下載git的壓縮包

配置與安裝

梳理一下，我們現(xiàn)在下載了什么呢？客戶端JS streamedian，服務端proxy streamedian_proxy.deb,一個licsense wsp.lic

• 服務端配置

將streamedian_proxy.deb和wsp.lic分別上傳至服務器，并在streamedian_proxy.deb根目錄下sudo dpkg -i streamedian_proxy.deb #安裝streamedian_proxy.deb軟件包（其中-i等價于--install）

安裝好后會生成/etc/ws_rtsp.ini，進入這個路徑，利用vim進行配置，這里我們只要設置general，其中port就是你的服務端轉播服務的端口，liscense_path則是你上傳的wsp.lic的絕對路徑，PRO version的參數(shù)可以不進行修改

配置好端，可以用service ws_rtsp start命令啟動該服務，那么就在后端相應端口建立起了一個將rtsp轉播服務。至此服務端已經(jīng)配置好，只要前端把rtsp地址通過socket發(fā)送給服務端，就可收到rtsp流的socket包了

service ws_rtsp stop命令可以用于停止該服務，ps -aux|grep ws_rtsp命令可以用于查詢該服務進程的運行情況

• 客戶端配置

用Vs Code打開下載好的streamedian

終端運行npm install下載依賴
終端運行npm install --global rollup這里我們安裝的的rollup是一個JS模塊打包工具，后面會用到

接下來打開rollup.config.js，其中的entry配置了源文件，target則指定了打包生成的目標文件的目錄及文件名。終端運行rollup -c，可以看到在dist目錄下打包生成了目標文件streamedian.js

至此我們的客戶端工作完成一半，客戶端的頁面在哪里呢？下面我們來做一個最簡單的頁面，這里以文件中的index.html為例
可以看到<script>標簽中引用了我們打包好的streamedian.js

引用了<video>標簽播放rtsp視頻

<source>中指定了rtsp流源,rtsp://184.72.239.149/vod/mp4:BigBuckBunny_175k.mov是一個穩(wěn)定的可用于測試的源

socket的參數(shù)則是我們運行的rtsp流轉播服務器運行url，格式為ws://服務器IP:端口號，可以看到這里的端口號就是之前配置好的1104

現(xiàn)在我們在瀏覽器中打開index.html，可是并沒有視頻顯示！我的理解是，前期我們在license中設置過客戶端的IP或域名，這意味對服務端來說，只對我們制定的客戶端進行流轉播，因此還差一步

把index.html及streamedian.js放在同一目錄下，并上傳至制定的客戶端服務器

大功告成~~