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前端构建之:bootstrap-datepicker日历插件的实时动态展现
EasyNVR场景需求 基础:不管是城市监控还是园区管理或者是幼儿园监控,这些安防监控需求已经成为我们生活中不可或缺的重要一环,这不仅仅是提升城市管理水平和人民群众安全感的现实需求,也是完善社会治安消 ...
- EasyNVR摄像机网页无插件直播方案H5前端构建之:接口调用获取实时信息
背景分析 熟悉EasyNVR产品的小伙伴应该知道,EasyNVR主要针对的是安防类的项目,通过RTSP/onvif协议将前端高清网络摄像机IPC.NVR等接入进来,然后将设备端的音视频通过采集.转换, ...
- 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前端构建之:如何区分PC端和移动端
背景分析 随着互联网基础设施建设的不断完善和发展,带宽的不断提速,尤其是光纤入户,4G/5G/NB-IoT各种网络技术的大规模商用,视频随时随地可看.可控的诉求越来越多,尤其是移动应用技术和前端技术的 ...
- 基于EasyNVR摄像机网页无插件直播服务二次开发实现H5播放页面的简单集成方案
我们通常在构架一套视频SaaS应用的过程中,将平台设计为3层:视频硬件层(视频源).视频能力平台(vPaaS).视频应用平台(vSaaS),视频硬件包括各种IPC.NVR.编码器等视频生成设备,vPa ...
随机推荐
- 配置VScode c语言环境
vscode 提示 <sys/socket.h>找不到, 原来是不同平台上,头文件不一样. 参考:https://blog.csdn.net/qq_28581077/article/det ...
- js事件3-事件对象
对于每次点击一个事件,都会产生一个事件对象,这个事件对象中包含了这个事件的很多信息 我们来看看事件对象具体有哪些信息 Object.onclick=function(e){ ..... }其中的参数e ...
- git分布式版本控制系统的概述和安装
Git历史 同生活中的许多伟大赛事一样,Git诞生于一个极富纷争大举创新的年代.Linux内核开源项目有着为数众广的参与者.绝大多数的Linux内核维护工作都花在了提交补丁和保存归档的繁琐事务上(19 ...
- G6 学习资料
G6 学习资料 网址 G6 1.x API 文档 http://antvis.github.io/g6/doc/index.html 官方demo列表 https://github.com/antvi ...
- PL/SQL Developer 快捷键
前面我有分享了一个PLSQL美化规则,其实通过统一的美化SQL,把这里SQL写在Java代码里可以比较容易阅读代码,且保持良好得编码风格. 在工作中我们也经常使用PLSQL来写一SQL,有些常用的SQ ...
- wordpress调用指定tag的文章
前面的文章wordpress调用指定分类文章如何实现有网友回复要如何调用指定tag的文章,原理是类似的,有两种方法,随ytkah一起来看看 1.第一种 <?php $args=array( 't ...
- spring相关—AOP编程—切入点、连接点
1 切入点表达式 1.1 作用 通过表达式的方式定位一个或多个具体的连接点. 1.2 语法细节 ①切入点表达式的语法格式 execution([权限修饰符] [返回值类型] [简单类名/全类名] [方 ...
- Event 事件(最简单实用)
public partial class Form1 : Form { /// <summary> /// 定义事件 /// </summary> public event E ...
- Let Start
A free timing software with very small memory occupation. This tool is a pure green convenient off ...
- Mysql 索引详细解释
MySQL索引详解(优缺点,何时需要/不需要创建索引,索引及sql语句的优化) 一.什么是索引? 索引是对数据库表中的一列或多列值进行排序的一种结构,使用索引可以快速访问数据库表中的特定信息. 二. ...