海康威視攝像頭-chrome谷歌瀏覽器高版本區域網下海康攝像頭web網頁實時播放

wfanking發表於2020-11-28
Chrome谷歌瀏覽器Web網頁

前言：

專案需要在web上實時播放攝像頭視訊。該專案部署在區域網上，無外網，所以不能呼叫螢石雲的api進行視訊拉取。
百度了很多方法，嘗試了使用海康威視WEB開發包3.0，但是隻支援IE瀏覽器。但是專案基於谷歌瀏覽器。
所以最後採用轉流的方式，部署nginx、ffmpeg將rtsp轉為rtmp格式、利用video.js在web網頁上進行視訊播放，無需瀏覽器安裝外掛。這裡延伸一點：HTML5的可以支援rtmp，但是無法播放rtsp，flash也止步於rtmp。

一、 前期工作：

環境：windows 伺服器

1、攝像頭準備工作：

將海康威視的視訊攝像頭和本地電腦連線在同一網段，並設定好攝像頭的IP地址和埠號等。

2、安裝vcl視訊播放器：

下載地址：https://download.csdn.net/download/wfanking/13195866

3、測試rstp地址正確性。

開啟vcl播放器，測試rtsp地址是否能播放成功，再進行接入操作。不然都是白扯。

【海康威視】取流說明：
如果攝像頭密碼是fun123456,IP是192.168.1.64，RTSP埠預設554未做改動，是H.264編碼，那麼 主碼流取流:
rtsp://admin:fun123456@192.168.1.64:554/h264/ch1/main/av_stream 子碼流取流:
rtsp://admin:fun123456@192.168.1.64:554/h264/ch1/sub/av_stream
ps：如果是H.265編碼的，那麼將H.264替換成H.265即可

二、直播接入指南

1、下載軟體包，解壓。

下載地址：https://download.csdn.net/download/wfanking/13195883
將修改好配置的壓縮包解壓，nginx、ffmpeg 解壓後放置c盤根目錄。

2、配置ffmpeg環境變數path：

path：C:\ffmpeg\bin，此處不做過多詳釋。
海康威視攝像頭chrome高版本區域網下web網頁實時播放：配置ffmpeg環境變數path

3、驗證ffmpeg是否配置成功：

cmd 輸入ffmpeg 提示一下資訊即可
海康威視攝像頭chrome高版本區域網下web網頁實時播放：驗證ffmpeg 是否配置成功

4、啟動nginx

執行檔案中的exe檔案，執行一閃之後工作管理員檢視nginx.exe程式存在即可，啟動成功如下圖
海康威視攝像頭chrome高版本區域網下web網頁實時播放：啟動nginx

5、cmd中輸入轉流命令：

ffmpeg -i ffmpeg -i “rtsp://admin:fun123456@192.168.1.64:554/ch1/sub/av_stream” -vcodec h264 -f flv -an “rtmp://localhost/live”
回車後控制檯持續列印轉流資訊:

6、測試rstp地址正確性：

再次開啟vcl播放器，播放rtmp視訊，驗證是否成功。若播放成功，則轉流步驟就完成了

7、前端展示部分：

src寫入rtmp://localhost.live流即可

 <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>阿飯的攝像頭</title>
		<!--引入播放器樣式-->
		<link href="http://vjs.zencdn.net/5.19/video-js.min.css" rel="stylesheet">
		<!--引入播放器js-->
		<script src="http://vjs.zencdn.net/5.19/video.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/videojs-flash@2/dist/videojs-flash.min.js"></script>
	</head>
	<body>

		<div class="div1">
			<!--vjs-big-play-centered 播放按鈕居中-->
			<!--poster預設的顯示介面，就是還沒點播放，給你顯示的介面-->
			<!--controls 規定瀏覽器應該為視訊提供播放控制元件-->
			<!--preload="auto" 是否提前載入-->
			<!--data-setup='{"example_option":true}' 可以把一些屬性寫到這個裡面來，如data-setup={"autoplay":true}-->

			<video id="my-player" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" poster="//C:/photo/1.jpg"
			 width="700" height="400" data-setup='{}'>
				<!--src: 規定媒體檔案的 URL  type:規定媒體資源的型別-->
				<source src='rtmp://localhost/live/' type='rtmp/flv' />
			</video>
		</div>

	<script type="text/javascript">
			// 設定flash路徑,用於在videojs發現瀏覽器不支援HTML5播放器的時候自動喚起flash播放器
			videojs.options.flash.swf = 'https://cdn.bootcss.com/videojs-swf/5.4.1/video-js.swf';
			var player = videojs('my-player'); //my-player為頁面video元素的id
			player.play(); //播放
			//    1. 播放   player.play()
			//    2. 停止   player.pause()
			//    3. 暫停   player.pause()
		</script>
	</body>
</html>

三、效果檢視

海康威視攝像頭chrome高版本區域網下web網頁實時播放

四、踩過的坑錦集：

1、chrome谷歌瀏覽器前端視訊播放報錯：No compatible source was found for this media，解決方法 見附件連結—> https://blog.csdn.net/wfanking/article/details/110253314

2、chrome谷歌瀏覽器前端視訊播放報錯：FLASH: rtmpconnectfailure解決方法， 見附件連結—> https://blog.csdn.net/wfanking/article/details/110253689

相關文章