zoukankan      html  css  js  c++  java
  • EasyNVR摄像机网页Chrome无插件视频播放功能二次开发之通道配置文件上传下载示例代码

    背景需求

    熟悉EasyNVR产品的朋友们都知道,产品设计初期根据整个直播流程层级,我们将EasyNVR无插件直播系统划分为:硬件层、能力层、应用层,连接硬件与应用之间的桥梁,同时屏蔽各种厂家硬件的不同特性,为视频应用提供统一的视频能力和控制能力输出,极大方便用户的应用集成,解决硬件的兼容问题,是一整套完整的无插件直播和系统。可是,随着用户需求的增多,大批量设备和多现场设备进入后,我们在以上架构基础上增设EasyNVS能力层,布置在云端对多个EasyNVR现场进行统一运维和管理。结构如下:
    EasyNVS架构
    EasyNVR互联网直播系统支持开放API,满足各类定制化开发需求,企业可以定制对接自己的APP,微信小程序等,实现丰富的应用能力。本文主要介绍通过接口将EasyNVR软件中通道配置的上传下载功能集成到自己的业务系统或平台中,方便用户更好的使用及管理设备通道信息。

    解决方案

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

    实现案例

    • 使用到EasyNVR接口如下:
      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知识产权

  • 相关阅读:
    django 项目需要注意的一些点
    VUE之路
    Oracle 表格碎片的查看方法
    RHEL 6.x or 7.x 使用分区绑定ASM 磁盘的方法
    RMAN 修复主库 nologging 操作导致物理备库的坏块
    Oracle 数据库19c 回退降级到 11.2.0.4 方案
    如何评估oracle 数据库rman全备和增量备份大小
    在将Oracle GI和DB升级到19c或降级到以前的版本之前需要应用的补丁 (Doc ID 2668071.1)
    Oracle 数据库坏块处理
    opatch auto 安装11.2.0.4.20190115 PSU遇到 OUI-67133: Execution of PRE script failed,with returen value 1 报错
  • 原文地址:https://www.cnblogs.com/EasyNVR/p/10847340.html
Copyright © 2011-2022 走看看