专栏首页EasyNVREasyNVR如何自己更改web界面(网页的自定修改)

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版本页面的通用方式。具体操作细节中遇到的问题,着手于接口的调用和样式的修改,应该都不会又太大的问题。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • EasyNVR、EasyNVS如何更改前端logo、关键字等相关信息

    EasyNVR被越来越多的用户所接受使用,由于EasyNVR、EasyNVS自身拥有相对简洁、大方的页面样式,所以部分用户希望直接使用对应的前端web页面引用与...

    EasyNVR
  • 通过Java程序调用RTSP拉流协议视频平台EasyNVR程序接口步骤概览

    RTSP协议视频平台EasyNVR经过多年的积累,已经是一套成熟且完善的视频平台了,用户可以通过网页直接访问视频监控,也可以通过调用二次开发接口进行二次开发或者...

    EasyNVR
  • RTSP安防网络摄像头/海康大华硬盘录像机网页无插件直播流媒体服务器EasyNVR授权方式之加密机如何成功授权

    EasyNVR整套方案的架构中,涉及到前端设备(摄像机IPC、硬盘录像机NVR、编码器等)、流媒体服务端(EasyNVR)、客户端终端设备(PC、浏览器、And...

    EasyNVR
  • 我为什么要选前端这条路

    随意搜索一下“如何才能成为优秀的前端开发工程师”,就能发现前端要学的东西是不可估量的

    书童小二
  • 学好前端的 6 点建议

    最近接触了很多前端的小伙伴,和他们谈了很多职业发展的问题。他们大部分是做了一到三年的前端新手。

    Phodal
  • 前端大牛or架构师应该具备这些

    相信很多招聘要求上都会写明需要3-5年经验才可以达到架构师要求,并且针对其中一些必要的技术储备大家已经能够耳熟能详,那究竟为什么需要这么久时间,以及具体每项技能...

    RobinsonZhang
  • 我坚定的走前端技术路线的心态

    据我了解的前端从业者,有以下几种心态, 一,我就干着,有机会了就转产品经理、业务、管理; 二,走一步看一步吧,也不知道这行业能有多大发展; 三,这行火啊,钱多,...

    web前端教室
  • queue的使用

    gfu
  • 平安/智慧城市一键报警反恐综合解决方案

    近年来,国际恐怖活动猖獗,中国境内恐怖活动亦进入高发期。东突恐怖势力在国内不断制造暴恐事件。从地域上来看,暴恐事件由之前大多发生在新疆地区,有向内地...

    MEEYI美一
  • 5MB的神经网络也高效,Facebook新压缩算法造福嵌入式设备

    人工智能风暴袭来,机器人、自动驾驶汽车这样的嵌入式设备也热度渐长。毫无疑问,现在,嵌入式设备也需要高效的神经网络加持。

    量子位

扫码关注云+社区

领取腾讯云代金券