背景分析

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

在保证EasyNVR和前端设备之间网络相通的基础条件下,EasyNVR通过获取数字网络摄像机视频流完成音视频的采集,然后由EasyNVR内部实现流媒体协议转换、转码和流媒体分发工作,最终可以分发出RTMP、HTTP-FLV和HLS流,EasyNVR自身也可以对实时视频流进行存储和管理,同时EasyNVR自身也会提供一套可供各种平台、开发语言进行二次开发的HTTP接口,这样可以更加方便地与客户的业务系统相结合,达到更加丰富的管理功能。加上自身拥有简洁、大方的前端界面,EasyNVR完全可以作为一个独立的视频直播平台部署使用。

区分分享和跳转

对于前端页面的展示,通常有两种方式:通过入口链接一步步进入,或是通过分享链接直接进入;这两种方式的区别是什么?在进行前端书写时又应该如何处理?

以EasyNVR为例来进行以下分析说明:

EasyNVR通过视频广场界面可以进入到对应的通道内进行视频的观看;

为了给用户更好的使用体验,播放页面还设有视频分享功能,方便用户通过移动设备随时观看视频信息;

具体的跳转播放和分享播放区别:

  • 从视频广场直接跳转过来:

在视频广场界面通过点击事件来跳转到播放路径,进入对应的通道来进行视频播放;在跳转路径前会对获取到的信息进行处理;将获取到的信息存入cookie;

 $.cookie("videoUrl", videoUrl);
$.cookie("DeviceType", DeviceType);
$.cookie("videoImg", $img.attr("src"));
$.cookie("channel", channel["Channel"]);
$.cookie("channelName", channel["Name"]);
top.location.href = "./play.html?channel=" + channel["Channel"];
  • 通过链接分享页面:

对于播放页面就可通过cookie来判断页面是跳转过来还是分享过来的;

if (channel == $.cookie("channel")) {
if ($.cookie("DeviceType") == 'ONVIF') {
if(isPC()){
$("#ipcam_div").show();
}
}
player = setupPlayer($.cookie("videoUrl"), $.cookie("videoImg"));
$(".channel-title").text($.cookie("channelName") || "通道直播");
} else {
$.ajax({
type: "GET",
url: "/api/v1/getchannelstream",
data: {
Channel: channel,
Protocol: isPC() ? "RTMP" : "HLS",
Line: "local",
From: "lan"
  • 如果没有cookie值则是分享页面,会通过ajax重新去请求数据在页面进行调用;

EasyNVR应用场景

EasyNVR可以说已经成为国内视频互联网化基础建设的排头兵,几乎各个民生行业都已经有了EasyNVR视频能力输出的身影,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前端构建之:区分页面是自跳转页面还是分享页面的更多相关文章

  1. EasyNVR摄像机网页无插件直播方案H5前端构建之:bootstrap-datepicker日历插件的实时动态展现

    EasyNVR场景需求 基础:不管是城市监控还是园区管理或者是幼儿园监控,这些安防监控需求已经成为我们生活中不可或缺的重要一环,这不仅仅是提升城市管理水平和人民群众安全感的现实需求,也是完善社会治安消 ...

  2. EasyNVR摄像机网页无插件直播方案H5前端构建之:接口调用获取实时信息

    背景分析 熟悉EasyNVR产品的小伙伴应该知道,EasyNVR主要针对的是安防类的项目,通过RTSP/onvif协议将前端高清网络摄像机IPC.NVR等接入进来,然后将设备端的音视频通过采集.转换, ...

  3. EasyNVR摄像机网页无插件直播方案H5前端构建之:bootstrap弹窗功能的实现方案与代码

    前言介绍 在web前端的网页设计中,为了展示出简洁的网页风格和美观的效果,往往会使用弹窗效果在EasyNVR前端页面录像检索功能时,必然会播放录像,如果单独为播放录像文件排一个界面,用户在使用上会更加 ...

  4. EasyNVR摄像机网页无插件直播方案H5前端构建之:通道内部搜索功能的实现方案与代码

    EasyNVR网页摄像机直播方案 EasyNVR是一款拥有完整.自主.可控知识产权,同时又能够具备软硬一体功能的安防互联网化流媒体服务器,能够通过简单的网络摄像机通道配置,将传统监控行业里面的高清网络 ...

  5. EasyNVR摄像机网页无插件直播方案H5前端构建之:关于接口调用常见的一些问题(401 Unauthorized)

    背景分析 最近在使用EasyNVR的过程中,很多小伙伴咨询关于接口调用的问题,初步判断应该是遇到权限问题(401 Unauthorized).EasyNVR为第三方系统和应用提供了标准的API接口,方 ...

  6. EasyNVR摄像机网页无插件直播方案H5前端构建之:使用BootstrapPagination以分页形式展示数据信息

    背景介绍 EasyNVR核心在于摄像机的音视频流的获取.转换.转码与高性能分发,同时同步完成对实时直播流的录像存储,在客户端(PC浏览器.Android.iOS.微信)进行录像文件的检索.回放和下载. ...

  7. EasyNVR摄像机网页无插件直播方案H5前端构建之:如何播放HLS(m3u8)直播流

    背景描述 HLS (HTTP Live Streaming)是Apple的动态码率自适应技术,主要用于PC和Apple终端的音视频服务,包括一个m3u(8)的索引文件,TS媒体分片文件和key加密串文 ...

  8. EasyNVR摄像机网页无插件直播方案H5前端构建之:如何区分PC端和移动端

    背景分析 随着互联网基础设施建设的不断完善和发展,带宽的不断提速,尤其是光纤入户,4G/5G/NB-IoT各种网络技术的大规模商用,视频随时随地可看.可控的诉求越来越多,尤其是移动应用技术和前端技术的 ...

  9. 基于EasyNVR摄像机网页无插件直播服务二次开发实现H5播放页面的简单集成方案

    我们通常在构架一套视频SaaS应用的过程中,将平台设计为3层:视频硬件层(视频源).视频能力平台(vPaaS).视频应用平台(vSaaS),视频硬件包括各种IPC.NVR.编码器等视频生成设备,vPa ...

随机推荐

  1. BFS (1)算法模板 看是否需要分层 (2)拓扑排序——检测编译时的循环依赖 制定有依赖关系的任务的执行顺序 djkstra无非是将bfs模板中的deque修改为heapq

    BFS模板,记住这5个: (1)针对树的BFS 1.1 无需分层遍历 from collections import deque def levelOrderTree(root): if not ro ...

  2. pycharm连不上数据库:报警代码Connection to api@localhost failed. [08001] Could not create connection to d

    pycharm 换成2019之后连接数据库用户名密码数据库名字都没错,就是连接不上去,网上百度一下,试试将URL后面拼接 ?useSSL=false&serverTimezone=UTC 发现 ...

  3. Discuz! X3 数据字典

    pre_common_admincp_cmenu 后台菜单收藏表 字段名 数据类型 默认值 允许非空 自动递增 备注 id smallint(6) unsigned    NO 是   title v ...

  4. flutter 项目中,开发环境、多接口域名、多分支的配置

    flutter 项目中,开发环境.多接口域名.多分支的配置 开发环境:配置成多个入口文件.比如:main.dart.main_develop.dart.main_preview.dart 多域名:每个 ...

  5. 20180516模拟赛T3——bag

    题解 Cqz大佬在代码上的注释: 前i个物品,做成体积为j的东西,有多少种方案数 后i个物品,做成体积为j的东西,有多少种方案书(大佬打错了) 两个DP数组合并. 做不到? 其实就是把中间那段切断,然 ...

  6. git更换仓库,保留分支,保留提交记录及开发权限

    别人推荐的方法都很复杂,这个步骤自己亲自尝试过,非常简单好用. 1.从原地址克隆一份裸版本库,比如原本托管于 GitHub. git clone --bare https://github....(原 ...

  7. python 日期、时间、字符串相互转换(转载)

    原文链接:https://www.cnblogs.com/huhu-xiaomaomi/p/10338472.html 在python中,日期类型date和日期时间类型dateTime是不能比较的. ...

  8. WinDbg常用命令系列---!runaway

    简介 !runaway扩展显示有关每个线程使用的时间的信息. 使用形式 !runaway [Flags] 参数 Flags指定要显示的信息类型. 标志可以是以下位的任意组合. 默认值为 0x1.位 0 ...

  9. 使用grok exporter 做为log 与prometheus 的桥

    grok 是一个工具,可以用来解析非结构化的日志文件,可以使其结构化,同时方便查询,grok 被logstash 大量依赖 同时社区也提供了一个prometheus 的exporter 可以方便的进行 ...

  10. Ubuntu使用小结(主要为后面部署K8s集群做基础铺垫)

    包管理 dpkg -L libxml2 #查看libxml2安装了些什么文件 dpkg -s /usr/bin/ls      #查看ls是那个包提供的 dpkg -c abc.deb #查看abc. ...