EasyNVR摄像机网页无插件直播方案H5前端构建之:接口调用获取实时信息
背景分析
熟悉EasyNVR产品的小伙伴应该知道,EasyNVR主要针对的是安防类的项目,通过RTSP/onvif协议将前端高清网络摄像机IPC、NVR等接入进来,然后将设备端的音视频通过采集、转换,输出RTMP、HLS、HTTP-Flv格式直播流,进行全平台无插件直播。

对于动态网站,要实时更新网站的信息,通过接口来获取实时信息是一个必不可少的部分。EasyNVR可以接入IPC等前端设备,必须要实时获取到对应的IPC实时信息进行展示。
本篇主要说明Ajax来获取数据
以EasyNVR通道接口进行说明:
- 操作: H5列表显示;
- 接口:/api/v1/getchannels
返回:
- 所有设备列表信息,在线&不在线 通道(包含快照信息)
- 通道名称、通道号、通道快照、通道是否在线
报文:
{
"EasyDarwin" : {
"Body" : {
"ChannelCount" : "2",
"Channels" : [
{
"Channel" : 1,
"Name" : "channel1",
"Online" : 1,
"SnapURL" : "/snap/1/2016-10-24/20161024125212.jpg"
},
{
"Channel" : 2,
"Name" : "channel2",
"Online" : 0,
"SnapURL" : ""
}
]
},
"Header" : {
"CSeq" : "1",
"ErrorNum" : "200",
"ErrorString" : "Success OK",
"MessageType" : "MSG_SC_SERVER_GET_CHANNELS_ACK",
"Version" : "1.0"
}
}
}
前端可以通过Ajax进行接口的访问以获取接口数据;首先观察返回数据的类型;符返回数据进行处理进行分析;将返回的数据以对象形式进行遍历展示;
- 返回数据形式:
{EasyDarwin: {…}}
EasyDarwin
:
Body
:
ChannelCount
:
"6"
Channels
:
Array(6)
0
:
{Channel: 1, Name: "黄山小镇", Online: 1, SnapURL: "/snap/1/channel_1.jpg"}
1
:
{Channel: 2, Name: "科学大道与黄山路交口", Online: 0, SnapURL: ""}
2
:
{Channel: 3, Name: "办公室ONVIF", Online: 0, SnapURL: ""}
3
:
{Channel: 4, Name: "办公室", Online: 0, SnapURL: ""}
4
:
{Channel: 5, Name: "留学生创业园", Online: 0, SnapURL: ""}
5
:
{Channel: 6, Name: "北一环与阜阳北路高架交口", Online: 1, SnapURL: "/snap/6/channel_6.jpg"}
length
:
6
__proto__
:
Array(0)
__proto__
:
Object
Header
:
{CSeq: "1", ErrorNum: "200", ErrorString: "Success OK", MessageType: "MSG_SC_SERVER_GET_CHANNELS_ACK", Version: "v1"}
__proto__
:
Object
__proto__
:
Object
下一篇主要说明对接收到数据进行处理来进行前端展示;
EasyNVR部署架构

单点内网
在局域网内部署EasyNVR系统,通过RTSP/Onvif协议采集音视频数据转成HLS/FLV格式的视频流,给内网的手机、电脑、电视墙来播放展示。该方案适合只需在企业内使用的客户,如企业内部监控。

单点公网
在局域网内部署EasyNVR系统,将EasyNVR的地址映射到公网,手机、电脑等客户端即可通过互联网访问EasyNVR所采集的视频。该方案适合需要在互联网访问,但是访问量不大的企业。

多点公网
在多个网点部署各部署单独EasyNVR系统,对接在公网部署的EasyNVS管理系统,实现对各网点的集中管理。该方案适合视频采集设备分散在不同局域网,需要统一管理和对外视频输出的项目

RTMP推流
在单位内部署EasyNVR系统,并转成RTMP,然后推送到CDN或第三方视频分发系统。该方案适合访问并发用户较大的项目。
EasyNVR应用场景
EasyNVR在互联网安防直播行业已有多年实战经验,通过各行业的市场检验已成为一套便捷、安全、覆盖范围广的成熟产品,结合硬件产品,服务于各行各业视频基础建设,同时提供二次开发接口便于企业集成到自己的业务系统中,打造专属于自己的互联网视频监控平台。


手机看家

航空监控

景区监控
关于EasyNVR
EasyNVR是一款拥有完整、自主、可控知识产权,同时又能够具备软硬一体功能的安防互联网化流媒体服务器,能够通过简单的网络摄像机通道配置,将传统监控行业里面的高清网络摄像机IP Camera、NVR等具有RTSP、Onvif协议输出的设备接入到EasyNVR,EasyNVR能够将这些视频源的音视频数据进行拉取,转换为RTMP/HLS,进行全平台终端H5直播(Web、Android、iOS),并且EasyNVR能够将视频源的直播数据对接到第三方CDN网络,实现互联网级别的直播分发。详情可访问EasyNVR官网:http://www.easynvr.com
EasyNVR摄像机网页无插件直播方案H5前端构建之:接口调用获取实时信息的更多相关文章
- EasyNVR摄像机网页无插件直播方案H5前端构建之:bootstrap-datepicker日历插件的实时动态展现
EasyNVR场景需求 基础:不管是城市监控还是园区管理或者是幼儿园监控,这些安防监控需求已经成为我们生活中不可或缺的重要一环,这不仅仅是提升城市管理水平和人民群众安全感的现实需求,也是完善社会治安消 ...
- EasyNVR摄像机网页无插件直播方案H5前端构建之:bootstrap弹窗功能的实现方案与代码
前言介绍 在web前端的网页设计中,为了展示出简洁的网页风格和美观的效果,往往会使用弹窗效果在EasyNVR前端页面录像检索功能时,必然会播放录像,如果单独为播放录像文件排一个界面,用户在使用上会更加 ...
- EasyNVR摄像机网页无插件直播方案H5前端构建之:通道内部搜索功能的实现方案与代码
EasyNVR网页摄像机直播方案 EasyNVR是一款拥有完整.自主.可控知识产权,同时又能够具备软硬一体功能的安防互联网化流媒体服务器,能够通过简单的网络摄像机通道配置,将传统监控行业里面的高清网络 ...
- EasyNVR摄像机网页无插件直播方案H5前端构建之:关于接口调用常见的一些问题(401 Unauthorized)
背景分析 最近在使用EasyNVR的过程中,很多小伙伴咨询关于接口调用的问题,初步判断应该是遇到权限问题(401 Unauthorized).EasyNVR为第三方系统和应用提供了标准的API接口,方 ...
- EasyNVR摄像机网页无插件直播方案H5前端构建之:使用BootstrapPagination以分页形式展示数据信息
背景介绍 EasyNVR核心在于摄像机的音视频流的获取.转换.转码与高性能分发,同时同步完成对实时直播流的录像存储,在客户端(PC浏览器.Android.iOS.微信)进行录像文件的检索.回放和下载. ...
- EasyNVR摄像机网页无插件直播方案H5前端构建之:如何播放HLS(m3u8)直播流
背景描述 HLS (HTTP Live Streaming)是Apple的动态码率自适应技术,主要用于PC和Apple终端的音视频服务,包括一个m3u(8)的索引文件,TS媒体分片文件和key加密串文 ...
- EasyNVR摄像机网页无插件直播方案H5前端构建之:区分页面是自跳转页面还是分享页面
背景分析 EasyNVR整套方案的架构中,涉及到前端设备(摄像机IPC.硬盘录像机NVR.编码器等).流媒体服务端(EasyNVR).客户端终端设备(PC.浏览器.Android.iOS.微信). 在 ...
- EasyNVR摄像机网页无插件直播方案H5前端构建之:如何区分PC端和移动端
背景分析 随着互联网基础设施建设的不断完善和发展,带宽的不断提速,尤其是光纤入户,4G/5G/NB-IoT各种网络技术的大规模商用,视频随时随地可看.可控的诉求越来越多,尤其是移动应用技术和前端技术的 ...
- 基于EasyNVR摄像机网页无插件直播服务二次开发实现H5播放页面的简单集成方案
我们通常在构架一套视频SaaS应用的过程中,将平台设计为3层:视频硬件层(视频源).视频能力平台(vPaaS).视频应用平台(vSaaS),视频硬件包括各种IPC.NVR.编码器等视频生成设备,vPa ...
随机推荐
- 四川第十届省赛 A.Angel Beats bitset
四川第十届省赛 A.Angel Beats bitset 题目链接 题解参考:http://www.cnblogs.com/Aragaki/p/9142250.html 考虑用bitset来维护对于所 ...
- Beta冲刺阶段博客集合
Beta冲刺阶段博客集合 课程名称:软件工程1916|W(福州大学) 团队名称: 云打印 作业要求: 项目Beta冲刺(团队) 作业目标:作业集合 团队队员 队员学号 队员姓名 个人博客地址 备注 2 ...
- spring cloud 学习资料
spring cloud 学习资料 网址 拜托!面试请不要再问我Spring Cloud底层原理 https://mp.weixin.qq.com/s/ZH-3JK90mhnJPfdsYH2yDA
- 利用requests库访问360主页20次
一.安装 1.cmd进入命令行界面 2.直接输入 D:切换至D盘(python所在路径), 然后cd python下的scripts所在路径,切换至pip所在位置 3.pip install req ...
- IDEA 中 Git Commit message 编写
IDEA安装插件 Git Commit Template 1. HeaderHeader的部分只有一行,包括三个字段: type(必需), scope(可选), subject(必需) 对应到idea ...
- 学习:多字节编码(ANSI)和UNICODE编码的关系
Windows 既可以使用 Unicode 字符集又可以使用传统的字符集(如多字节编码)来实现对多种语言的支持,以适应国际市场的要求.与传统的字符集编码相比,Unicode 是世界通用的字符编码标准, ...
- JS函数基础
一.函数 1.函数是什么 具有特定功能的n条语句的封装体. 只有函数是可执行的,其它类型的数据是不可执行的. 函数也是对象. 2.为什么要用函数 提高代码复用 便于阅读和交流 3.如何定义函数 函数声 ...
- 单片机模块化程序: 单片机AT指令配置模块程序模板(非阻塞版)
拷贝这两个文件到自己的工程 测试1://单片机发送AT+RST\r\n 如果单片机串口接收到OK 或者ready 执行下一条 测试视频: https://qqqqqbucket.oss-cn-bei ...
- javascript使用H5新版媒体接口navigator.mediaDevices.getUserMedia,做扫描二维码,并识别内容
本文代码测试要求,最新的chrome浏览器(手机APP),并且要允许chrome拍照录像权限,必须要HTTPS协议,http不支持. 原理:调用摄像头,将摄像头返回的媒体流渲染到视频标签中,再通过ca ...
- 【CSP模拟赛】Freda的旗帜
题目描述 要开运动会了,Freda承担起了制作全校旗帜的工作.旗帜的制作方法是这样的:Freda一共有C种颜色的布条,每种布条都有无数个,你可以认为这些布条的长.宽.厚都相等,只有颜色可能不同.每个 ...