簡介大華DVR/NVR設備Web端視頻播放插件及配套demo面向需要在瀏覽器中直接集成監(jiān)控畫面的開發(fā)者與實施人員可解決直連設備觀看實時流與錄像回放的問題。壓縮包共43個文件容量568KB以js腳本、html頁面和css樣式為主輔以txt說明與svn配置記錄核心邏輯與演示界面結構清晰。已有3888人學習下載。插件支持自動下載安裝簡化部署演示了無服務器中轉(zhuǎn)的直連播放并能在線流暢播放高清視頻流。播放控制之外還支持攝像頭縮放、焦距調(diào)整等交互操作以及歷史錄像回放能力適合監(jiān)控系統(tǒng)集成和二次開發(fā)場景。附帶的secondDevelopment_new目錄提供二次開發(fā)相關代碼開發(fā)者可借此快速定制插件行為或接入自身業(yè)務邏輯降低大華視頻功能上線的門檻。 如果你搞過Web端的安防監(jiān)控對接大概率繞不開“大華視頻播放插件”這個東西。很多剛?cè)胄械呐笥涯玫揭粋€demo卻找不到入口插件怎么裝、為什么網(wǎng)頁播不了、IPC和NVR的通道號到底怎么填。這篇文章我用自己的實際項目經(jīng)驗把大華視頻播放插件及demo的整體設計、核心模塊、對接參數(shù)、常見坑位全部拆開講一遍適合剛接大華攝像頭的集成商、正在做視頻中臺的開發(fā)也適合項目交付時被瀏覽器兼容問題折騰得頭疼的現(xiàn)場實施。1. 項目整體設計與選型思路1.1 為什么大華視頻播放需要獨立插件先搞清楚一個根本問題為什么不能直接用video標簽播放攝像頭畫面原因很簡單監(jiān)控設備走的是RTSP/RTP協(xié)議而不是瀏覽器原生能識別的HTTP-FLV或HLS。網(wǎng)頁端想要直接解析H.264/H.265的裸流還需要處理音視頻解碼、多路渲染、對講、云臺控制、OSD疊加這些能力單靠瀏覽器自帶的解碼器完全不夠。再加上安防場景對低延遲的要求通常希望在200到500毫秒以內(nèi)出畫面。傳統(tǒng)HLS的延遲經(jīng)常在3到10秒應用在實時預覽場景根本扛不住。所以大華在PC瀏覽器這套方案上采取了“瀏覽器控件ActiveX/Web插件 本地SDK”的組合方式——插件負責和設備建立連接、解碼、渲染JS負責業(yè)務交互。這種架構在實際項目里很穩(wěn)定多窗口、多畫面、錄像回放都基于本地能力實現(xiàn)不需要把視頻流推到中轉(zhuǎn)服務器。1.2 Demo需求到底怎么拆我接到的這個項目最初需求只有一句話做一個能看大華攝像頭畫面的demo。但如果只做“看到畫面”交付的時候肯定會被現(xiàn)場打回。我拿到需求后先做了一次拆解最終定成這五個核心模塊實時預覽單畫面、四畫面、九畫面切換選擇通道和碼流類型。錄像回放指定時間段從設備SD卡或NVR硬盤上取流。本地抓圖與錄像截取當前幀保存為圖片錄制本地視頻文件。云臺控制上下左右轉(zhuǎn)動、變倍、預置位調(diào)用。報警聯(lián)動設備報警觸發(fā)彈窗自動聯(lián)動對應通道。Demo形式上我做了兩個形態(tài)一個掛在Web工程里的JS調(diào)用頁面一個獨立HTML的快速驗證頁。后者在項目交付時特別好用現(xiàn)場工程師不用打開編譯工具直接雙擊HTML就能判斷是設備問題還是上層業(yè)務問題。2. 插件核心模塊解析與關鍵參數(shù)2.1 初始化與登錄的連接層次大華視頻播放插件的調(diào)用模型我總結成三步初始化、登錄、播放。初始化就是讓瀏覽器加載插件組件并檢查當前環(huán)境下插件版本是否可運行。這個階段最常見的問題是插件控件被瀏覽器攔截或者版本不匹配導致方法不可調(diào)用。穩(wěn)妥的做法是頁面加載后先主動調(diào)用一次初始化函數(shù)失敗了就給出明確的引導提示。登錄環(huán)節(jié)需要注意它連接的不一定是攝像頭本身也可能是NVR或者平臺中心。不同的接入對象參數(shù)含義會有些差別。接入對象IP地址指向端口登錄賬號IPC攝像頭攝像頭獨立IP默認80/37777攝像頭本地賬號NVR錄像機NVR局域網(wǎng)IP默認80/37777NVR管理員賬號平臺中心平臺服務器IP按平臺配置平臺子賬號初始化、登錄、播放這三步必須保持順序。我見過不少開發(fā)圖方便把登錄和播放寫在一個方法里結果切通道時偶爾抽風怎么都查不到原因。規(guī)規(guī)矩矩分開寫后面排查問題會容易很多。2.2 實時預覽和錄像回放的參數(shù)差別很多新手會問回放不就是播放一段過去的視頻嗎為什么不能直接塞個地址播放這其實是把概念搞混了。實時預覽的取流地址通常是rtsp://ip:554/cam/realmonitor?channel1subtype0這種結構subtype0代表主碼流subtype1代表子碼流。主碼流清晰度高適合單畫面全屏但帶寬占用大子碼流分辨率低適合多畫面同時預覽。四畫面以上的場景我一般建議優(yōu)先用子碼流不然機器性能和帶寬都扛不住。錄像回放就不一樣了?；胤判枰磿r間段從設備存儲里撈數(shù)據(jù)并且要支持進度條拖動。所以插件傳入的參數(shù)不是URL而是通道號、開始時間、結束時間、碼流類型這幾個條件。插件內(nèi)部再去和NVR/設備存儲模塊做時間軸索引。從調(diào)用邏輯看回放要比預覽多一步“查詢錄像”你得先獲取這個通道在指定時間段內(nèi)是否存在錄像文件再發(fā)起播放。如果查詢結果為空頁面要有提示而不是播放器黑屏一片。2.3 抓圖、錄像、云臺控制這些“隱藏功能”一個合格的demo不能只播畫面業(yè)務聯(lián)動才是甲方真正關心的。抓圖本質(zhì)上是把當前解碼幀抽取成一幅JPEG畫質(zhì)圖片可以觸發(fā)前端下載也可以回傳后臺保存到服務器。我建議把抓圖路徑設計成可配置的方便不同項目里指定保存目錄。錄像模塊通常會生成MP4文件錄制過程中要注意磁盤剩余空間判斷。現(xiàn)場環(huán)境復雜動不動就錄滿盤。我習慣在錄制開始前檢查容量低于200MB直接彈警告避免錄幾分鐘后莫名其妙中斷。云臺控制的接口比想象的簡單無非是方向命令加步長。但有個細節(jié)云臺控制結束后必須發(fā)送停止命令否則轉(zhuǎn)動會一直持續(xù)鏡頭直接跑到死角。這個邏輯初學階段常被忽略實際調(diào)試時又會頻繁觸發(fā)。3. Demo完整實現(xiàn)流程與代碼拆解3.1 環(huán)境準備和依賴項我在項目里使用的運行環(huán)境是Windows 10專業(yè)版瀏覽器用的IE11兼容模式。這聽起來有點老但安防行業(yè)現(xiàn)狀就是這樣很多客戶的辦公電腦還停留在老瀏覽器。插件安裝包一般由設備廠商提供安裝完成后在瀏覽器“管理加載項”里能看到對應控件說明插件環(huán)境已經(jīng)就緒。還需要準備一臺可聯(lián)網(wǎng)的大華IPC或NVR錄像機設備要提前做好網(wǎng)絡設置讓電腦和設備處于同一局域網(wǎng)。IPC默認IP通常各不相同如果和設備不是同一個網(wǎng)段需要通過大華ConfigTool或設備本地操作先把IP改到同網(wǎng)段否則后面根本連不上。3.2 網(wǎng)頁端關鍵代碼示例這里給出一個簡化版的HTML驗證頁只保留核心調(diào)用邏輯。實際項目中會有更多的異常處理和業(yè)務封裝但骨架是通用的。!DOCTYPE html html head meta http-equivX-UA-Compatible contentIEedge,chrome1 title大華視頻播放Demo/title /head body div idplayerDiv stylewidth: 640px; height: 360px;/div object iddhPlugin styledisplay:none; typeapplication/x-dahua-web-plugin/object script // 1.初始化插件 function initPlugin() { var plugin document.getElementById(dhPlugin); if (!plugin) { alert(插件加載失敗請檢查安裝狀態(tài)); return; } plugin.Init(); } // 2.登錄設備 function loginDevice() { var plugin document.getElementById(dhPlugin); var session plugin.Login( 192.168.1.108, // 設備IP 37777, // 端口號 admin, // 賬號 your_password, // 密碼 0, // 是否加密通道默認0 30000 // 超時毫秒 ); if (session 0) { alert(登錄失敗錯誤碼 session); return null; } return session; } // 3.實時預覽 function startPlay() { var plugin document.getElementById(dhPlugin); var session loginDevice(); if (session null) return; // 頻道ID從1開始subtype0主碼流1子碼流 var ret plugin.Play(session, 1, 0, 0, 0, ); if (ret ! 0) { alert(播放失敗錯誤碼 ret); } } // 4.抓圖 function capture() { var plugin document.getElementById(dhPlugin); plugin.Capture(D:/capture/test.jpg, 1, 0); } /script button onclickinitPlugin()初始化插件/button button onclickstartPlay()開始預覽/button button onclickcapture()抓圖/button /body /html這段代碼里的對象名和方法名不同SDK版本可能有差異但整體調(diào)用流程是通用的。我建議拿到官方SDK后先把這個骨架跑通再基于它做業(yè)務擴展。有個容易忽略的點多個通道同時預覽時要給每個播放窗口都創(chuàng)建獨立的插件實例并在切換頁面時主動停止釋放否則瀏覽器內(nèi)存持續(xù)飆升頁面會越來越卡。3.3 IPC、NVR、平臺三種接入方式對比這個部分是我在多個項目里踩過坑之后才真正理解清楚的。很多人覺得“反正都是大華接口一樣就行”其實接入對象不同細節(jié)差異很大。接入對象通道號規(guī)則典型注意點IPC固定為1通道直接填1部分槍機只有主碼流NVR1~N通道通道號對應接入的攝像頭序號平臺按平臺資源ID登錄用戶需有對應通道權限我在一次交付中把NVR當成了單IPC來處理登錄后所有通道只顯示第一個畫面排查了一整天才發(fā)現(xiàn)是通道號分配邏輯錯了。NVR的通道號是攝像頭接入時分配的邏輯序號不是設備的物理編號。這個經(jīng)驗貼在墻上都不為過先確認你面對的接入對象再去填通道號。4. 常見問題與排查技巧實錄4.1 插件下載失敗或安裝后依然無法調(diào)用這個問題的概率在我經(jīng)手的項目中占了三分之一。大華攝像頭進入后臺時頁面會自動跳轉(zhuǎn)到插件下載但下載失敗非常常見。原因主要有三種一是瀏覽器安全級別太高阻止了ActiveX下載二是電腦上裝了多個安全軟件攔截了控件注冊表寫入三是安裝時沒有用管理員權限。最直接的繞過方案是從官網(wǎng)單獨下載完整插件安裝包用管理員身份運行。裝完之后不要立刻刷新頁面徹底關閉瀏覽器再重新打開一次。Windows系統(tǒng)下部分環(huán)境還需要在Internet選項里把設備IP加入“受信任的站點”并將“ActiveX控件和插件”相關項設置為“啟用”。4.2 瀏覽器老是“白屏”或者“連不上”排查思路分兩步走。第一步先確認網(wǎng)絡是否通命令行里ping設備IP再試telnet ip 37777看端口是否能訪問。第二步再檢查插件環(huán)境。很多頁面白屏不是設備的問題而是插件沒加載成功console里會報出“對象未定義”之類的錯誤。如果上面兩步都正常還是不行就看看設備當前的路由和電腦是否同一網(wǎng)段。大華攝像頭在出廠狀態(tài)下IP可能是隨機網(wǎng)段不改IP直接用的話你很有可能連不上。改IP的常規(guī)方法是使用大華ConfigTool搜索設備選中設備后批量修改IP、子網(wǎng)掩碼和網(wǎng)關。有些老設備不支持軟件改IP則要通過顯示器進設備后臺在“網(wǎng)絡設置-TCP/IP”里手動配置。改完一定要記住新IP和密碼補丁一樣的坑現(xiàn)場最常見。4.3 不同品牌設備與平臺互通的“野路子”項目做多了就會遇到跨平臺改造比如一個停車場項目原本用?？档臄z像頭要接入大華的NVR或平臺。這種情況單純靠視頻播放插件是搞不定的需要走GB28181國標協(xié)議在?？翟O備側(cè)開啟GB28181注冊填上大華平臺的SIP服務器IP、端口和設備編碼設備主動注冊到大華平臺。注冊成功之后大華側(cè)的插件就可以像調(diào)用本地設備一樣去預覽?？档漠嬅媪?。實際效果和帶寬關系很大GB28181接入后的碼流延遲通常比原生SDK高一些所以不建議在延遲敏感的指揮中心場景里用這個方案。如果一定要用優(yōu)先保證主碼流不上國標只在調(diào)閱預覽時切子碼流響應會快不少。4.4 大華NVR智能檢索怎么用順帶說一個被問得特別多的“大華錄像機智能檢索怎么用”問題?，F(xiàn)在的新款大華NVR支持人和車目標檢索不需要翻錄像逐幀盯屏。操作路徑是在錄像回放的界面切到“智能檢索/目標檢測”選擇類型人、機動車、非機動車框選檢索區(qū)域再設定時間范圍。檢索結果會以目標縮略圖的方式呈現(xiàn)點擊某張圖可以直接跳到對應的錄像片段。這個功能對demo的意義在于它告訴甲方“你關心的業(yè)務不只是看視頻還能有更高維度的事件搜索”交互效果好很多。不過智能檢索依賴NVR本身啟用了智能分析部分型號還需要額外開啟智能方案在改造項目里要提前確認設備支持能力。5. 項目落地過程中的幾點心血總結這套大華視頻播放插件及demo做完之后我最大的感受是不要只看官方demo能跑通就完事了業(yè)務層的封裝和兼容性處理才真正決定交付是否順利。我推薦把插件調(diào)用統(tǒng)一封裝成一個“播放服務”對外暴露openPreview、openPlayback、capture、ptzControl這樣的方法內(nèi)部再根據(jù)IPC/NVR/平臺類型做適配。這樣就算后面換了設備品牌渲染層只需要改服務內(nèi)部邏輯業(yè)務頁面完全不動。還有一點是版本管理一定要做好。安防設備的SDK更新頻繁插件版本和設備固件版本存在強綁定。我遇到過一個現(xiàn)場插件的舊版本代碼在新固件設備上無法取流最終換了SDK版本才解決。所以拿到新設備時第一件事看固件版本第二件事核對官方文檔和支持矩陣第三件事在測試環(huán)境驗證兼容性后再上生產(chǎn)。最后分享一個小技巧在所有前端頁面里預留一個“環(huán)境自檢”按鈕。點擊之后自動檢測插件版本、注冊狀態(tài)、網(wǎng)絡連通性并輸出對應的診斷碼。這個功能在遠程支持時特別管用用戶把診斷碼發(fā)過來中間環(huán)節(jié)一兩句話就能定位問題省下了大量兩邊扯皮的時間。本文還有配套的精品資源點擊獲取