EasyNVR RTSP转RTMP-HLS流媒体服务器前端构建之:通过接口获取实时信息
对于动态网站,要实时更新网站的信息,通过接口来获取实时信息是一个必不可少的部分。EasyNVR可以接入IPC等前端设备,必须要实时获取到对应的IPC实时信息进行展示。
本篇主要说明Ajax来获取数据。
以EasyNVR通道接口进行说明:
操作: H5列表显示;
接口:/api/v1/getchannels
返回:
1. 所有设备列表信息,在线&不在线 通道(包含快照信息)
2. 通道名称、通道号、通道快照、通道是否在线
报文:
{
"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能够通过简单的网络摄像机通道配置,将传统监控行业里面的高清网络摄像机IP Camera、NVR等具有RTSP协议输出的设备接入到EasyNVR,EasyNVR能够将这些视频源的音视频数据进行拉取,转换为RTMP/HLS,进行全平台终端H5直播(Web、Android、iOS),并且EasyNVR能够将视频源的直播数据对接到第三方CDN网络,实现互联网级别的直播分发;
详细说明:http://www.easydarwin.org/easynvr/
获取更多信息
Copyright © EasyDarwin.org 2012-2017

EasyNVR RTSP转RTMP-HLS流媒体服务器前端构建之:通过接口获取实时信息的更多相关文章
- EasyNVR摄像机无插件直播流媒体服务器前端构建之输入框样式的调整
EasyNVR授权方式分为软件的授权和硬件授权两种方式,软件授权需要在软件输入永久邀请码可以激化永久授权 起初我们的界面设计是为了满足功能的需求就是 ,用户可以输入激活码提交,完成永久授权. 在实际的 ...
- EasyNVR RTSP转HLS(m3u8+ts)流媒体服务器前端构建之:bootstrap-datepicker日历插件的实时动态展现
EasyNVR中有对录像进行检索回放的功能,且先抛开录像的回放,为了更好的用户体验过.让用户方便快捷的找到对应通道对应日期的录像视频,是必须的功能. 基于上述的需求,为前端添加一个日历插件,在日历上展 ...
- EasyNVR RTSP转RTMP-HLS流媒体服务器前端构建之_关于接口调用常见的一些问题(401 Unauthorized)
在之前的博客<EasyNVR H5流媒体服务器方案架构设计之视频能力平台>中我们描述了EasyNVR的定位,作为一个能力平台来进行功能的输出: 也就是说,在通常情况下,我们将一套视频的应用 ...
- EasyNVR RTSP转RTMP-HLS流媒体服务器前端构建之:使用BootstrapPagination以分页形式展示数据信息
上一篇介绍通过接口来获取数据,本篇将介绍如何以分页形式展示出接口获取到的数据 获取到的数据往往会很多,为了追去页面的美观和方便用户的检索,需要进行分页的展示: EasyNVR可接如多通道,当我们的通道 ...
- EasyNVR RTSP转RTMP-HLS流媒体服务器前端构建之:bootstrap弹窗功能的实现
在web前端的网页设计中,为了展示出简洁的网页风格和美观的效果,往往就会使用弹窗效果 在EasyNVR前端页面录像检索功能时,必然会播放录像,如果单独为播放录像文件排一个界面,用户在使用上会更加繁琐, ...
- EasyNVR RTSP转RTMP-HLS流媒体服务器前端构建之:内部搜索功能的实现
上一篇介绍了处理接口获取的数据,本篇将介绍如何在接收到的数据中搜索出自己符合条件的数据: 为了页面的美观,我们往往会以分页的形式来进行数据的展示.但是,当需要展示出来的数据太多的时候,我们很难迅速的找 ...
- EasyNVR RTSP摄像机转HLS直播服务器中使用Onvif协议控制预置位
EasyNVR支持预置位控制,包括转到指定预置位,设置指定预置位,删除指定预置位 预置位在安防领域有较为普遍的应用,可以进行很多既定位置的跳转,很方便 之前我们说过如何用Onvif协议进行设备的发现, ...
- windows平台最简单的rtmp/hls流媒体服务器
feature: rtmp/hls live server for windows, double click to run,don't need config. run and quit: doub ...
- [SRS流媒体]RTMP/HLS 直播服务器simple-rtmp-server安装
一个采用MIT协议授权的国产的简单的RTMP/HLS 直播服务器,其核心的价值理念在于简单高效. 使用方法: tep 1: build srs tar xf simple-rtmp-server-*. ...
随机推荐
- 牛客网 牛客小白月赛1 I.あなたの蛙が帰っています-卡特兰数,组合数阶乘逆元快速幂
I.あなたの蛙が帰っています 链接:https://www.nowcoder.com/acm/contest/85/I来源:牛客网 这个题有点意思,是卡特兰数,自行百度就可以.卡特兰数用处 ...
- sprintf 心得
[string print format]sprintf指的是字符串格式化命令. [主要功能]是把格式化的数据写入某个字符串中. sprintf是个变参函数. 使用sprintf对于写入buffer的 ...
- 关于asp.netCore3.0区域和路由配置
在ASP.NET Core 3.0中路由配置和2.0不一样了 一.MVC 服务注册 ASP.NET Core 3.0 添加了用于注册内部的 MVC 方案的新选项Startup.ConfigureSer ...
- 全栈一路坑(4)——创建博客的API
上一篇博客:全站之路一路坑(3)——使用百度站长工具提交站点地图 这一篇要搭建一个API平台,一是为了给博客补充一些功能,二是为以后做APP提供数据接口. 首先需要安装Django REST Fram ...
- Linux中ping不通外网
在linux中ping www.baidu.com 无法ping通 需要修改vi /etc/resolv.conf 增加如下内容: nameserver 114.114.114.114 nameser ...
- redis参数配置
redis.conf配置文件 配置项 值 说明 slave-read-only yes slave是否只读 slave-serve-stale-data yes 当slave与master断开连接,s ...
- Zookeeper demo增删改查
Zookeeper 的增删改查demo代码 public class SimpleZkClient { private static final String connectString = &quo ...
- Predicate与filter
转: http://blog.csdn.net/michaellufhl/article/details/6329823 怎么根据某些条件来过滤Collection的元素?我们可以在循环里面判断元素是 ...
- WeakReference &&reference quene &&GC
在了解WeakReference之前,先给出一段简单的代码: public class WeakReferenceTest {public static void main(String[] args ...
- js传递默认形参
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...