背景需求
很多使用者都在使用了EasyNVR，看到EasyNVR自身帶有的界面後有這樣的需求，就是需要更改一下web前端的一些樣式，目前EasyhNVR為3.0版本，web前端為了增加前端的運作效率和減小項目體積，使用的vue+webpack進行打包。這樣給那些自身需要更改樣式的使用者自身更改就增加了難度。咱們的EasyNVR的前端其實 也就是一個調用我們流媒體軟體接口的demo，為了友善更改，我們也會提供2.7web頁面來友善客戶的參考接口的調用和自身按需的進行web界面的設定。
EasyNVR無插件直播伺服器軟體如何自己更改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網絡，實作網際網路級别的直播分發；
詳細說明：http://www.easynvr.com
點選連結加入群【EasyNVR解決方案】：383501345
Copyright © EasyNVR.com 2016-2018