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来进行自定义的页面修改了。

posted on 2021-11-01 17:37  EasyNVR  阅读(83)  评论(0编辑  收藏  举报