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的触发事件的使用. 而这篇博客主要想说明一下如何实时的判断出表单是否发生变化. 问题表述: 在网页前端的开发过程中 ...
随机推荐
- AC日记——封锁阳光大学 洛谷 P1330
封锁阳光大学 思路: bfs染色: 如果当前点能通往已染色的点则不能完成: 图不一定联通: 来,上代码: #include <queue> #include <cstdio> ...
- (5)ASP.NET HttpResponse 类
HttpResponse 类用来封装来自 ASP.NET 操作的 HTTP 响应信息 https://msdn.microsoft.com/zh-cn/library/system.web.httpr ...
- httpd安装和配置(cgi、wsgi)
参考:http://webpy.org/cookbook/mod_wsgi-apache.zh-cn 一.yum方式安装: 1.yum install httpd 输入y后继续. 2.看到一下类似的返 ...
- 洛谷—— P2884 [USACO07MAR]每月的费用Monthly Expense
https://www.luogu.org/problemnew/show/P2884 题目描述 Farmer John is an astounding accounting wizard and ...
- facebook architecture 2 【转】
At the scale that Facebook operates, a lot of traditional approaches to serving web content breaks d ...
- 模型搭建练习1_用numpy和tensor、variable实现前后向传播、实现激活函数
用numpy实现搭建一个简单的forward和backward import numpy as np N, D_in, H, D_out = 64, 1000, 100, 10 x = np.rand ...
- 给力Mac下的思维整理软件,思维导图软件合辑
给力Mac下的思维整理软件,思维导图软件合辑 1.Mindjet MindManager for mac 10.0.211 经典的头脑风暴思维导图软件 最新破解Mindjet MindManager ...
- redis参数配置
redis.conf配置文件 配置项 值 说明 slave-read-only yes slave是否只读 slave-serve-stale-data yes 当slave与master断开连接,s ...
- android ANR产生原因和解决的方法
ANR (Application Not Responding) ANR定义:在Android上,假设你的应用程序有一段时间响应不够灵敏,系统会向用户显示一个对话框.这个对话框称作应用程序无响应(AN ...
- Vue2.0 引用 exif.js 实现调用摄像头进行拍照功能以及图片上传功能
vue组件代码 <template> <div> <div style="padding:20px;"> <div class=" ...