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