멀티미디어 재생 (StreamingMedia) 디바이스API 가이드 프로그램

멀티미디어 재생(StreamingMedia) 가이드 프로그램은 디바이스 API 실행환경을 활용하여 하이브리드 앱을 개발 시 참고 및 활용될 수 있도록 구현된 전자정부 디바이스 API에 대한 가이드 앱으로써, 모바일 스마트 디바이스의 Streaming Media관련 기능을 JavaScript기반으로 구성 된 StreamingMedia DeviceAPI를 통하여 멀티미디어(동영상)을 실시간으로 볼수 있도록 내장 미디어 플레이어로 연동하는 기능을 지원한다.

본 가이드 프로그램의 주요 기능으로 웹 서버와 연동하여 멀티미디어 목록 조회, 멀티미디어 재생 등의 기능을 제공하고 있다.

멀티미디어 재생(StreamingMedia) 디바이스API 가이드 프로그램은 스트리밍 미디어 목록보기, 미디어 재생(클릭 시 내장 미디어 플레이어 연동), 미디어 재생 횟수 업데이트 등의 기능으로 구성되어 있다.(관련기능 부분참조)

• 웹 서버에 문서 목록을 조회하여 로드한다.
• 미디어 재생 시 재생횟수 업데이트를 한다.

window.plugins.EgovInterface.request(url, params, onSuccess);

• 실시간으로 멀티미디어를 재생한다.

window.plugins.streamingMedia.playVideo(resultURL, options);

• MEDIA

• FILE_DETAIL_INFO

멀티미디어 재생(Streaming Media) 디바이스API 가이드 프로그램에서 제공하는 멀티미디어 재생(실시간) 등의 기능을 활용하기 위하여 필요한 항목 및 그 환경 설정은 다음과 같다.

    <feature name="InterfaceAPI">
        <param name="ios-package" value="EgovInterface"/>
    </feature>
    <feature name="StreamingMedia">
        <param name="ios-package" value="StreamingMedia" />
    </feature>

    #define kSERVER_URL     @"Server_URL"

<sqlMap resource="egovframework/sqlmap/hyb/mbl/stm/EgovStreamingMediaDeviceAPIGuide_SQL_[DB명].xml"/>

멀티미디어 재생(StreamingMedia) API 가이드 프로그램은 크게 미디어 목록 조회, 해당 미디어 재생(실시간) 및 재생횟수 업데이트 기능으로 구성되어 있다.

• 웹 서서에서 미디어 목록 리스트를 조회한다.

function fn_egov_medialist() {
    
    console.log(">> media List");
    var url = "/stm/mediaInfoList.do";
    var params = {};
    fileSN ="";
    window.plugins.EgovInterface.request(url, params, function(jsondata) {
            resultJson = jsondata;
                                      
            if(resultJson.resultState == "OK"){
               var strhtml="";
               $(resultJson.resultSet).each(function(){
                                            
                         var sn = this.sn;
                         var mdSj = this.mdSj;
                         var revivCo = this.revivCo;
                         var mdcode = this.mdCode;
                                                                
                         strhtml += '<li>';
                         strhtml += '     <a href="#" onclick="javascript:fn_egov_filelist_go(\'' + sn + '\')">';
                         strhtml += '         <h3>제목:  ' + mdSj + '</h3>';
                         strhtml += '         <h3>파일타입: ' + mdcode + '</h3>';
                         strhtml += '         <h3>재생횟수:  ' +  revivCo + '</h3>';
                         strhtml += '    </a>';
                         strhtml += '</li>';
                                                                      
                    });
                                         
                var theList = $('#theList');
                theList.html(strhtml);
                $.mobile.changePage("#mediaInfo", "slide", false, false);
                theList.listview("refresh");
                infoScroll.refresh();
                                         
            }else{
                $("#alert_dialog").click( function() {
                      jAlert('데이터 전송 중 오류가 발생 했습니다.', '전송 오류', 'c');
                      });
                  }
                                         
            }, function(result){
                    alert("error > "+result);
            });
    
}

• 네트워크를 통하여 실시간으로 멀티미디어(동영상)을 재생한다.

function fn_egov_filelist_go(input) {
    
    console.log(">>> sn: " + input);
    
    jConfirm('동영상을 재생하시겠습니까?', '알림', 'c', function(r) {
             if (r == true) {
             
             var url = "/stm/getMediaURL.do";
             var params = {sn : input};
             
             window.plugins.EgovInterface.request(url, params, function(jsondata) {
                    resultJson = jsondata;
                                               
                    if(resultJson.resultState == "OK"){
                        fn_egov_playMedia(resultJson.resultURL, input);
                         console.log("RevivCo Update OK.");
                                                  
                    }else{
                         console.log("RevivCo Update Error.");
                    }
                    }, function(result){
                         alert("error > "+result);
             });
             
             }
             });
}

function fn_egov_filelist_go(input) {
  
    jConfirm('동영상을 재생하시겠습니까?', '알림', 'c', function(r) {
        if (r == true) {
        	var resultURL = server_url + "/stm/getMediaStreaming.do?sn=" + input;                	
        	fn_egov_playMedia(resultURL, input);        
        }
    });
               
}

function fn_egov_playMedia(resultURL, input){
  
    var options = {
        successCallback: function() {
            console.log("Video was closed without error.");
            $.mobile.changePage("#main", "slide", false, false);
        },
        errorCallback: function(errMsg) {
            console.log("Error! " + errMsg);
        },
        orientation: '' // 'landscape'
    };
    
    fn_egov_updateMediaInfoRevivCo(input);
    window.plugins.streamingMedia.playVideo(resultURL, options);

}

function fn_egov_updateMediaInfoRevivCo(inputSn){
    var url = "/stm/updateMediaInfoRevivCo.do";
    var params = {sn : inputSn};
    console.log(">>> inputSn:" + inputSn);
    
    window.plugins.EgovInterface.request(url, params, function(jsondata) {
            resultJson = jsondata;
                                         
            if(resultJson.resultState == "OK"){
                console.log("RevivCo Update OK.");
            }else{
                console.log("RevivCo Update Error.");
            }
            }, function(result){
                  alert("error > "+result);
        });

}

• 왼쪽 상단의 삼각형 버튼을 클릭하면 가이드 프로그램이 빌드되어 아이폰 디바이스에 설치 된다.

• 빌드가 성공하면 아래와 같은 어플리케이션 실행화면을 확인 할 수 있다.

• 서버사이드 가이드 프로그램의 실행은 프로젝트를 마우스 오른쪽 버튼을 클릭 한후 Run As>Run On Server 버튼을 통해 실행 할 수 있다.

• 빌드가 성공적으로 수행 되면 이클립스의 콘솔 창에서 'Server Startup in xxx ms' 메시지를 확인 할 수 있다.

디바이스 어플리케이션에서 발생한 오류 내용 확인 및 디버깅을 위해서는 폰갭 프레임워크에서 제공하는 console.log를 이용할 수 있다. console.log 함수는 자바스크립트 구문에서 사용할 수 있는 디버그 코드로 이클립스 및 Xcode에서 확인 할 수 있다.

• 실제 콘솔 로그 예

function fn_egov_network_check(doCheck)
{
    console.log('DeviceAPIGuide fn_egov_network_check');
    var networkState = navigator.network.connection.type;
    ...
}

• xCode 콘솔 창

멀티미디어 재생(Streaming Media) 디바이스 API 가이드 다운로드 : Click

• Cordova : Click
  
• UX/UI 라이브러리 : jQuery MobileClick
  
• Cordova 플러그인 정보 : cordova-plugin-streaming-mediaClick