使用EasyNVR无插件流媒体服务器接口和EasyPlayer.js播放器插件实现web网页H5播放无插件

时间 2019-11-22

标签使用 easynvr 插件媒体服务器接口 easyplayer.js easyplayer 播放实现 web 网页 h5 栏目 JavaScript 繁體版

原文原文链接

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.htmljavascript

启动成功点击获取
成功播放

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

关于EasyNVR

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

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

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