Nginx、FFmpeg實作浏覽器無插件播放大華IPC、NVR裝置視訊

使用Nginx、FFmpeg将rtsp流轉換為hls流，web頁面通過video.js實作視訊播放

一、軟體安裝

（1）安裝Nginx

Windows平台下，下載下傳Nginx的安裝包，官網位址，建議選擇Stable version。

解壓縮之後可以通過輕按兩下nginx.exe運作Nginx伺服器。在浏覽器打開新的标簽頁并輸入localhost或本機IP位址，若出現welcome to Nginx樣式的文本，則成功。

修改安裝路徑下/conf/nginx.conf檔案，在http -> server下加入以下指令：

location /hls{
	root html;
	add_header Access-Control-Allow-Origin *;
}

同時檢視conf目錄下mime.types檔案的types中是否包含以下内容：

types{
    application/vnd.apple.mpegurl m3u8;
    application/x-mpegURL m3u8;
    video/mp2t ts;
}

若不包含，則添加。

Linux平台(以centos7為例)，可通過yum指令安裝(對centos不是很精通的話最好用root使用者登入)(nginx官網提供了安裝方法，但我沒有試過)，

安裝完成後，修改

/etc/nginx/conf.d

目錄中的default.conf檔案，在server -> location下添加以下内容解決跨域問題。

add_header Access-Control-Allow-Origin *;

同樣檢視conf目錄下的mime.types檔案的内容是否符合要求。

（2）安裝FFmpeg

Windows平台下，下載下傳FFmpeg，下載下傳完成後解壓并将檔案夾複制到想要安裝的盤符。完成後配置環境變量，将安裝目錄中的bin目錄配置到系統變量path中，如D:\MyWork\ffmpeg\bin。在建立的cmd視窗中輸入ffmpeg -version後，如果出現版本号則安裝成功。
Linux平台安裝FFmpeg時，可以通過nux-desktop源安裝，

也可以通過編譯安裝。同樣，在終端中輸入ffmpeg -version後，如果出現版本号則安裝成功。

二、指令行轉流

（1）Windows下的指令：

ffmpeg -i "rtsp://admin:[email protected]:554/cam/realmonitor?channel=1&subtype=0" -c copy -f hls -hls_time 2.0 -hls_list_size 1 -hls_wrap 15 D:\nginx-1.16.1\html\hls\test.m3u8

（2）Linux下的指令：

ffmpeg -rtsp_transport tcp -i "rtsp://admin:[email protected]:554/cam/realmonitor?channel=1&subtype=0" -c copy -f hls -hls_time 2.0 -hls_list_size 1 -hls_wrap 15 /usr/share/nginx/html/hls/test.m3u8

兩條指令中結束部分的路徑為m3u8檔案所在路徑。也是第一步中location設定的位置。

由于FFmpeg預設使用UDP協定，我在Linux中使用時出現逾時的情況，是以建議強制使用TCP方式讀取rtsp流：

-rtsp_transport tcp。

其他參數代表的含義：

-hls_time n: 設定每片的長度，預設值為2。機關為秒

-hls_list_size n:設定播放清單儲存的最多條目，設定為0會儲存有所片資訊，預設值為5

-hls_wrap n:設定多少片之後開始覆寫，如果設定為0則不會覆寫，預設值為0.這個選項能夠避免在磁盤上存儲過多的片，而且能夠限制寫入磁盤的最多的片的數量

-hls_start_number n:設定播放清單中sequence nu+mber的值為number，預設值為0

（4）使用FFmpeg拉流時，網絡攝像頭與網絡硬碟錄像機RTSP位址的差別

使用網絡攝像頭

rtsp://username:passwo[email protected]:port/cam/realmonitor?channel=攝像頭的信道&subtype=碼流

使用者名、密碼、IP位址、端口号都是攝像頭的；

碼流分為主碼流(0)和輔碼流(1)兩種。

使用網絡硬碟錄影機

rtsp://username:passwor[email protected]:port/cam/realmonitor?channel=攝像頭所在通道&subtype=碼流

使用者名、密碼、IP位址、端口号均為硬碟錄像機的；

channel為攝像頭的通道：如果硬碟錄像機最大支援8路網絡視訊接入，那麼channel最大值為8，最多可接入8個攝像頭，每一路為一個通道；

碼流同樣分為主碼流（0）和輔碼流（1）兩種。

海康和大華裝置的rtsp位址格式詳解

三、視訊實時播放與視訊回放

(1)實時播放

使用實時播放時，RTSP應當書寫為：

rtsp://username:passwo[email protected]:port/cam/realmonitor?channel=攝像頭的信道&subtype=碼流

此時，通過網絡攝像頭或者硬碟錄像機都可以擷取實時視訊

(2)視訊回放

使用視訊回放時，RTSP應當書寫為：

rtsp://username:[email protected]:port/cam/playback?channel=攝像頭所在通道&subtype=碼流&starttime=yyyy_MM_dd_HH_mm_s&endtime=yyyy_MM_dd_HH_mm_s

或

rtsp://username:[email protected]:port/cam/playback?channel=攝像頭所在通道&subtype=碼流&starttime=yyyy_MM_dd_HH_mm_s

starttime表示開始時間，endtime表示結束時間

使用視訊回放時，應該連接配接硬碟錄像機或有存儲功能的網絡攝像頭

實時播放與回放rtsp位址的差別在于端口号後邊的路徑：

實時播放的路徑為/cam/realmonitor、而視訊回放的路徑為/cam/playback/

四、HTML頁面播放視訊

通過浏覽器播放m3u8檔案，将video标簽中的src替換為

http://IP位址/hls/test.m3u8

type設定為

application/x-mpegURL。

通過muted和autoplay="autoplay"搭配的方式可以實作自動播放功能。

對于video.js的使用，請參考video.js使用

demo代碼：

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Video.js 7.4.1</title>
		<link href="./video-js.min.css" rel="stylesheet">
		<script src="./video.min.js"></script>
	</head>
	<body>
		<div>
			<video id="my-video1" width="795" height="445" class="video-js" muted preload="auto" autoplay="autoplay" data-setup="{}">
				<source src="http://IP位址/hls/test.m3u8" type="application/x-mpegURL">
			</video>
		</div>
	</body>
</html>

效果：

Nginx、FFmpeg實作浏覽器無插件播放大華IPC、NVR裝置視訊

後期會更新從NVR裝置拉流，實時監控和回放功能 ------------ 已更新

參考

Nginx+FFmpeg實作rtsp流轉hls流

浏覽器播放m3u8檔案等

Nginx、FFmpeg實作浏覽器無插件播放大華IPC、NVR裝置視訊