EasyNVR如何自己调用接口进行自定义页面修改？

Posted 2021-12-04 EasyNVR

随着越来越多的用户使用EasyNVR，大家对EasyNVR的功能性需求也不断提高，比如需要更改一下EasyNVR平台Web前端的一些样式。当前EasyNVR为5.0.0版本，Web前端为了增加前端的运行效率和减小项目体积，使用的是vue+webpack进行打包，这样为那些需要自定义更改样式的用户增加了难度。 
 

EasyNVR的前端其实是通过调用我们流媒体软件接口的demo来实现的界面，为了方便更改，用户可以自主编译前端进行前端修改。

那么如何将自己现有EasyNVR前端版本界面配合5.0.0版本的EasyNVR使用起来？针对这个问题我们首先需要弄清楚EasyNVR软件包里的目录结构。软件包根目录下的www文件夹是我Web对外输出的界面存放的地方，我们的前端源代码都在该目录下（EasyNVR5.0.0版本该目录下存放的为webpack压缩后的文件）。因此只需要将自己前端代码包的前端界面替换到该目录下就可以。

如果直接替换的话，直接进入Web端直接访问会发现EasyNVR无法显示页面。按F12查看浏览器报错发现是前端页面的样式引用问题。

这个是由于前端Web页面的加载引用文件路径出现错误导致，只要修改文件的路径就会成功规避掉这个问题，但是随之而来的又是另外一个问题。

从浏览器的报错可以看出，是接口调用不成功的问题。EasyNVR默认的HTTP端口是10800。由于我们使用的是http-server启动的Web页面，而起的服务默认端口是8080，这就和我们调用接口的10800端口产生了冲突。因此需要注意的是，在Web前端代码中调用接口的端口。

对于Web端来说，样式完整的展示和接口的成功调用就已经完成，经过此番调用，有需要的小伙伴可以基于通俗易懂的html、js来进行自定义的页面修改了。