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

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

image.png

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

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

image.png

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

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

image.png

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

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值