Easydarwin加FFMPEG實現HLS流視頻點播

時間 2020-06-12

標籤 easydarwin ffmpeg 實現 hls 視頻點播简体版

原文原文鏈接

前言

最近有點迷茫，因此將本身用過的東西寫個Demo記錄一下，複習複習。html

具體實現：git

Easydarwin 一個開源的好用的流媒體平臺框架。github

FFMPEG 一個視頻音頻處理神器，就是用起來有點麻煩，必須保證命令正確。npm

FFMPEG將視頻或者視頻地址(Rtsp,Rtmp)轉碼推流到EasyDarwin作轉發，FFMPEG將EasyDarwin視頻作切片成M3U8文件。瀏覽器

網站直接訪問M3U8文件，實現HLS點播。算是一個粗糙的Demo，具體能夠根據需求更改。框架

參考：tcp

FFMPEG:ide

官網參考測試

EasyDarwin：

實現過程

EasyDarwin 下載解壓以後以下：

如今這個已經很完善了，最開始用的使用bat文件啓動，並且沒有這個簡潔，

Easydarwin.ini 配置項和注意事項能夠本身配置也能夠使用默認配置。

單擊 ServiceInstall-EasyDarwin.exe 等待安裝完成以下：

打開瀏覽器，輸入 http://127.0.0.1:10008 能夠看到設備當前運行狀態和推流拉流的列表，效果界面以下：

測試視頻地址: rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov

這個地址公開的，算是比較穩定的，之前測試能夠用如今仍是能夠，有些地址就沒辦法訪問了。

使用cmd輸入 ffmpeg.exe -i "RTSP地址" -vcodec copy -acodec copy -rtsp_transport tcp -f rtsp "推流地址"

Rtsp默認爲554端口，RTSP地址爲最後實際使用的地址，推流爲 rtsp://127.0.0.1/test.hls 127.0.0.1本地測試，遠程爲推流服務IP

例子： ffmpeg.exe -i rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov -vcodec copy -acodec copy -rtsp_transport tcp -f rtsp rtsp://127.0.0.1/test.hls

具體命令行參數詳解參考：官網參考

每次使用。。。都是頭大，用過以後吧命令記下來，須要更改就一個個看。

推流成功，cmd窗口以下會不停的刷新當前參數：

此時EasyDarwin網站推流列表會顯示對應地址和能夠拉流的地址以下：

驗證該播放地址是否能夠播放，能夠使用VLC輸入該地址測試。

此時推流和接收部分完成，只須要用FFMPEG獲取播放地址的數據進行切片獲取M3U8，網站播放。

在打開一個cmd，命令以下：

ffmpeg.exe -i rtsp://127.0.0.1/test.hls -fflags flush_packets -max_delay 2 -hls_flags delete_segments -hls_time 2 -g 30 ********\live.m3u8

紅色部分，第一個爲EasyDarwin轉發的播放地址，第二個爲live.m3u8文件的保存路徑，成功以後效果圖以下：

此時在網站中訪問這個地址，就能夠實現HLS點播。

網站實現：

首先下載一個 hls.js的庫文件：地址

代碼實現：

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
    <script src="hls.js"></script> //下載的hls.js 文件路徑
    <script> function btn_OpenHls() { var htmlvideo = document.getElementById("videoPaly"); htmlvideo.controls = true; var hls = new Hls(); hls.loadSource("/live.m3u8");//m3u8文件路徑
 hls.attachMedia(htmlvideo); hls.on(Hls.Events.MANIFEST_PARSED, function () { htmlvideo.play(); }); } </script>
</head>
<body>
    <button onclick="btn_OpenHls()">打開HLS視頻</button>
    <video id="videoPaly" width="300" height="300"></video>
</body>
</html>