EasyNVR简介 EasyNVR能够通过简单的摄像机通道配置.存储配置.云平台对接配置.CDN配置等,将统监控行业里面的高清网络摄像机IP Camera.NVR.移动拍摄设备接入到EasyNVR,EasyNVR能够将这些视频源的音视频数据采集到设备端,进行全平台终端直播.录像存储.录像检索和录像回放.并且EasyNVR能够将视频源的直播数据对接到第三方视频平台.CDN网络,实现互联网直播分发. 功能使用介绍 对于有音频需求的可以通过勾选"保留参数1"来进行设置:默认没有音频,有需要,…

前言介绍 随着互联网的发展,尤其是移动互联网基于H5.微信的应用越来越多,企业也更多地想基于H5.微信公众号来快速开发和运营自己的产品,而传统的安防IPC所输出的各种RTSP.GB28181.SDK视频流,无法直接在web或者微信上进行无插件化的播放,此时就提出了一种安防设备互联网化的需求,基本要求是:无插件.纯web.全平台PC/Android/iOS.支持微信.支持分享! EasyNVR互联网直播方案 EasyNVR互联网直播系统完全解决了上述问题,实现了一个完整的.小而美的传统安防向互联网…

前言介绍 在web前端的网页设计中,为了展示出简洁的网页风格和美观的效果,往往会使用弹窗效果在EasyNVR前端页面录像检索功能时,必然会播放录像,如果单独为播放录像文件排一个界面,用户在使用上会更加繁琐,在外观上也不是很美观. 真的弹了个窗户出来了! 基于bootstrap可以来开发出弹窗效果图 Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 弹…

前言 随着互联网的发展,尤其是移动互联网,基于H5.微信的应用越来越多,企业也更多地想基于H5.微信公众号来快速开发和运营自己的产品,那么传统的安防IPC所输出的各种RTSP.GB28181.SDK视频流,都无法直接在web或者微信上进行无插件化的播放,那么,就产生了一种安防设备互联网化的需求,基本要求是:无插件.纯web.全平台PC/Android/iOS.支持微信.支持分享! EasyNVR互联网直播方案 EasyNVR就完全解决了上述各种问题,实现了一个完整的.小而美的传统安防向互联网迈进…

背景介绍 在之前的博客中<基于EasyNVR实现RTSP/Onvif监控摄像头Web无插件化直播监控>,对EasyNVR所实现的功能我们已经有较多描述,这些也在方案地址:http://www.easynvr.com/, 演示地址:http://demo.easynvr.com:10800/#/index/icons中可以直观地看到功能点和适用的场景,在此就不多说了: 本文主要介绍如何基于EasyNVR二次开发,实现自己的一套业务流程: 我们通常在构架一套视频SaaS应用的过程中,将平台设计为3…

在之前的博客中<基于EasyNVR实现RTSP/Onvif监控摄像头Web无插件化直播监控>,我们已经比较多的描述EasyNVR所实现的功能,这些也在方案地址:http://www.easydarwin.org/easynvr/, 演示地址:http://easynvr.easydarwin.org:10800/ 中可以直观地看到功能点和适用的场景,在此就不多说了: 我们主要介绍如何能够基于EasyNVR二次开发,实现自己的一套业务流程: 我们通常在构架一套视频SaaS应用的过程中,将平台设计…

想实现网络监控摄像头进行视频直播的朋友门应该知道,方法其实非常简单,你不需要使用支持直播的网络摄像机,只需要经过一套流媒体服务器将监控摄像头的RTSP视频流转为RTMP\HLS\HTTP-FLV视频流,然后将流地址在网页.微信.或者推流到主流免费的直播平台上,如YOUTUBE.斗鱼等.该方案适合所有网络摄像头,因为他们几乎都支持RTSP协议,你可以使用海康.大华等等厂家的设备,选择范围广,操作简单. 需求分析 对于使用EasyNVR和EasyDSS的用户来说都知道,我们的产品是使用rtsp流来进…

背景需求 熟悉EasyNVR产品的朋友们都知道,产品设计初期根据整个直播流程层级,我们将EasyNVR无插件直播系统划分为:硬件层.能力层.应用层,连接硬件与应用之间的桥梁,同时屏蔽各种厂家硬件的不同特性,为视频应用提供统一的视频能力和控制能力输出,极大方便用户的应用集成,解决硬件的兼容问题,是一整套完整的无插件直播和系统.可是,随着用户需求的增多,大批量设备和多现场设备进入后,我们在以上架构基础上增设EasyNVS能力层,布置在云端对多个EasyNVR现场进行统一运维和管理.结构如下: Eas…

背景描述 HLS (HTTP Live Streaming)是Apple的动态码率自适应技术,主要用于PC和Apple终端的音视频服务,包括一个m3u(8)的索引文件,TS媒体分片文件和key加密串文件.HTML5直接支持这个流地址,因此只要是支持H5的设备都可以解码播放. 问题概述 EasyNVR团队在进行多屏开发时,由于多屏功能不需要在手机端展示(pc端多播放为RTMP,手机端播放为HLS),因此只注意到了引用video.js来进行rtmp的播放.但实际使用中,由于项目需求不同,hls流的播…

背景需求 在互联网飞速发展的时代,开发者常会说的一个词就是"跨平台".自从移动端的用户需求越来越大,H5逐渐发展,跨平台似乎已经成为了软件开发不可或缺的技术.EasyNVR互联网直播系统无论是PC浏览器还是手机APP.手机浏览器.微信客户端,都可以无缝接入,摒弃浏览器插件这种受限的用户接入方式,轻量.友好地进行全部直播.录像.检索.回放等功能的对接,一套系统,全终端兼容! 在展示界面上,EasyNVR已简洁.轻便.清新的风格深受广大用户的喜欢,同时针对用户在使用过程中的需求,支持多通道…

前一段在维护EasyNVR客户的过程中遇到一个问题,在接入宇视NVR的时候,就是明明在vlc中能非常正常播放的视频流,却用EasyRTSPClient RTSP客户端拉流的协议交互过程中,PLAY命令之后,宇视的NVR却返回了500 Server Internal Error: 这个时候,不得不说我们的客户神通广大,还有宇视的技术支持给力,及时找出了问题,就是在流媒体交互的过程中,如果是实时流的话,PLAY命令中是不带Scale字段的,为啥在大部分的IPC和NVR都好好的,结果宇视的就这么矫情呢…

EasyNVR场景需求 基础:不管是城市监控还是园区管理或者是幼儿园监控,这些安防监控需求已经成为我们生活中不可或缺的重要一环,这不仅仅是提升城市管理水平和人民群众安全感的现实需求,也是完善社会治安消防的重要板块: 便捷:随着科技水平的提高,对于互联网服务,电脑不再是唯一选择,智能手机.平板电脑.特定的移动终端等都是可选择的用户终端硬件方式,因此,我们有理由要求我们的摄像机直播观看也能跟上潮流,可以做到随时随地看我想看: 完整:安防直播的需求必然会伴随着是否需要实时录像的存储,因此将实时的视频流…

背景分析 熟悉EasyNVR产品的小伙伴应该知道,EasyNVR主要针对的是安防类的项目,通过RTSP/onvif协议将前端高清网络摄像机IPC.NVR等接入进来,然后将设备端的音视频通过采集.转换,输出RTMP.HLS.HTTP-Flv格式直播流,进行全平台无插件直播. 对于动态网站,要实时更新网站的信息,通过接口来获取实时信息是一个必不可少的部分.EasyNVR可以接入IPC等前端设备,必须要实时获取到对应的IPC实时信息进行展示. 本篇主要说明Ajax来获取数据 以EasyNVR通道接口进…

系列背景 由于EasyNVR的受众越来越多,时长会遇到很对类似的问题咨询,之前虽然有写过很多的博文进行技术的或者使用问题的解答,随着客户询问的增多,我发现,要想然客户了解问题和解决问题,往往引导和给一个思路比直接给与支持和回答更有效果.因此在后续的博文中我将不间断的更新Easy系列相关问题的自我排查和解决思路和方法.帮助大家解决问题的同时更加了解软件. 问题:EasyNVR显示设备不在线怎么办? 问题分析: 首先,自我将这个问题剖析一下,设备显示不在线可能导致的原因, 从摄像机到软件显示大致分为…

背景需求 对于摄像机直播,客户反馈的最多就是实现web直播.摆脱插件,可以自定义集成等问题, 对于熟悉EasyNVR已经完美的解决了这些问题.然而对于web播放也存在一些问题,通常我们web播放RTMP流使用的是flash,在这个过程中就会出现一个问题,随着web一直播放直播时间的增加,视频直播的延时也会累积起来,延时也就越大. 问题分析 通过自我调研和客户反馈得出在ckplayer.videojs.aliplayer等播放器都会有类似问题,出现该问题的原因在于我们播放rtmp视频流的时候启用了…

背景分析 最近在使用EasyNVR的过程中,很多小伙伴咨询关于接口调用的问题,初步判断应该是遇到权限问题(401 Unauthorized).EasyNVR为第三方系统和应用提供了标准的API接口,方便对接二次开发为专属于自己企业的互联网直播平台.接口一般分为接口定义者和接口调用者,定义者可以规定接收参数的类型及返回形式,而接口定义者则只能完全按照接口定义者规定的参数进行访问.就叫是我们所说的webService(网络服务). 本篇博文将基于自身对EasyNVR接口的调用和一些用户的反馈的问题来…

背景介绍 EasyNVR核心在于摄像机的音视频流的获取.转换.转码与高性能分发,同时同步完成对实时直播流的录像存储,在客户端(PC浏览器.Android.iOS.微信)进行录像文件的检索.回放和下载. 在保证EasyNVR和前端设备之间网络相通的基础条件下,EasyNVR通过获取数字网络摄像机视频流完成音视频的采集,然后由EasyNVR内部实现流媒体协议转换.转码和流媒体分发工作,最终可以分发出RTMP.HTTP-FLV和HLS流,EasyNVR自身也可以对实时视频流进行存储和管理,同时Easy…

EasyNVR网页摄像机直播方案 EasyNVR是一款拥有完整.自主.可控知识产权,同时又能够具备软硬一体功能的安防互联网化流媒体服务器,能够通过简单的网络摄像机通道配置,将传统监控行业里面的高清网络摄像机IP Camera.NVR等具有RTSP.Onvif协议输出的设备接入到EasyNVR,EasyNVR能够将这些视频源的音视频数据进行拉取,转换为RTMP/HLS,进行全平台终端H5直播(Web.Android.iOS),并且EasyNVR能够将视频源的直播数据对接到第三方CDN网络,实现互联…

我们通常在构架一套视频SaaS应用的过程中,将平台设计为3层:视频硬件层(视频源).视频能力平台(vPaaS).视频应用平台(vSaaS),视频硬件包括各种IPC.NVR.编码器等视频生成设备,vPaaS视频能力平台部分主要就是对这些不同的硬件进行整合,输出统一接口.统一标准的视频流,vSaaS视频应用层主要就是对视频的增值服务了,这个是跑业务的部分.我们的EasyNVR产品着重点是立足于视频能力层,同时因其简洁的页面的形式,也可以独立作为产品使用,这就更加方便了应用层的使用. 案例描述 该业务…

关于直播页面和视频列表页面切换 为了给用户更好的用户体验,并且更好的让用户快速简洁的了解实时的视频直播信息.一般多会分为列表展示和实时的视频直播展示. 表面上只是两个视图之间的随意切换,其实切换的两个视图之间存在很大的差别. EasyNVR在列表快照展示界面并没有进行视频流的播放,展示多为视频的快照信息.是否在线等信息: 而在实时四分屏展示界面不仅会展示实时的通道名称,更要通过通道名称来获取实时的视频流来进行实时的播放. 因此在进行两个视图之间的切换的时候,不仅需要考虑外表视图的变化,更应该注意…

背景分析 EasyNVR整套方案的架构中,涉及到前端设备(摄像机IPC.硬盘录像机NVR.编码器等).流媒体服务端(EasyNVR).客户端终端设备(PC.浏览器.Android.iOS.微信). 在保证EasyNVR和前端设备之间网络相通的基础条件下,EasyNVR通过获取数字网络摄像机视频流完成音视频的采集,然后由EasyNVR内部实现流媒体协议转换.转码和流媒体分发工作,最终可以分发出RTMP.HTTP-FLV和HLS流,EasyNVR自身也可以对实时视频流进行存储和管理,同时EasyNV…

背景分析 随着互联网基础设施建设的不断完善和发展,带宽的不断提速,尤其是光纤入户,4G/5G/NB-IoT各种网络技术的大规模商用,视频随时随地可看.可控的诉求越来越多,尤其是移动应用技术和前端技术的普及和发展,PC.手机.微信各种终端的支持需求在各行各业越来越受到青睐和重视,强制性地要求用户只能使用IE系列浏览器.强制用户只能到设备内网才能看到监控的限制,已经越来越不符合商业规律,而在传统监控行业里面,互联网思维.架构和技术完全可以成功引入,尤其是在移动互联网.物联网方面的技术,完全能够满足新…

如何在播放器上加一个云台控制界面 问题: 对于实时直播的视频播放, 由于播放页面客观样式要求(一个播放器占据了整个页面),因此很难找出很合理的空间来放置其他功能按钮的位置(比如配合实时是平的云台控制界面): EasyNVR配置中设有ONVIF探测功能:因此需要在视频播放界面添加了云台控制界面来展示出该功能: 为了保持一个良好的用户体验,在保证不影响播放效果和播放界面的前提下,如何合理的添加云台控制界面成为一个问题. 解决: 由于页面整体的样式,在页面其他位置添加云台控制界面势必会影响整体样式美观…

完成运行效果图: 一.四分屏展示样式布局 1.通过html.css等来进行样式排版 根据需求的四分屏的样式:来合理的划分出四个大块,分别用于放置四个播放器: 以四等分结构为例进行前端的排版: html样式布局: <div class="row col-sm-9 video-show"> <div class="col-md-6 window1 video-window" alt="1"> </div> <…

关于videojs自动播放问题 播放流媒体多使用videojs来进行播放,videojs,本身自带自动播放属性: 通过添加autoplay(),来完成视频播放的自动加载: player = videojs("video", { autoplay: true, }); 在制作四分屏的时出现给videojs添加autoplay()后,在一些浏览器上并不能完成自动播放,videojs加载完成后视频播放呈现出暂停样式: 在其他浏览器上可以自动加载播放: 解决: videojs.options.…

初始化完成对videojs样式的调整 由于不同项目的需要,对于加载出来的videojs播放器样式也有不同的需求:我们需要自主的处理一下加载出来的videojs播放器的样式: 默认加载出来的会包含有暂停按钮.音量调节按钮.时间进度条.时间显示和全屏显示按钮等: 问题: 如果我们进行播放的视频是直播视频,时间进度条和时间显示在播放器样式上就显得有点多余:可以通过自主更改属性去除这些样式: 解决: 通过浏览器找到对应的属性名称,将对应属性的值通过CSS设置为隐藏属性: .vjs-progress-co…

video.js的基本使用方法 一.videojs的初始化加载 videojs初始化加载分为两中 1.标签式加载 在引入videojs加载文件的前提下,可以在video标签中添加属性值"data-setup='{}'",并且在class属性中添加"video-js";二者缺一不可: <video class="video-js vjs-default-skin" data-setup='{}'> "vjs-default-s…

本文来自于腾讯bugly开发者社区,原文地址:http://bugly.qq.com/bbs/forum.php?mod=viewthread&tid=1277 视频直播这么火,再不学就 out 了. 为了紧跟潮流,本文将向大家介绍一下视频直播中的基本流程和主要的技术点,包括但不限于前端技术. 1. H5 到底能不能做视频直播? 当然可以, H5 火了这么久,涵盖了各个方面的技术. 对于视频录制,可以使用强大的 webRTC(Web Real-Time Communication)是一个支持网页…

现在很多网站不仅是介绍,更多的是有一些功能,怎么样让客户快速的知道网站有哪些功能呢?这里pagewalkthrough.js插件能帮我们实现,它是一个轻量级的jQuery插件,它可以帮助我们创建一个遮罩引导层,实现页面功能引导功能,引导完成显示页面内容. 下载源码 html代码: <div id="walkthrough-content"> <div id="walkthrough-1"> <h3>欢迎来到网页引导示例DEMO演示…

新产品上线或是改版升级,我们会在用户第一次使用产品时建立一个使用向导,引导用户如何使用产品,如使用演示的方式逐一介绍界面上的功能模块,从而提升了用户体验和产品的亲和力. Helloweba.com之前也有相关文章介绍:<构建一个用于产品介绍的WEB应用>,相信对有需要的朋友有帮助.本文将介绍另一款基于jQuery的页面引导页插件:pagewalkthrough.js,来看如何使用它. 先点击这里可以看在线演示效果 HTML 首先记得加载所需的css文件和jQuery库文件,以及pagewalk…