1.背景需求

  • 很多客户在使用EasyNVR无插件流媒体服务器时，不喜欢产品化的界面，有时可能满足不了日常观看使用的需求。因此软件提供丰富的HTTP接口，供第三方平台调用集成。但是有时客户这边可能没有专业的团队进行二次开发，这样一来就无法使用软件提供这么优秀的环境，实属可惜。

2.解决方案

  • 这里可以通过很多种方法调取软件提供的接口，只要支持http协议都可以。这里我通过jQuery插件调取接口实现在web播放功能小案例,目的就是为了让客户对接口的初步了解并使用。

3.实现

  • 新建文件demo目录结构如下easy-player.swf和easy-player-element.min.js文件可以通过[https://www.npmjs.com/package/easy-player]获取，插件有详细使用文档。

  • 使用到软件的接口

  • index.html内容文件如下
<!DOCTYPE HTML>

<html>

    <head>

        <title>easy-player</title>

        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

        <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">

    </head>

<body>

	 <!-- 使用插件标签 -->

     <easy-player id="test2" live="true" aspect="300:100" show-custom-button="true"></easy-player>

     <button>获取播放链接并播放</button>

</body>

	<!-- 引入播放器插件文件 -->

	<script type="text/javascript" src="easy-player-element.min.js"></script>

	<!-- 引入jqueryCDN地址 -->

    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

    <script>

    	// 文档加载完成会执行ready()函数文件

        $(document).ready(function(){

        	//点击button按钮获取视频地址

            $("button").click(function(){

                //调取接口的地址有三种这里使用的是HLS

                //http://127.0.0.1:10800/api/v1/touchchannelstream?channel=1&protocol=FLV

                //http://127.0.0.1:10800/api/v1/touchchannelstream?channel=1&protocol=RTMP

                $.get("http://127.0.0.1:10800/api/v1/touchchannelstream?channel=1&protocol=HLS",function(data,status){

                    //返回的数据 data JSON格式

                    console.log(data);

                    //拼接返回的地址字符串给 video-url

                    //注：RTMP不需要拼接 "http://127.0.0.1:10800"+

                    $("#test2").attr("video-url","http://127.0.0.1:10800"+ data.EasyDarwin.Body.URL);

                });

            });

        });

    </script>

</html>
  • 准备好之后在当前文件hs -o以服务的方式启动

hs -o

如果软件有npm

npm install http-server -g 全局安装

如果没有可以使用其他服务的方式打开此文件。

注：一定要以服务的方式访问index.html

  • 启动成功点击获取

  • 成功播放

案例gitee地址:[https://gitee.com/daybreakxh/ajaxdemo.git]

关于EasyNVR

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

详细说明：http://www.easynvr.com

点击链接加入群【EasyNVR解决方案】：383501345

Copyright © EasyNVR.com 2016-2019

使用EasyNVR无插件流媒体服务器接口和EasyPlayer.js播放器插件实现web网页H5播放无插件的更多相关文章

  1. web网页中使用vlc插件播放相机rtsp流视频

    可参考: 使用vlc播放器做rtsp服务器 使用vlc播放器播放rtsp视频 使用vlc进行二次开发做自己的播放器 vlc功能还是很强大的,有很多的现成的二次开发接口,不需配置太多即可轻松做客户端播放 ...

  2. 如何自己实现一套EasyNVR这样的无插件流媒体服务器

    EasyNVR流媒体解决方案 EasyNVR能够通过简单的网络摄像机通道配置,将传统监控行业里面的高清网络摄像机IP Camera.NVR等具有RTSP协议输出的设备接入到EasyNVR,EasyNV ...

  3. 如何自己构建一套EasyNVR这样的无插件流媒体服务器实现摄像机硬盘录像机的网页可视化直播

    EasyNVR流媒体解决方案 EasyNVR能够通过简单的网络摄像机通道配置,将传统监控行业里面的高清网络摄像机IP Camera.NVR等具有RTSP协议输出的设备接入到EasyNVR,EasyNV ...

  4. EasyNVR摄像机无插件流媒体服务器对所在操作系统配置的需求

    背景需求 随着EasyNVR使用的用户越来越多,用户在使用过程中的常见问题我们也做出了一定的总结,以及在升级到3.0版本之后,我们的启动方式和配置 功能也有了一些改变.因此在此做出一些总结. 对于Ea ...

  5. EasyNVR支持的摄像机、NVR设备接入类型以及关于国标设备是否支持接入EasyNVR无插件流媒体服务器

    背景分析: 随着互联直播的发展,EasyNVR也是顺应时代潮流顺势发展,也是越来越受广大客户的欢迎. 主要是因为EasyNVR可以完美的摆脱网络的限制,可以实现互联网级别的直播分发和录像回看,特别是对 ...

  6. 网页直播、微信直播技术解决方案：EasyNVR与EasyDSS流媒体服务器组合之区分不同场景下的easynvr

    近期遇到好多客户咨询关于实现微信直播.或者是将直播页面集成进入自己项目中. 该方案的主要目的:完成在公网一直进行内网摄像头的RTMP/HLS直播! 实现方案的具体实现: EasyNVR+EasyDSS ...

  7. 网页视频直播、微信视频直播技术解决方案：EasyNVR与EasyDSS流媒体服务器组合之区分不同场景下的直播接入需求

    背景分析 熟悉EasyNVR产品的朋友们都知道,EasyNVR不仅可以独成体系,而且还可以跟其他系列产品相配合,形成各种不同类型的解决方案,满足各种不同应用场景的实际需求.针对很多设备现场没有固定公网 ...

  8. 前端视频插件Aliplayer播放器简单使用（基于地址播放）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  9. EasyNVR无插件流媒体服务器前端技术防止重复提交的方法

    现在随着接触EasyNVR时间越来越长,越发的觉得EasyNVR真的是一个"神器".从功能上来说自身不仅可以拉出来使用(具体功能搜索EasyNVR一定有惊喜!),也可以作为设备端与 ...

随机推荐

  1. ssh2学习-applicationContext.xml文件配置-----<context:annotation-config/>详解

    当我们需要使用BeanPostProcessor时,直接在Spring配置文件中定义这些Bean显得比较笨拙,例如: 使用@Autowired注解,必须事先在Spring容器中声明AutowiredA ...

  2. 利用问答机器人API开发制作聊天类App

    缘起 很久没写项目了,所以单纯的想练练手,正好看到有问答机器人的接口,想到之前也做过聊天项目,为什么不实验一下呢.当然也是简单调用接口的项目,并没有真正的完成问答的算法等等.业余项目,功能不齐全,只实 ...

  3. Easypack容器系列之：Nexus 3：Docker私库

    Nexus作为私库管理最为流行的工具之中的一个,用于包的管理和Docker镜像管理的私库管理场景中非经常常使用.Easypack利用最新版本号的oss版Nexus作为基础镜像用于提供相似服务. 本文将 ...

  4. 【VBA编程】15.WorkSheet对象常用属性

    [Cells属性] Cells属性用于返回一个Range对象,表示工作表中所有的单元格,包括已经使用的单元格和未使用的单元格. [代码区域] Sub 使用Cells属性() '声明变量 Dim wk ...

  5. python的threading和multiprocessing模块初探

    转载于:http://blog.csdn.net/zhaozhi406/article/details/8137670

  6. HDU 3861 The King’s Problem（强连通+二分图最小路径覆盖）

    HDU 3861 The King's Problem 题目链接 题意:给定一个有向图,求最少划分成几个部分满足以下条件 互相可达的点必须分到一个集合 一个对点(u, v)必须至少有u可达v或者v可达 ...

  7. BZOJ 2792 Poi2012 Well 二分答案

    题目大意:给定一个非负整数序列A.每次操作能够选择一个数然后减掉1,要求进行不超过m次操作使得存在一个Ak=0且max{Ai−Ai+1}最小,输出这个最小值以及此时最小的k 二分答案,然后验证的时候首 ...

  8. dubbo_分布式Rpc服务

    dubbo是一个分布式的服务架构,可直接用于生产环境作为SOA服务或Rpc服务 1.下载,编译,运行demo  1).安装zookeeper    下载:http://apache.claz.org/ ...

  9. 微信小程序下拉按钮动画

    有些时候要求下拉按钮需要动画效果,但又不需要引入插件． 这时需要手动写一个动画． 主要思路: 动态切换class 默认与动画转向的样式编写 上图是默认给出的按钮向下的样式, 上图是动画转向后的样式 上 ...

  10. ConcurrentHashMap的JDK1.8实现

    今天我们介绍一下ConcurrentHashMap在JDK1.8中的实现.基本结构 ConcurrentHashMap在1.8中的实现,相比于1.7的版本基本上全部都变掉了.首先,取消了Segment ...