EasyNVR无插件IPC摄像机直播方案前端构建之:区分页面是自跳转还是分享依据
区分分享还是跳转
对于前端一些页面的展示,通常有两种方式:通过入口链接一步步进入,或是通过分享链接直接进入;对于这两种方式的区别是什么?在进行前端书写时又应该如何处理?
以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能够通过简单的网络摄像机通道配置,将传统监控行业里面的高清网络摄像机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无插件IPC摄像机直播方案前端构建之:区分页面是自跳转还是分享依据的更多相关文章
- EasyNVR无插件IPC摄像机直播方案前端构建之:如何区分PC端和移动端
EasyNVR前端为了更好的用户体验,不仅仅设有PC客户端,还适应移动客户端: EasyNVR的客户端中PC端和移动端差异有很多.例如: 由于PC端.移动端自身硬件的差异,所需要展示的样式也会存在一定 ...
- EasyNVS摄像机公网全终端无插件网页摄像机直播管理服务运行出现“请求服务不存在或已停止”
背景分析 了解我们产品线的小伙伴都知道,EasyNVR产品主要用于互联网安防直播,通过EasyNVR拉取摄像机的RTSP视频流,客户端通过访问EasyNVR服务端就可以实现音视频流分发.在此情况下会出 ...
- EasyNVR网页H5无插件播放摄像机视频功能二次开发之直播通道接口保活示例代码
背景需求 随着雪亮工程.明厨亮灶.手机看店.智慧幼儿园监控等行业开始将传统的安防摄像头进行互联网.微信直播,我们知道摄像头直播的春天了.将安防摄像头或NVR上的视频流转成互联网直播常用的RTMP.HT ...
- EasyNVR无插件H5/HLS/m3u8直播解决方案中Windows系统服务启动错误问题的修复:EasyNVR_Service 服务因 函数不正确。 服务特定错误而停止。
最近在做某地市移动公司景观直播的项目时,遇到一个问题,当我们部署EasyNVR为系统服务后,居然出现了无法启动服务的现象,表面上看,提示是系统服务启动失败,实际通过查看windows 系统日志: 查找 ...
- EasyNVR无插件直播流媒体服务器云端集中管控的EasyNVS云管理平台安装使用文档
EasyNVS - EasyNVR云端集中管理服务 EasyNVS云管理平台是一套专门用于集中化管理EasyNVR 的解决方案. EasyNVR 采用主动注册的方式接入到 EasyNVS, 再由 Ea ...
- EasyNVR无插件直播服务器软件接口调用返回“Unauthorized”最简单的处理方式
背景需求 对于EasyNVR的受众群体十分的广泛,不仅仅有将EasyNVR作为视频直播平台直接使用的,更多的是使用EasyNVR的对应功能集成到自身系统.对于前者,只需要将软件的使用功能搞清楚即可,对 ...
- 使用EasyNVR无插件流媒体服务器接口和EasyPlayer.js播放器插件实现web网页H5播放无插件
1.背景需求 很多客户在使用EasyNVR无插件流媒体服务器时,不喜欢产品化的界面,有时可能满足不了日常观看使用的需求.因此软件提供丰富的HTTP接口,供第三方平台调用集成.但是有时客户这边可能没有专 ...
- EasyNVR摄像机网页无插件直播方案H5前端构建之:区分页面是自跳转页面还是分享页面
背景分析 EasyNVR整套方案的架构中,涉及到前端设备(摄像机IPC.硬盘录像机NVR.编码器等).流媒体服务端(EasyNVR).客户端终端设备(PC.浏览器.Android.iOS.微信). 在 ...
- EasyNVR无插件播放HLS/RTMP网页直播方案前端完善:监听表单变动
在上一篇博客中我们表述完了防止提交成功后多余操作提交的一个过程:其中的精髓在于ajax的触发事件的使用. 而这篇博客主要想说明一下如何实时的判断出表单是否发生变化. 问题表述: 在网页前端的开发过程中 ...
随机推荐
- 牛客网 牛客练习赛13 C.幸运数字Ⅲ-思维
C.幸运数字Ⅲ 链接:https://www.nowcoder.com/acm/contest/70/C来源:牛客网 这个题447和477是特殊的,其他的就没什么了. 代码: 1 #i ...
- MapReduce编程模型及其在Hadoop上的实现
转自:https://www.zybuluo.com/frank-shaw/note/206604 MapReduce基本过程 关于MapReduce中数据流的传输过程,下图是一个经典演示: 关于上 ...
- MariaDB半同步复制
1.主从复制原理 MySQL的二进制日志(binglog)会记录所有对数据库进行更改的操作,也就是说只要是会对数据库产生修改的操作都会被记录到二进制日志中去.记录二进制日志的主要目的有两方面:a.恢复 ...
- EasyMvc入门教程-高级控件说明(15)方位布局控件
现在很多管理后台都流行全屏切割的布局,大体结构如下图所示: 大家注意到没,整个布局是五个部分组成:“东西南北中”,EasyMvc对应的实现的代码为: @(Html.Q().Layout().TextC ...
- ZOJ - 3228 Searching the String (AC自己主动机)
Description Little jay really hates to deal with string. But moondy likes it very much, and she's so ...
- JDK8 下载地址 http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
JDK8 下载地址 http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 安装时最好在 ...
- JAVA Eclipse 创建android xml看不到预览怎么办
电机安卓图标,设置为更低的API版本即可
- 性能指标 - OEE
work center 是指 执行制造作业的资源, 可以是 一个人, 一组人, 一台自动机器, 一组自动机器, 一个半自动机器, 一组半自动机器, 或者是 一个区域组成的生产资源 基本参数 Time ...
- vscode Python Pylint(代码检测插件)
暑假刚开始想了解一下Python,使用vscode进行编写,根据vscode 的提示安装了一些不知道干啥的插件,编写过程中提示说 "Linter pylint is not install ...
- Controller跳转到外部链接
return new ModelAndView(new RedirectView("http://www.baidu.com")); 用了这个方法之后,方法的返回值也会变成mode ...