海康IPC+ffmpeg+nginx+ckplayer實現網頁實時預覽監控視訊
第一次接觸攝像頭 搗騰了好幾天 現在記錄下搭建過程 以免忘掉
實現思路和其他大神的基本一致 :1.通過IPC的rtsp協議獲取rtsp流 2.使用ffmpeg轉成rtmp協議 3.通過nginx釋出rtmp流 4.使用ckplayer播放
一、準備:
1.海康IPC
2.交換機
3.筆記本充當伺服器
4.ffmpeg
5.已安裝過nginx-rtmp-module功能的nginx
由於本人只是個C#小呆而已 因此網上大神們安裝nginx-rtmp-module的方法我完全看不懂,經過一天翻遍某度 終於找到了別人已安裝好的
這個版本的nginx已經幫我們把rtmp協議配置好了
(感謝csdn博主mengzhengjie的文章http://blog.csdn.net/mengzhengjie/article/details/50969016)
6.ckplayer
7.java或.net或php或dw等web開發工具(用於測試實現效果)
8.vlc
可播放rtsp和rtmp流的播放器 用來測試
二、rtsp流
海康IPC支援通過rtsp協議進行流傳輸,因此獲取流非常方便,取流地址為:rtsp://admin:[email protected]:554/h264/ch1/main/av_stream
其中,admin和12345是登入IPC的使用者名稱和密碼,@後面跟IPC的IP地址,埠號預設為554,如果修改過,這裡填修改後的埠號。只要是支援rtsp協議的IPC都可以通過類似方式取流,各廠商的格式可能略有不同,請查閱各廠商的相關說明
連線好IPC、電腦、交換機後,開啟vlc播放器,選擇媒體-->開啟網路串流-->填入rtsp協議-->播放,如果連線和引數正確,此時vlc應該可以播放監控畫面
三、安裝ffmpeg
通過第一步我們確認了rtsp流可以正確獲取後,第二步我們安裝ffmpeg,用於rtsp流轉rtmp流
ffmpeg是一個功能非常強大的視訊處理工具,居家旅行學習開發必備,注意,ffmpeg需要區分32位和64位,請根據自己作業系統進行選擇
下載解壓後得到如下資料夾結構
配置環境變數:將x:/ffmpeg/bin新增到Path中,具體新增方法大家可檢視java配置jdk的方法,網上很多
測試ffmpeg:開啟cmd(使用管理員身份開啟),輸入:ffmpeg 獲取到如下圖所示介面,說明ffmpeg安裝成功
四、nginx搭建
nginx我的理解有點類似iis的功能,是個資訊管理器(如果不對,請大神斧正),原版的nginx是不帶有rtmp釋出功能的,需要安裝nginx-rtmp-module外掛,網上的方法很多,但是由於我看得一臉懵逼,所以花了好久找到已安裝好外掛的nginx,連結已奉上,這個我們就可以直接用了
將壓縮包解壓到任意位置,進入conf資料夾,開啟nginx.conf檔案,找到http{server{listen,將埠號改成10001(只要沒有被佔用的埠都可以,我習慣1w+),順便看看有個rtmp{server{listen1935,這個就是釋出rtmp流的埠,後面會用到
儲存nginx.conf,雙擊nginx.exe,一閃而過,不知道啥情況,看看工作管理員
發現有兩個nginx.exe,說明啟動成功,啟動失敗多半是埠被佔用,cmd:netstat -a 檢視端口占用情況,如果nginx成功啟動,那麼10001和1935也會被佔用
至此,nginx成功搭建
五、rtsp轉rtmp
搭建好nginx,說明通過ffmpeg轉換的rtmp流有地方接收了,這一步我們就來轉流
開啟cmd輸入以下指令:
ffmpeg -i "rtsp://admin:[email protected]:554/h264/ch1/main/av_stream" -f flv -r 1 -s 1920x1080 -an "rtmp://192.168.1.100:1935/live/stream"
rtsp://是IPC取流的協議地址,rtmp則是剛才搭建nginx的地址,這個1935埠就是剛才配置nginx時看到的rtmp埠,輸入後首先會看到關於ffmpeg的一些資訊,出現如下介面則說明ffmpeg已成功將rtmp流推送到了nginx
最下面一排就是事實轉流和傳送的資訊,紅色的是錯誤資訊,我的有丟包現象
我們再開啟vlc播放器,測試下是否可以成功播放rtmp流,方法依然是開啟vlc,填入:rtmp://192.168.1.100:1935/live/stream 播放,如果可以看到監控畫面說明成功
六、網站播放
至此,通過ffmpeg+nginx+ckplayer將支援rtsp協議的IPC在網頁上播放的工作基本完成,其實還有很多技術處理需要去細化,如ffmpeg在處理多條rtsp流時,效率如何,丟包情況如何處理,nginx配置多個rtmp流等等,後續有進展再寫bk進行補充
相關推薦
海康IPC+ffmpeg+nginx+ckplayer實現網頁實時預覽監控視訊
第一次接觸攝像頭 搗騰了好幾天 現在記錄下搭建過程 以免忘掉實現思路和其他大神的基本一致 :1.通過IPC的rtsp協議獲取rtsp流 2.使用ffmpeg轉成rtmp協議 3.通過nginx釋出rtmp流 4.使用ckplayer播放一、準備:1.海康IPC2.交
Jquery.media.js實現網頁線上預覽pdf檔案
近期在工作中遇到了需要在網站預覽pdf檔案的需求,網上的資料很多,我使用了其中一種,即使用 Jquery.media.js包實現。 首先需要準備兩個內容: 1,jquery.js,任意版本 2,jquery.media.js,可以從網上搜,或者去下面我提供的地方下載(是我上傳的),
javascript實現圖片實時預覽的兩種方式
javascript實現圖片實時預覽的兩一、FileReader(base64): 代碼: <input id="file" type="file"> <img id="img" > <script> var file = document.getElementById(
sublime text 3 實現markdown 實時預覽的方法
實現markdown實時預覽 先安裝兩個外掛, 推薦使用Package Control的方式安裝. 安裝Markdown Preview ctrl+shift+p, 然後輸入 Install Package 輸入Markdown Preview, 回車
Atom 編輯器實現HTML實時預覽
基礎實現: 快捷鍵 在編輯框中按 Ctrl + Shift + M 可以開啟原生預覽。(不帶CSS樣式) 外掛實現:atom-html-preview 點選File->settings–>install-> 搜尋 atom-html-p
海康IPC+NVR+路由器+ffmpeg+nginx實現網頁/Android/IOS的HLS直播
研究攝像頭直播有一個月了,最終領導決定使用HLS協議進行攝像頭實時預覽,原因是HLS對移動端和Web端都能有比較好的支援 總體思路大致如下: 1.搭建好IPC和NVR環境後,可以通過NVR的IP地址(內網)和rtsp協議訪問到關聯此NVR的IPC視訊 2.通過路由器的埠對映
海康IPC+NVR+EasyDarwin+EasyPusher+VLC實現Web實時播放RTSP視訊
上篇部落格是用ffmpeg+nginx實現web播放rtsp視訊,原理是將rtsp轉碼成rtmp格式,再用flash外掛播放 由於專案硬體條件有限,轉碼基本就不考慮了,因此只能直接播放獲取到的rtsp流,並且整個網路環境只能有一個外網IP,因此思路就是能否通過NVR去找同一網段內的IPC,如何搭建NVR和I
ffmpeg+nginx+video實現rtsp流轉hls流,通過H5檢視監控視訊
一、FFmpeg下載:http://ffmpeg.zeranoe.com/builds/ 下載並解壓FFmpeg資料夾,配置環境變數:在“Path”變數原有變數值內容上加上d:\ffmpeg\bin,驗證:ffmpeg -version 出現版本號則成功。二、官網下載w
windows下搭建ffmpeg+nginx+rtmp-module搭建實時視頻環境
target ati 靜態 hub 標簽 int 性能 pan href 下載ffmpeg的Windows靜態版; https://ffmpeg.zeranoe.com/builds/win64/static/下載nginx-rtmp-windows版:https://gi
windows下搭建ffmpeg+nginx+rtmp-module搭建實時視訊環境
解壓啟動nginx 啟動ffmpeg,開啟ff-prompt.bat這裡通過將攝像頭的rtsp流轉成rtmp流和hls流來實時播放通過rtsp生成rtmp流:ffmpeg -i "rtsp://admin:[email protected]:554/h264/ch1
JavaScript實現拖拽預覽,AJAX小文件上傳
strong 名稱 獲取文件 是否 set 可能 lis idt scrip 本地上傳,提前預覽(圖片。視頻) 1.html中div標簽預覽顯示。button標簽觸發上傳事件。 <div id="drop_area" style=
excel轉html 實現在線預覽
格式 ole pen all poi cef 數字類型 ati rri 首先說一下,本人發布的代碼都是經過本人親測,並且用在實際項目中。如果覺得可以,希望大家點個贊,謝謝大家。 有什麽問題,大家評論出來,一起交流。好了,不廢話了,下面來說一說這個東西怎麽做。 網上也有許多版
cropper.js實現圖片裁剪預覽並轉換為base64發送至服務端。
urlencode button 圖片 all 完成 r.js borde lan meta 一 、準備工作 1.首先需要先下載cropper,常規使用npm,進入項目路徑後執行以下命令: npm install cropper 2. cropper基於
控件實現點擊預覽圖片更改頁面背景圖片的效果
後臺 -i n) border 圖片 pro nta com alt 本實例將在頁面上放置2個ImageButton並設置背景圖片,當點擊其中一個按鈕時對應的會將網頁的背景圖片更改為按鈕的背景圖片。程序實現的主要步驟為:(1)新建一個網站並創建Default.aspx頁面,
word導出html實現在線預覽
word導出html實現在線預覽需要的maven依賴經過編譯,必須版本配合一致: <!-- https://mvnrepository.com/artifact/fr.opensagres.xdocreport/org.apache.poi.xwpf.converter.core -->
基於Vue + Node.js + MongoDB的圖片上傳組件,實現圖片的預覽和刪除
信息 clas 發送數據 演示 新增 one input標簽 return tof 公司要寫一些為自身業務量身定制的的組件,要基於Vue,趁著這個機會,自己在業余時間也寫了個組件,選擇寫圖片上傳是因為自己之前一直對這個功能比較迷糊,所以這次好好了解了一下。演示在網址打開後的
實現在線預覽PDF的幾種解決方案
動態 api for ive pdf span www 控制器 動態顯示 原文:實現在線預覽PDF的幾種解決方案因客戶需要實現PDF的預覽處理,在網上找了一些PDF在線預覽的解決方案,有的用PDFJS的在線預覽方式,有的使用PDFObject的嵌入式顯示,有的通過轉換JPG
JS實現圖片的預覽及預覽圖片的寬高獲取
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圖片預覽</title> </head> <style
java 使用openoffice 轉換文檔,成.pdf,實現在線預覽效果
ffice 不能 logger ati base 預覽 ntc etime 分享圖片 1. 下載 openoffice 地址 https://pan.baidu.com/s/1dfpoG6zlawoW1pqpDvBL0A 密碼: v4ej 如果上面的地址無法
利用datatransfer實現單張圖片預覽和文字預覽
實現單張圖片預覽 首先要給個盒子識別是否拖拽圖片進入區域 <div id="result" class="result"> </div> <ul> </ul> Javascript邏輯程式碼 <