EasyNVR、EasyDSS二次開發之：RTMP、HLS流在web頁面進行無插件播放示例Demo代碼

時間 2019-11-16

標籤 easynvr easydss 二次開發 rtmp hls web 頁面進行插件播放示例 demo 代碼欄目 HTML 简体版

原文原文鏈接

無論是基於EasyNVR仍是EasyDSS，都是支持無插件直播，這也是將來視頻直播的一個趨勢。對於傳統的瀏覽器插件播放誰用誰知道；javascript

以上是軟件自帶播放展現php

背景需求

對於EasyNVR和EasyDSS的使用方式大概分爲兩大類，一類是直接將軟件做爲視頻能力平臺來進行使用；另外一類就是將視頻能力集成到自身的業務系統來，這就涉及到相關的接口調用和一些對應的功能的集成。對與前端的web播放器的集成也是一個須要注意的方向；一般也有不少客戶會諮詢到關於web播放器集成的相關問題，本篇博客也是對應web流媒體播放器的demo介紹。css

解決方案

對於流媒體的web播放器有不少，無論的ckplay、flowplayer、騰訊、阿里等；咱們的Easy系列軟件使用的是Videojs，所以本篇主要介紹的也是Videojs如何實現HLS、RTMP流的web播放；html

引用相關文件

<link rel="stylesheet" href="plugins/video-js-5.19.2/video-js.css"/>
<script src="plugins/video-js-5.19.2/video.js"></script>
<script src="plugins/video-js-5.19.2/videojs-contrib-hls4.js"></script>
<script src="plugins/videojs-hotkeys/videojs.hotkeys.min.js"></script>
<script type="text/javascript" src="plugins/jquery-3.3.1.min.js"></script>

HTML部分

主要就是給videojs一個初始化的標籤；前端

<div class="content-wrapper">
        <div class="video-wrapper" style="padding-bottom:56.25%;position:relative;margin:0 auto;">
            <div class="video-inner" style="position:absolute;top:0;bottom:0;left:0;right:0;">
                <video id="videojs" class="video-js vjs-default-skin vjs-big-play-centered" style="width: 100%; height: 100%;" controls preload="none"
                    poster="" x5-video-player-fullscreen=」true」，x5-video-player-type=」h5」>
                    <source src="" type=""></source>
                    <p class="vjs-no-js">
                        To view this video please enable JavaScript, and consider upgrading to a web browser that
                        <a href="http://videojs.com/html5-video-support/" target="_blank">
                        supports HTML5 video
                        </a>
                    </p>
                </video>     
            </div>
        </div>
    </div>

js部分；

播放器的初始化；html5

function setupPlayer(videoUrl) {
        videoUrl = videoUrl || "rtmp://121.40.50.44/live/stream_1";
        if(videoUrl.indexOf("rtmp") == 0){
            $("#videojs").find("source").attr("src",videoUrl).attr("type","rtmp/mp4");
            player = videojs("videojs",{
                notSupportedMessage : '您的瀏覽器沒有安裝或開啓Flash,戳我開啓！',
                techOrder : ["flash"],
                autoplay : true
            });
            videojs('videojs').ready(function() {
              this.hotkeys({
                volumeStep: 0.1,
                seekStep: 5,
                enableVolumeScroll: false,
                enableModifiersForNumbers: false
              });
            });
            player.on("error",function(e){
                var $e = $(".vjs-error .vjs-error-display .vjs-modal-dialog-content");
                var $a = $("<a href='http://www.adobe.com/go/getflashplayer' target='_blank'></a>").text($e.text());
                $e.empty().append($a);
            })                            
        } else {
            var timeout = 10000;
            var step = 500;
            var cnt = 0;
            function test(){
                cnt += step;
                $.ajax(videoUrl,{
                    type : "HEAD",
                    global : false,
                    complete :function(xhr,ts){
                        if(cnt > timeout){
                            alert("請求數據失敗");
                            return;
                        }
                        //xhr.status == 0 , when cross domain request not found
                        if(xhr.status == 404 || xhr.status == 0 || (xhr.status != 200 && !isPC())){
                            console.log("video is no ready, waiting...");
                            setTimeout(test,step);
                        }else{
                            $("#videojs").find("source").attr("src", videoUrl).attr("type","application/x-mpegURL");
                            player = videojs("videojs",{
                                autoplay : true
                            }); 
                        }
                    }
                })
            }
            test();
        }
    }

在自身事件須要的地方調用播放器的初始化方法來完成視頻播放；java

以解析地址傳遞留地址參數來完成播放爲例；jquery

/解析傳遞來的參數web

var $_GET = (function(){
        var url = window.document.location.href.toString();
        var u = url.split("?");
        if(typeof(u[1]) == "string"){
            u = u[1].split("&");
            var get = {};
            for(var i in u){
                var j = u[i].split("=");
                get[j[0]] = j[1];
            }
            return get;
        } else {
            return {};
        }
    })();

$(function(){
        var VideoUrl = $_GET['url'];  
        if(VideoUrl){
            setupPlayer(VideoUrl);
        }else{
            alert("請正確輸入流地址！");
        }
    })

效果展現

播放EasyNVR轉發出來的RTMP和hls流ajax

用http-server起一個本地的服務；

RTMP播放效果：

經過EasyNVR獲取到RTMP流地址；

HLS播放效果：

經過EasyNVR獲取到HLS流地址；

VideoJS官網地址：http://docs.videojs.com/

關於EasyNVR

EasyNVR可以經過簡單的網絡攝像機通道配置，將傳統監控行業裏面的高清網絡攝像機IP Camera、NVR等具備RTSP協議輸出的設備接入到EasyNVR，EasyNVR可以將這些視頻源的音視頻數據進行拉取，轉換爲RTMP/HLS，進行全平臺終端H5直播（Web、Android、iOS），而且EasyNVR可以將視頻源的直播數據對接到第三方CDN網絡，實現互聯網級別的直播分發；

詳細說明：http://www.easynvr.com

點擊連接加入羣【EasyNVR解決方案】：383501345

關於EasyDSS流媒體服務器

EasyDSS商用流媒體服務器解決方案是一套集流媒體點播、轉碼與管理、直播、錄像、檢索、時移回看於一體的一套完整的商用流媒體服務器解決方案，EasyDSS高性能RTMP流媒體服務器支持RTMP推流，同步輸出HTTP、RTMP、HLS、HTTP-FLV，支持推流分發/拉流分發，支持秒開、GOP緩衝、錄像、檢索、回放、錄像下載、網頁管理等多種功能，是目前市面上最合理的一款商用流媒體服務器！