使用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