Media 디바이스API 가이드 프로그램

MediaAPI 가이드 프로그램은 모바일 디바이스 API 실행환경을 활용하여 하이브리드 앱을 개발자가 디바이스 기기내 Media를 이용하여 서버에 전송하는 기능 구현 시, 참고 및 활용될 수 있도록 구현된 전자정부 디바이스 API에 대한 가이드 앱으로써, 모바일 스마트 디바이스의 Media 관련 기능을 JavaScript 기반으로 구성된 Media DeviceAPI 를 통하여 조회할 수 있도록 지원한다.

또한, 전자정부 표준 프레임워크 기반의 웹 서버 어플리케이션과 연계하여 디바이스 내, Media 정보를 서버로 전송 및 조회할 수 있는 기능으로 구성되어 있다.

본 가이드 프로그램 에서는 알람 기능을 가이드 할 수 있도록 Media 파일 목록 서버로부터 수신하기 , Media 플레이어 기능을 제공하고 있다.

Media API를 이용하여, 미디어 파일을 재생하거나, 녹음 기능을 활용하여 생성한 미디어 파일을 서버에 전송한다.

• 문제 : 폰갭 오류시.
• 해결방안 : setTimeout() 함수로 phonegap 로딩 순서를 지연시킨다.
  

    document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);

• 문제 : iScroll4 컨텐츠 내용 높이 계산 오류.
• 해결방안 : setTimeout() 함수로 컨텐츠에 css 적용이 완료되고 iscroll 생성이 되도록 한다.

setTimeout(function()
           {
               myScroll = new iScroll(thisPage, 
                                      { 
                                          checkDOMChanges: true,
                                          onBeforeScrollStart:function(e)
                                          {
                                          }
                                      });
           },
           500);

Xcode 4.5부터 iOS 6, iPhone 5를 지원하는데, 해당 디바이스와 OS를 지원을 할 경우 PhoneGap 1.9.0의 라이브러리는 Xcode 4.4.1에서 컴파일되어 배포되는 라이브러리라 프로젝트 옵션을 조정할 필요가 있다.

1. 옵션 설정

2. armv7s 삭제

폰갭에서 특정 외부 도메인이나 외부 도메인의 하위 도메인을 사용해야할 경우,
[Project_Name]/Supproting Files/config.xml에서 <access origin=“ExternalHosts”/> 항목에 외부 도메인 주소를 추가 설정해야 외부 도메인에 접속할 수 있다.

N/A

Media 디바이스API 가이드 프로그램은 크게 서버에 저장된 미디어 파일을 재생하는 기능과 녹음 기능을 활용하여 설정한 알림 정보를 웹 서버 어플리케이션으로 전송 및 조회하는 기능으로 구성되어 있다.(관련기능 부분참조)

• 디바이스 내의 오디오 파일 재생 또는 녹음 기능을 제공하는 역할을 하는 객체이다.
  

var media = new Media(src, mediaSuccess, [mediaError], [mediaStatus]);

• 미디어 파일의 현재 재생 위치 값을 구한다.
  

media.getCurrentPosition(mediaSuccess, [mediaError]);

• 미디어 파일의 재생 지연 시간을 구한다.
  

media.getDuration();

• 오디오 파일의 재생을 멈춘다.
  

media.pause();

• 미디어 파일을 재생을 한다.
  

media.play();

• 운영체제(OS) 혹은 메모리 내의 Media 객체에 등록된 오디오 파일을 해제한다.
  

media.release();

• Media API 에 대한 에러 코드

• 단말기의 루트(root) 파일 시스템에 접근할 수 있도록 지원하는 파일 시스템.

window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onSuccess, onError);

• W3C Directories and Systems을 따르는 파일 시스템 디렉토리 관련 객체.
• entry.getDirectory : 폴더를 가져오거나, 생성한다.

var entry = entry.getDirectory("newDir", {create: true, exclusive: false}, success, fail);

• 서버에 파일을 업로드할 수 있도록 하는 파일 전송 객체.

var options = new FileUploadOptions();
options.fileKey="file";
options.fileName=fileURI.substr(fileURI.lastIndexOf('/')+1);
options.mimeType="text/plain";

var params = new Object();
params.value1 = "test";
params.value2 = "param";

options.params = params;

var ft = new FileTransfer();
ft.upload(fileURI, "http://some.server.com/upload.php", transferSuccess, transferFail, options);

• 서버의 파일을 다운로드할 수 있도록 하는 파일 전송 객체.

var fileTransfer = new FileTransfer();
var uri = encodeURI("http://some.server.com/download.php");

fileTransfer.download(
    uri,
    filePath,
    function(entry) {
        console.log("download complete: " + entry.fullPath);
    },
    function(error) {
        console.log("download error source " + error.source);
        console.log("download error target " + error.target);
        console.log("upload error code" + error.code);
    }
);

• 파일 업로드시, 전달할 매개변수를 정의하는 업로드 속성객체

• Media 객체를 통해 녹음 기능 사용 시, App 내의 root의 폴더 내에 Media 파일이 생성된다.

• 파일 업로드 시, Phonegap에서 제공하고 있는 File API의 FileTransfer 객체를 통해 파일을 저장한다.

• phoneGap 라이브러리에서는 iPhone 상태에서 wav 파일만 녹음을 지원한다. 따라서 wav 파일은 바이너리 스트리밍이 불가능함으로 다운로드 후 재생을 한다.

Media 디바이스API 가이드 프로그램에서 제공하는 모바일 디바이스의 알림 관련 기능을 활용하기 위하여 필요한 항목 및 그 환경 설정은 다음과 같다.

    <feature name="Media">
        <param name="ios-package" value="CDVSound"/>
    </feature>
    <feature name="File">
        <param name="ios-package"  value="CDVFile"/>
    </feature>
    <feature name="FileTransfer">
        <param name="ios-package" value="CDVFileTransfer"/>
    </feature>

    <access origin="ExternalHosts"/>

<entry key="serverContext" value="서버의 경로"/>
<entry key="fileStorePath" value="파일_저장_경로"/>

<sqlMap resource="egovframework/sqlmap/hyb/ios/mda/EgovMediaiOSAPIGuide_SQL_[DB명].xml"/>

서버에 저장된 파일 및 업로드 한 녹음 파일 목록을 조회한다.

function fn_egov_show_mediaList()
{
    if(fn_egov_network_check(false))
    {
        var params = {mdCode : "media"};
        
        $.mobile.showPageLoadingMsg('a');
        // 디바이스의 성능에 따라 PrograssDialog Show 가 완전이 로딩이 된후 다음 코드를 수행하도록 setTimeout 을 사용하여 지연시킨다.
        setTimeout(function()
                   {
                       fn_egov_sendto_server("/mda/mediaiOSInfoList.do",params);
                   }, 
                   500);
    }
}

서버에 저장된 미디어 파일 목록을 조회하고, 디바이스 화면에 표시한다.

기능설명 : 기능설명 화면으로 이동한다.
라이선스 : 라이선스 화면으로 이동한다.
미디어파일내용 : 미디어재생 화면으로 이동한다.

디바이스 API를 통해 Media 생성/해지, Media 재생/정지, 길이를 조회하며, 녹음시작/중지를 통해 저장한 녹음 파일을 서버에 업로드하여 저장한다.

function fn_egov_open_mediaDetail(sn)
{
    if(fn_egov_network_check(false))
    {
        var params = {
            sn : sn
        };
        
        $.mobile.showPageLoadingMsg('a');
        // 디바이스의 성능에 따라 PrograssDialog Show 가 완전이 로딩이 된후 다음 코드를 수행하도록 setTimeout 을 사용하여 지연시킨다.
        setTimeout(function()
                   {
                       fn_egov_sendto_server("/mda/mediaiOSInfoDetail.do",params);
                   }, 
                   500);
    }
}

function fn_mediaPlayEvent() 
{
	$("#btnPause").show();
	$("#btnPlay").hide();
	
	fn_mediaPlay();
	
	playTimer = setInterval(function()
                            {
                                mediaObj.getCurrentPosition(fn_currentPositionSuccess, fn_currentPositionError);
                            }, 1000);
}

function fn_mediaRecordStart() 
{
    var file = "Record_" + new Date().format("YYYYMMDDhhmmss") + ".wav";
    var src = null;
    entry.getFile(file, {create: true, exclusive: false}, 
                  function(entry) 
                  {
                      console.log("DeviceAPIGuide fn_mediaRecordStart Success");
                      src = entry.fullPath;
                                
                      if(mediaRecordObj != null) 
                      {
                          mediaRecordObj.release();
                          mediaRecordObj = null;
                      }
                  
                      mediaRecordObj = new Media(src, fn_success, fn_error);
                      mediaRecordObj.startRecord();
                  }, fn_error);
    
    fileURL = entry.fullPath + "/" + file;
    return file;
}

function fn_mediaRecordStopEvent() 
{
    $("#recordSj").text("");
    $("#recordPosition").text("00:00:00");
	
    $("#btnRecordStart").show();
    $("#btnRecordStop").hide();
	
    fn_mediaRecordStop();
    clearInterval(recordTimer);
    recordTimer = null;
	
    jConfirm("서버에 전송하시겠습니까?", "알림", "b", 
             function(result)
             {
                if(result) 
                {
                    $.mobile.showPageLoadingMsg();
             
                    if(fn_egov_network_check(true))
                    {
                        var file = fileURL.substr(fileURL.lastIndexOf('/') + 1);
             
                        var options = new FileUploadOptions();
                        options.fileKey = "file";
                        options.fileName = file;
                        options.mimeType = "audio/wav";
             
                        var params = {};
                        options.params = params;
             
                        var ft = new FileTransfer();
                        var serverPath = loadServer + "/mda/mediaiOSRecordUpload.do?mdSj="+encodeURIComponent(file)+"&uuid="+ encodeURI(device.uuid);
                        ft.upload(fileURL, serverPath, fn_insertSuccess, fn_error, options);
                    }
                }
             });
}

function fn_egov_get_mediaDownload(sn, fileName)
{
    if(fn_egov_network_check(true))
    {
        var fileType = fileName.substr(fileName.lastIndexOf('.')+1);
        var fileTransfer = new FileTransfer();
        fileTransfer.download(
                              loadServer + "/mda/getMediaiOS.do?sn=" + sn,
                              entry.fullPath + "/" + "Media."+fileType,
                              function(entry) 
                              {
                                  console.log("DeviceAPIGuide fn_egov_get_mediaDownload Success");
                                  $.mobile.hidePageLoadingMsg();
                                  fn_mediaAPIConfig(entry.fullPath);
                                  fn_mediaPlayInit();
                                  fn_setMediaDuration();
                                  $.mobile.changePage($("#detailPage"));
                              },
                              function(error) 
                              {
                                  console.log("DeviceAPIGuide fn_egov_get_mediaDownload error");
                                  console.log("target : " + error.target + " source : " + error.source + " code : "+error.code);
                                  $.mobile.hidePageLoadingMsg();
                              });
    }
}

스트리밍 방식을 이용하여 서버에 저장된 미디어 파일을 재생/일시정지/위치이동 하는 플레이어 기능을 한다.

기능설명 : 기능설명 화면으로 이동한다.
라이선스 : 라이선스 화면으로 이동한다.
목록 : 미디어 목록 조회 화면으로 이동한다.
녹음 : 녹음 기능을 활성화한다.

재생/정지 : 미디어 파일 을 재생/정지한다.

미디어 파일을 생성하고, 정지 버튼을 통해 서버에 해당 파일을 업로드 한다.

기능설명 : 기능설명 화면으로 이동한다.
라이선스 : 라이선스 화면으로 이동한다.
목록 : 미디어 목록 조회 화면으로 이동한다.
재생: 이전 미디어 파일 재생 기능을 활성화한다.

녹음/정지 : 미디어 파일 을 녹음/정지한다.

1. MediaAPI 설치하러 가기
   
2. MediaAPI 프로젝트의 설치 상태를 확인하고 빌드를 클릭한다
   
   

• 빌드가 성공하고 나면 다음과 같은 화면이 실행된다.
  
  

1. Web Server 설치하러 가기
   
2. 프로젝트 우클릭>Run as>Maven install 을 클릭하여 빌드를 한다.
   
   
3. 빌드 성공 (콘솔 정보 확인)
   
   
4. 프로젝트 우클릭>Run as>Run on Server 를 클릭하여 실행시킨다.
   
   
5. 프로젝트가 성공적으로 실행되었는지 확인한다.
   
   

디바이스 어플리케이션에서 발생한 오류 내용 확인 및 디버깅을 위해서는 폰갭 프레임워크에서 제공하는 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 콘솔 창

• Organizer 로그 창

Media 디바이스 API 가이드 다운로드 : Click

• UX/UI 라이브러리 : jQuery MobileClick
  
• Phonegap 2.9.0 Media: Click
  
• Phonegap 2.9.0 File: Click
  
• Phonegap 2.9.0 FileTransfer: Click