HLS(Http Live Streaming) 웹에서 플레이 하는 방법(FlowPlayer 사용)

 

HLS(Http Live Streaming) 웹에서 플레이 하는 방법(FlowPlayer 사용)

 

20170206추가 내용

 - 아래 방식은 300불 정도의 유료 방식이다.

 - 로컬에서는 무료버젼으로 출력이 가능하다.

 

여러가지 방식의 CCTV 스트리밍 방식에 대해 알아보면서

각각의 장단점과 크로스도메인 이슈, 여러 플레이어들에 대해서 알게 되었다.

 

그중 HLS 방식은 별도의 ActiceX 설치 없이 스트리밍이 가능하기 때문에 대시민 페이지에서 사용하기

적절 하다고 판단 했다.

 

아래서 설명할 m3u8(HLS방식) 출력 코드는

xml 파일로 부터 cctrv 의 정보를 읽어들여 flow player 에서 출력하는 방식이다.

cctv에 대한 정보를 다른 방식으로 받는다면 xml에서 데이터를 받는 부분은 생략하고 봐도 무방하다.

 

html 소스부터 보자.

 

//flowplayer js 추가
 
<script type="text/javascript" src="<c:url value='/resource/js/flowplayer-3.2.13.min.js'/>"></script> 
 
 
<div class="pop">
 <h1><span id="" class="icon ion-ios7-videocam" title="CCTV"></span> CCTV영상
  <select id="cctvCombo" onChange="javascript:getCctvInfo()">
  </select>
 </h1>
 
 <div id="divCCTVVIEW">     
  <a style="display:block;width:355px;height:267px;" id="player"></a>
 </div>
</div>
 

 

 cctv를 선택할 콤보박스 하나와 출력하는 부분이 다이다.

그럼 콤보박스를 선택했을 때 실행되는 함수부터 보자. (getCctvInfo())

xml 로 부터 데이터 받기

 

function getCctvInfo() {
    createXMLHttpRequest();  //웹 서버로 부터 데이터를 요청하기 위해 사용
    if (xmlHttp == null) {
        alert("ajax create fail");
        return;
    }
    var chanid = $("#cctvCombo option:selected").val();
 
    var stype = "VHS";
 
    var address = "http://url:port/cctvInfo?ch=" + chanid + "&type=" + stype;
 
    // ajax
    xmlHttp.onreadystatechange = loader;
    xmlHttp.open("GET", address, true);
    xmlHttp.send(null);
}

 

function loader() {   //통신 상태 변경시 실행
    if (xmlHttp.readyState == 4) {
        if (xmlHttp.status == 200) {
            temp = xmlHttp.responseXML;
            getValue(temp);
        }
        else {
            alert("ajax fail: status is " + xmlHttp.status );
        }
    }
}
function createXMLHttpRequest() {   //브라우져에 맞게 데이터의 요청 방식을 설정한다.
    if (window.XDomainRequest) {
        // Use Microsoft XDR (For, ie8 ie7)
        xmlHttp = new XDomainRequest();
        xmlHttp.onload = function () {
            if (this.contentType.match(/\/xml/)) {
                var dom = new ActiveXObject("Microsoft.XMLDOM");
                dom.async = false;
                dom.loadXML(this.responseText);
                getValue(dom);
            } else {
                alert("ajax fail: response is not xml");
            }
        };
        xmlHttp.ontimeout = function () {
            alert("ajax fail: request timeout");
        };
        xmlHttp.onerror = function () {
            alert("ajax fail: request error");
        };
    } else if (window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    } else if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    }
}

 

이제 xml 로 부터 cctv 정보를 받았으니 그 정보로 HLS 주소를 만들어 출력하는 부분을 보자

 

 

 

function getValue(xml) {
    if (($(xml).find("resp").length > 0) && ($(xml).find("resp").find("info").length > 0)) {
        var retval = $(xml).find("resp").find("result").text();
        if (retval == '200') {
 
           //받은 xml에서 데이터를 뽑아 HLS주소를 조합한다.
            var ip = $(xml).find("resp").find("info").find("ip").text();
            var chanid = $("#cctvCombo option:selected").val();
            var port = $(xml).find("resp").find("info").find("port").text();
            var address = "http://" + ip + ":" + port + "/" + chanid + "/live_res/live_index.m3u8";
            
 
            // FlowPlayer working
            flowplayer("player", "${ctx }/resource/video/flowplayer.commercial-3.2.18.swf", {
                key: '구매한키값',
                clip: {
                    url: address
                        , urlResolvers: "httpstreaming"
                        , provider: "httpstreaming"
                        , autoPlay: true
                        , live: true
                        , showCaptions: 'true'
                        , onCuepoint: [60000, function () {
                            this.stop();
                        }]
                },
                plugins: {
                    controls: {
                        url: "${ctx }/resource/video/flowplayer.controls-3.2.16.swf"
                           , time: true
                           , volume: false
                           , mute: false
                    },
              httpstreaming: {
                        url: '${ctx }/resource/video/flowplayer.httpstreaminghls-live-3.2.15.swf'
                    },
                    caption: {
                        url: '${ctx }/resource/video/flowplayer.captions-3.2.10.swf',
                        captionTarget: 'content'
                    },
                    content: {
                        url: '${ctx }/resource/video/flowplayer.content-3.2.9.swf',
                        bottom: 80,
                        height: 40,
                        backgroundColor: 'transparent',
                        backgroundGradient: 'none',
                        borderRadius: 4,
                        border: 0,
                        textDecoration: 'outline',
                        style: {
                            body: {
                                fontSize: 20,
                                fontFamily: 'ARIAL',
                                textAlign: 'center',
                                fontWeight: 'bold',
                                color: '#ffffff'
                            }
                        },
                        html: '<p>실시간 CCTV영상입니다.</p>'
                    }
                }
            });
        }
        else {
            //alert("xml recv success but result is not 200");
        }
    }
    else {
        //alert("xml is null or not completed value");
    }
}
 
 

flowplayer가 동작 하는 부분에 대한 옵션은 아래의 Link를 참조하기 바란다.

 

Link : Flow Player Option

 

이렇게 구현을 하면 flowplayer를 통한 cctv 스트리밍이 가능하다.

별도의 ActiveX 설치 또한 없다.

 

하지만 HLS의 경우 RTSP 방식에 비해 10초정도의 딜레이가 더 발생한다.

그리고 스트리밍에 필요한 swf파일은 아래의 파일 다운받아 원하는 위치에 넣으면 된다.

 

※올린 파일이 문제가 된다면 바로 삭제 하겠습니다.

 

swf.zip

다운로드

 

출력을 확인 한 소스기 때문에 출력이 제대로 되지 않는다면

방화벽이나 크로스도메인 문제를 확인해 보기 바란다.