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