背景需求

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



EasyNVR互联网直播系统支持开放API，满足各类定制化开发需求，企业可以定制对接自己的APP，微信小程序等，实现丰富的应用能力。本文主要介绍通过接口将EasyNVR软件中通道配置的上传下载功能集成到自己的业务系统或平台中，方便用户更好的使用及管理设备通道信息。

解决方案

  • 这里基于web浏览器中vuejs、element-ui当前比较流行的框架来完成通道配置上传下载功能，互联网发展迅速我们建议您使用当前比较流行的技术，提高开发效率。效果如下：

实现案例

  • 使用到EasyNVR接口如下：

  • html文件内容
     javascript

    <!DOCTYPE html>

    <html lang="en">

    <head>

	<meta charset="UTF-8">

	<meta name="viewport" content="width=`, initial-scale=1.0">

	<meta http-equiv="X-UA-Compatible" content="ie=edge">

	<title>EasyNVR-demo</title>

	<!-- 引入element-ui样式CDN链接 -->

	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    </head>

    <style>

	#app{

			text-align: center;

			margin: auto;

	}

      </style>

      <body>

	<div id="app">

		<h2>EasyNVR-通道上传下载demo</h2>

		<!-- 导入element-ui上传组件 -->

		<el-upload class="upload-demo" drag :action=action multiple>

			<i class="el-icon-upload"></i>

			<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>

			<div class="el-upload__tip" slot="tip"></div>

		</el-upload>

		<!-- 下载按钮绑定一个下载方法 -->

		<el-button type="success" size="mini" @click="download">下载通道配文件</el-button>

	</div>

	<!-- 引入Vue样式CDN链接 -->

	<script src="https://cdn.bootcss.com/vue/2.6.6/vue.min.js"></script>

	<!-- 引入element-ui JS CDN链接 -->

	<script src="https://unpkg.com/element-ui/lib/index.js"></script>

	<script>

		//定义一个变量来存放服务端接口ip和端口地址

		var httpStr = "http://127.0.0.1:10800"

		// 定义一个Vue实例

		new Vue({

			el: '#app',

			data: {

				//绑定上传接口地址到element-ui上传组件中

				action: httpStr + "/api/v1/uploadxlsx"

			},

			methods: {

				//定义一个下载方法

				download() {

					//填入下载接口地址

					window.open(httpStr + "/api/v1/downloadxlsx");

				}

			},

		})

	</script>

    </body>

    </html>

案例地址:（https://github.com/EasyNVR/EasyNVR/blob/master/EasyNVR_apidemo/apidemo/easynvr%E4%B8%8B%E8%BD%BD%E4%B8%8A%E4%BC%A0.html）

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摄像机网页Chrome无插件视频播放功能二次开发之通道配置文件上传下载示例代码的更多相关文章

  1. 基于EasyNVR摄像机无插件直播方案二次开发实现自己的摄像机IPC-NVR无插件化直播解决方案

    背景介绍 在之前的博客中<基于EasyNVR实现RTSP/Onvif监控摄像头Web无插件化直播监控>,对EasyNVR所实现的功能我们已经有较多描述,这些也在方案地址:http://ww ...

  2. EasyNVR网页Chrome无插件播放摄像机视频功能二次开发之云台控制接口示例代码

    随着多媒体技术和网络通信技术的迅速发展,视频监控技术在电力系统.电信行业.工业监控.工地.城市交通.水利系统.社区安防等领域得到越来越广泛的应用.摄像头直播视频监控通过网络直接连接,可达到的世界任何角 ...

  3. EasyNVR网页Chrome无插件播放安防摄像机视频流是怎么做到web浏览器延时一秒内

    背景说明 由于互联网的飞速发展,传统安防摄像头的视频监控直播与互联网直播相结合是大势所趋.传统安防的直播大多在一个局域网内,在播放的客户端上也是有所限制,一般都需要OCX Web插件进行直播.对于安防 ...

  4. 基于EasyNVR摄像机网页无插件直播服务二次开发实现H5播放页面的简单集成方案

    我们通常在构架一套视频SaaS应用的过程中,将平台设计为3层:视频硬件层(视频源).视频能力平台(vPaaS).视频应用平台(vSaaS),视频硬件包括各种IPC.NVR.编码器等视频生成设备,vPa ...

  5. EasyNVR网页H5无插件播放摄像机视频功能二次开发之直播通道接口保活示例代码

    背景需求 随着雪亮工程.明厨亮灶.手机看店.智慧幼儿园监控等行业开始将传统的安防摄像头进行互联网.微信直播,我们知道摄像头直播的春天了.将安防摄像头或NVR上的视频流转成互联网直播常用的RTMP.HT ...

  6. EasyNVR摄像机网页H5全平台无插件直播流媒体播放服务二次开发之接口鉴权示例讲解

    背景需求 EasyNVR的使用者应该都清楚的了解到,EasyNVR一个强大的功能就是可以进行全平台的无插件直播.主要原因在于rtsp协议的视频流(默认是需要插件才可以播放的)经由EasyNVR处理可以 ...

  7. 基于EasyNVR二次开发实现自己的摄像机IPC/NVR无插件化直播解决方案

    在之前的博客中<基于EasyNVR实现RTSP/Onvif监控摄像头Web无插件化直播监控>,我们已经比较多的描述EasyNVR所实现的功能,这些也在方案地址:http://www.eas ...

  8. win7下Google谷歌浏览器上传下载卡死无响应

    问题背景:win7,谷歌浏览器上传选择图片之后,页面卡死无响应. 以前解决过类似问题就是input type="file"的accept属性当为通配符时,会出现这种情况,改为具体的 ...

  9. JQ插件ajaxFileUpload、php实现图片，数据同时上传

    代码结构如下: 1.HTML代码,没必要解释了. <!DOCTYPE html> <html> <head> <meta charset="UTF- ...

随机推荐

  1. AS项目报错 Error:java.util.concurrent.ExecutionException: com.android.tools.aapt2.Aapt2Exception: AAPT2 error: check logs for details

    1 修改gradle的缓存目录 这个可以通过android studio的设置中找到gradle,配置另一个非中文目录来缓存. File -> Settings -> Build, Exe ...

  2. 使用CEfSharp之旅（8）CEFSharp 使用代理 更换位置IP

    直接上代码: var settings = new CefSettings(); settings.CachePath = "cache"; settings.CefCommand ...

  3. 【Selenium-WebDriver实战篇】Java丨验证码图片去除干扰像素，方便验证码的识别（转）

    参考地址:https://www.cnblogs.com/haojieli/p/6212627.html 1.先来看看效果: 原图 除去干扰像素后 2.解析代码: 1).读取文件夹里面的图片 1 St ...

  4. Java 14 周作业

    题目:编写一个应用程序,输入一个目录和一个文件类型,显示该目录下符合该类型的所有文件.之后,将这些文件中的某一个文件剪切到另外一个目录中. 代码: package ccut.cn; import ja ...

  5. django-文件上传和下载--fastDFS安装和配置

    5.1 安装fastdfs依赖包 一:下载安装FDFS依赖: libfastcommon 下载地址:https://codeload.github.com/happyfish100/libfastco ...

  6. 使用mybatis框架实现带条件查询-多条件（传入Map集合）

    我们发现我们可以通过传入javaBean的方式实现我们的需求,但是就两个条件,思考:现在就给他传入一个实体类,对系统性能的开销是不是有点大了. 现在改用传入Map集合的方式: 奥!对了,在创建map集 ...

  7. 洛谷 P2897 【蚯蚓】 题解

    先分析一下题意: 这个题说的就是一开始给你很多条蚯蚓,然后给出你规定的次数,每一次都从蚯蚓里面拿出最长的来切成一条是原来q倍的,另一条是原来的(1 - q)倍,把切开的两条再放回去.规定次数完成之后, ...

  8. 2017.10.2 国庆清北 D2T1 (a*b)|x

    在电脑上后面仨点过不了,要用I64d,lld会炸.但是洛谷上要用lld,LINUX系统没有I64d /* 求一个数对满足 (a*b)|n,也就是求三个数 a*b*c=n,那么求1~n之间的,就是a*b ...

  9. 【luoguP2995】[USACO10NOV]牛的照片Cow Photographs

    题目链接 首先求出原序列的逆序对个数, 然后考虑每次将目标序列最前面的数放在最后,即最小的数变为最大 设最小数的位置是\(p\),那么逆序对的个数增加了\(n-p\),减少了\(p-1\) #incl ...

  10. Web前端社交账号注册按钮

    [外链图片转存失败(img-vXBQK5k4-1564155857781)(https://upload-images.jianshu.io/upload_images/11158618-ceccff ...