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


    1.背景需求

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

    2.解决方案

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

    3.实现

    • 新建文件demo目录结构如下easy-player.swf和easy-player-element.min.js文件可以通过[https://www.npmjs.com/package/easy-player]获取,插件有详细使用文档。
      EasyPlayer播放器
    • 使用到软件的接口
      EasyNVR接口
    • 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

    • 启动成功点击获取
      EasyPlayer播放器
    • 成功播放
      EasyPlayer播放器

    案例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公众号

  • 相关阅读:
    什么是香港3c专线精品网和3c直连网络服务器
    服务器被攻击后处理办法
    服务器Linux系统安全维护基础知识介绍
    服务器宕机原因分析
    公网,专用,共享独立IP介绍
    服务器内存种类和各自特性
    自主组装服务器行不行
    英语网址大全收藏
    【分享】地产集团公司LOGO设计
    星际争霸2logo在线制作
  • 原文地址:https://www.cnblogs.com/babosa/p/10459813.html
Copyright © 2020-2023  润新知