EasyNVR网页摄像机直播方案H5前端构建之:区分页面是自跳转还是分享依据
背景分析
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前端构建之:区分页面是自跳转还是分享依据相关推荐
- EasyNVR网页摄像机直播方案H5前端构建之:如何区分PC端和移动端
背景分析 随着互联网基础设施建设的不断完善和发展,带宽的不断提速,尤其是光纤入户,4G/5G/NB-IoT各种网络技术的大规模商用,视频随时随地可看.可控的诉求越来越多,尤其是移动应用技术和前端技术的 ...
- EasyNVR网页摄像机直播方案H5前端构建之:如何播放HLS
背景描述 HLS (HTTP Live Streaming)是Apple的动态码率自适应技术,主要用于PC和Apple终端的音视频服务,包括一个m3u(8)的索引文件,TS媒体分片文件和key加密串文 ...
- EasyNVR摄像机网页无插件直播方案H5前端构建之:bootstrap弹窗功能的实现方案与代码
前言介绍 在web前端的网页设计中,为了展示出简洁的网页风格和美观的效果,往往会使用弹窗效果在EasyNVR前端页面录像检索功能时,必然会播放录像,如果单独为播放录像文件排一个界面,用户在使用上会更加 ...
- EasyNVR摄像机网页无插件直播方案H5前端构建之:关于接口调用常见的一些问题(401 Unauthorized)...
背景分析 最近在使用EasyNVR的过程中,很多小伙伴咨询关于接口调用的问题,初步判断应该是遇到权限问题(401 Unauthorized).EasyNVR为第三方系统和应用提供了标准的API接口,方 ...
- EasyNVR摄像机网页无插件直播方案H5前端构建之:使用BootstrapPagination以分页形式展示数据信息...
背景介绍 EasyNVR核心在于摄像机的音视频流的获取.转换.转码与高性能分发,同时同步完成对实时直播流的录像存储,在客户端(PC浏览器.Android.iOS.微信)进行录像文件的检索.回放和下载. ...
- EasyNVR摄像机网页无插件直播方案H5前端构建之:使用BootstrapPagination以分页形式展示数据信息
背景介绍 EasyNVR核心在于摄像机的音视频流的获取.转换.转码与高性能分发,同时同步完成对实时直播流的录像存储,在客户端(PC浏览器.Android.iOS.微信)进行录像文件的检索.回放和下载. ...
- EasyNVR无插件IPC摄像机直播方案前端构建之:区分页面是自跳转还是分享依据
区分分享还是跳转 对于前端一些页面的展示,通常有两种方式:通过入口链接一步步进入,或是通过分享链接直接进入:对于这两种方式的区别是什么?在进行前端书写时又应该如何处理? 以EasyNVR为例来进行说明 ...
- EasyNVR网页摄像机无插件H5、谷歌Chrome直播方案使用详情功能-视频录像功能说明...
EasyNVR网页摄像机无插件直播不仅可以实现无插件H5直播,同时还拥有录像与管理功能,具体表现为: 支持EasyNVR本地磁盘录像.检索.回放: EasyNVR自身提供录像功能,可以进行对应通道的录 ...
- EasyNVR网页摄像机无插件H5、谷歌Chrome直播方案使用详情功能-通道配置Excel导入导出
使用EasyNVR的用户都有知道,由于EasyNVR是将设备与EasyNVR的通道进行绑定的,因此EasyNVR是通过手动的通道配置来进行设备接入的,这样可以做到将设备的和通道对应的接入.但是,如果手 ...
最新文章
- poj 3255 Roadblocks (SPFA)
- Java常用类之【日期相关类】
- Java使用Apache CXF开发Web Service
- [html] 请使用canvas画一个椭圆
- shell正则表达式截取字符串_从CVE20208816聊聊shell参数扩展
- iOS学习笔记总结整理
- Protus 8.6 及以上如何找到library文件夹
- 外汇交易的主服务器中心,常见外汇交易商服务器ip地址汇总【转载】
- 波形垫片弹性系数计算_波形弹簧的特点介绍
- 帧动画和骨骼动画 本质的理解
- 利用电脑玩android版天天连萌刷高分 二,利用计算机玩Android版“天天连萌”刷高分(二)——图像识别...
- python的十句名言_让人恍然大悟的十句名言(双语版)
- google地图标记
- 标准化考场时钟系统方案
- 微信开发踩坑之旅 之 开发准备及服务器配置
- 左神算法中级班第三课[C++代码]
- kindeditor 自定义上传图片
- logback-spring.xml配置详解
- 电子技术——反馈对放大器极点的影响
- RH442-7 调度域和CPU集之一