天天看點

海康威視攝像頭視訊在web端播放解決方案ffmpeg + nginx + http-flv

一:下載下傳海康JAVA-DEMO

我開發環境是window10-64位 IDEA JDK1.8 的 和 mac IDEA JDK1.8 demo下載下傳位址 https://www.hikvision.com/cn/download_more_570.html

1:下載下傳完成以後,必須認真看完這個txt,不然後面可能會出現“dll缺失”和“sdk檔案不存在”這種異常

海康威視攝像頭視訊在web端播放解決方案ffmpeg + nginx + http-flv

2:sdk使用手冊【必看】

海康威視攝像頭視訊在web端播放解決方案ffmpeg + nginx + http-flv

二:攝像裝置ip,通道檢視

海康攝像頭裝置的錄像檔案一般都是存儲在錄像機,找出錄像機的ip及賬号密碼

在最新版IE11上通路 錄像機ip

海康威視攝像頭視訊在web端播放解決方案ffmpeg + nginx + http-flv

輸入賬号密碼就能看到這個錄像機關聯的攝像頭,一般來講第一個就是通道一,第二個就是通道二,ip暫時沒用到,如果想看具體的攝像頭ip ,可以下載下傳個4200工具

海康威視攝像頭視訊在web端播放解決方案ffmpeg + nginx + http-flv

當你測試sdk中預覽啊,回放啊什麼功能出現問題的時候,可以在此管理平台檢驗一下是裝置不支援,還是代碼問題;我發現敝司用的監控攝像頭就沒有雲台控制功能的;

三:rtmp實時預覽

1:我想要在web端顯示實時預覽的畫面,而海康提供的demo是用GUI 元件去解碼視訊流資料來顯示;并且客服說隻能提供IE和舊版chrome浏覽器的解碼插件;這不符合預期,那麼接下來是使用ffmpeg【ffmpeg的安裝、環境變量配置及基本使用】對海康視訊流rtsp流進行轉換,并以rtmp協定的流資料傳回給前端,前端通過video.js來展示

海康威視攝像頭視訊在web端播放解決方案ffmpeg + nginx + http-flv

端口預設8000,是以組裝成如下格式

rtsp://admin:passw[email protected]/Streaming/Channels/101?transportmode=unicast

101主碼流比102子碼流更清晰,組裝好以後可以用vlc播放器檢查一下位址

海康威視攝像頭視訊在web端播放解決方案ffmpeg + nginx + http-flv

2:下載下傳已經內建nginx-rtmp插件的nginx,傳送門:https://github.com/illuspas/nginx-rtmp-win32

解壓以後,打開conf/nginx.conf檔案

worker_processes  1;

error_log  logs/error.log info;

events {
    worker_connections  1024;
}

rtmp {
    server {
        listen 1935;

        application live {
            live on;
        }
		
        application hls {
            live on;
            hls on;  
            hls_path temp/hls;  
            hls_fragment 8s;  
        }
    }
}

http {
    server {
        listen      8080;
		

		
        location / {
            root html;
        }
		
        location /stat {
            rtmp_stat all;
            rtmp_stat_stylesheet stat.xsl;
        }

        location /stat.xsl {
            root html;
        }
		
        location /hls {  
            #server hls fragments  
            types{  
                application/vnd.apple.mpegurl m3u8;  
                video/mp2t ts;  
            }  
            alias temp/hls;  
            expires -1;  
        }  
    }
}
           

在檔案中找到nginx.exe,輕按兩下啟動

三:在cmd中使用 ffmpeg指令 ,'home’随便命名的

ffmpeg -re  -rtsp_transport tcp -i "rtsp://admin:[email protected]/Streaming/Channels/101?transportmode=unicast" -f flv -vcodec h264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -s 640*360 -q 10 "rtmp://localhost:1935/live/home"

           

擷取視訊源并轉碼成功如下

海康威視攝像頭視訊在web端播放解決方案ffmpeg + nginx + http-flv

使用vlc播放器來測試視訊流

海康威視攝像頭視訊在web端播放解決方案ffmpeg + nginx + http-flv

那麼windows版海康攝像頭rtsp源轉rtmp源實時預覽到此到此基本結束啦;

因為chrome浏覽器2020年底就不再支援flash,而videojs是使用flash來播放 ,是以得換成http-flv協定的視訊流,這個協定是我對比了其他協定的優劣(如hls)才最終決定的,又因為nginx-flv-module我找不到在windows上衣編譯好的子產品,編譯起碼又特别麻煩;是以我換成在macbook上去實作 海康攝像頭 rtsp源轉http-flv源,前端使用flv.js實作播放

四:http-flv實時預覽

1:openssl下載下傳:因為openssl前不久爆出重大安全漏洞,是以mac系統不支援使用依賴管理工具來下載下傳,隻能收到下載下傳,下載下傳位址:https://github.com/openssl/openssl

2:nginx下載下傳 :http://nginx.org/ 我一開始用1.8不行,後面改成1.12就可以了

3:nginx-flv下載下傳:https://github.com/winshining/nginx-http-flv-module

4:找出nginx下configure檔案所在路徑

./configure --add-module=/path/to/nginx-http-flv-module --with-openssl=/pathto/openssl-master/

make

make install
           

5:編譯完成以後,終端會輸出一個nginx的安裝路徑,前往該目錄修改nginx.conf,啟動nginx

修改nginx.conf,請參考:https://github.com/winshining/nginx-http-flv-module 最下面有個example

6:輸入ffmpeg 轉碼指令

ffmpeg -re  -rtsp_transport tcp -i "rtsp://admin:[email protected]/Streaming/Channels/101?transportmode=unicast" -f flv -vcodec h264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -s 640*360 -q 10 "rtmp://localhost:1935/myapp/home"

           

7:http-flv 流位址格式

http://yourdomain[:httpport]/dir?[rtmpport=xxx&]app=yyy&stream=zzz

           

其中httpport是Nginx的配置檔案中http塊中監聽的端口,如果這個端口是80,那麼可以省略不寫;rtmpport是Nginx的配置檔案中rtmp塊中監聽的端口,如果這個端口是1935,那麼可以省略不寫。dir是Nginx的配置檔案中http塊中location後的路徑。參數app 是example中的

海康威視攝像頭視訊在web端播放解決方案ffmpeg + nginx + http-flv

參數stream可以随便填

http://192.168.30.53/live?port=1935&app=myapp&stream=home

           

8:使用vlc播放器校驗一下http-flv視訊源是否正常播放就ok了

五:曆史回放

就這麼簡單啦

海康威視攝像頭視訊在web端播放解決方案ffmpeg + nginx + http-flv

此方案我在實作過程中發現視訊加載會有延遲(開始渲染視訊的時候很慢大概7,8秒的樣子),尚未找到解決方案

繼續閱讀