EasyNVR無外掛直播伺服器軟體如何自己更改web介面（網頁的自定修改）
背景需求
很多使用者都在使用了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
