• EasyNVR无插件IPC摄像机直播方案前端构建之:区分页面是自跳转还是分享依据


    区分分享还是跳转

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

    以EasyNVR为例来进行说明解释:

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

    EasyNVR视频广场

    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能够通过简单的网络摄像机通道配置,将传统监控行业里面的高清网络摄像机IP Camera、NVR等具有RTSP协议输出的设备接入到EasyNVR,EasyNVR能够将这些视频源的音视频数据进行拉取,转换为RTMP/HLS,进行全平台终端H5直播(Web、Android、iOS),并且EasyNVR能够将视频源的直播数据对接到第三方CDN网络,实现互联网级别的直播分发;

    详细说明:http://www.easydarwin.org/easynvr/

    获取更多信息

    邮件:support@easydarwin.org

    WEB:www.EasyDarwin.org

    Copyright © EasyDarwin.org 2012-2017

    EasyDarwin

  • 相关阅读:
    Git原理与命令大全
    【网络安全】加解密算法最详解
    陪你阅读《区块链:从数字货币到信用社会》序一
    Splunk初识
    红帽学习记录[RHCE] ISCSI远程块储存
    DNS 域名系统与邮件服务器
    红帽学习记录[RHCE] 防火墙与网络合作
    红帽学习笔记[RHCE]网络配置与路由转发
    红帽学习笔记[RHCE]OpenLDAP 服务端与客户端配置
    红帽学习笔记[RHCSA] 第二周
  • 原文地址:https://www.cnblogs.com/babosa/p/7468273.html
Copyright © 2020-2023  润新知