背景需求
很多用戶都在使用了EasyNVR，看到EasyNVR自身帶有的界面後有這樣的需求，就是需要更改一下web前端的一些樣式，當前EasyhNVR爲3.0版本，web前端爲了增加前端的運行效率和減小項目體積，使用的vue+webpack進行打包。這樣給那些自身需要更改樣式的用戶自身更改就增加了難度。
咱們的EasyNVR的前端其實 也就是一個調用我們流媒體軟件接口的demo，爲了方便更改，我們也會提供2.7web頁面來方便客戶的參考接口的調用和自身按需的進行web界面的設置。
如何將2.7版本的前端界面配3.0版本的EasyNVR使用起來？
針對這個問題我們首先需要搞清楚EasyNVR的軟件包裏面的目錄結構。
我們需要瞭解到的軟件包根目錄下的www文件夾就是我web對外輸出的界面的存放的地方，我們的前端源代碼都在該目錄下（EasyNVR3.0版本該目錄下存放的爲webpack壓縮後的文件）。因此我們只是需要將我們的2.7版本的軟件包的前端界面替換到該目錄下就可以。
直接替換會發現，直接進入web端直接訪問會發現，無法顯示頁面。按F12查看瀏覽器報錯會發現是前端頁面的樣式引用的問題。
會發現頁面會出現錯亂樣式等問題
這個是由於前端web頁面的加載引用文件路徑出現錯誤導致的，只要修改對於的文件的路徑就會成功規避掉這個問題；
在我們 成功解決掉樣式問題的時候，又會發現出現了新的問題。
問題再解析：
從瀏覽器友好的報錯可以看出，這個是接口調用的不成功。基於我們對於EasyNVR的瞭解，我們默認的HTTP端口是10800。由於我們 使用的 是http-server啓動的web頁面，而我們的起的 服務的默認端口是8080。這就和我們的調用接口的10800端口產生了衝突。因此我們需要注意的是在web前端代碼中調用接口的地方
對於web端來說，樣式完整的展示和接口的成功調用就已經完成
這樣有需要的小夥伴，又可以基於通俗易懂的html、js來進行自定義的頁面修改了。
本文只是說明EasyNVR3.0版本的軟件兼容2.7版本頁面的通用方式。具體操作細節中遇到的問題，着手於接口的調用和樣式的修改，應該都不會又太大的問題。
關於EasyNVR
EasyNVR能夠通過簡單的網絡攝像機通道配置，將傳統監控行業裏面的高清網絡攝像機IP Camera、NVR等具有RTSP協議輸出的設備接入到EasyNVR，EasyNVR能夠將這些視頻源的音視頻數據進行拉取，轉換爲RTMP/HLS，進行全平臺終端H5直播（Web、Android、iOS），並且EasyNVR能夠將視頻源的直播數據對接到第三方CDN網絡，實現互聯網級別的直播分發；
點擊鏈接加入羣【EasyNVR解決方案】：383501345
Copyright © EasyNVR.com 2016-2018
