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

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

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

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

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

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);

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

• ID Generation Service를 활용하기 위해서 Sequence 저장테이블인 COMTECOPSEQ에 FILE (파일 정보 ID) 항목을 추가해야 한다.

• MEDIA

• FILE_DETAIL_INFO

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

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

• 미디어 재생 시, 기존 Web에서 사용하는 스트리밍 방식을 이용하기 때문에 네트워크 상태가 Wi-fi 가 아닌 상태에서는 데이터 사용량을 유의하여야 한다.
• 스트리밍 방식으로 인하여, 네트워크 상태에 따라 Media 오류 또는 재생이 지연된다. (지연시간 : 2초)

function fn_setMediaDuration() {
	var counter = 0;
	timerDur = setInterval(function() {
		counter = counter + 50;
	    if (counter > 2000) {
	    	
	        clearInterval(timerDur);
	        timerDur = null;
	        fn_error();
	    }
	    var dur = mediaObj.getDuration();
	    if (dur > 0) {
	    	
	       ...

	       clearInterval(timerDur);
	       timerDur = null;
	    }
    } , 100);
}

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

<plugin name="Media" value="org.apache.cordova.AudioHandler" />
 
<plugin name="File" value="org.apache.cordova.FileUtils" />
<plugin name="FileTransfer" value="org.apache.cordova.FileTransfer" />

<string name="SERVER_URL">http://192.168.100.222:8080/DeviceAPIGuideTotal_Web_V1.7.1</string>

    <!--전자정부 Interface 디바이스 API에서 사용하기 위한 서버경로 설정-->
    <?xml version="1.0" encoding="utf-8"?>
    <resources>
	<string name="SERVER_URL">서버_URL</string>
    </resources>

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
 
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

• 업로드 된 파일 저장 위치

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

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

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

function fn_selectMediaList() {
	
	var url = "/mda/mediaInfoList.do";
	var acceptType = "xml";
	
	var params = {
					mdCode : "media"
				};
	$.mobile.showPageLoadingMsg();
	egovHyb.post(url, acceptType, params, function(xmldata) {

		console.log("DeviceAPIGuide fn_selectMediaList request Completed");
		
		fn_displayList(xmldata);
	});
}

미디어 목록조회 화면

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

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

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

function fn_selectMediaInfoDetail(sn) {
	
	var url = "/mda/mediaInfoDetail.do";
	var acceptType = "xml";
	
	var params = {
					sn : sn
				};
	$.mobile.showPageLoadingMsg();
	egovHyb.post(url, acceptType, params, function(xmldata) {
		
		console.log("DeviceAPIGuide fn_selectMediaInfoDetail request Completed");
		
		fn_displayDetail(xmldata);
	});
	
}

function fn_mediaPlayEvent() {
	
	...
	
	fn_mediaPlay();
	
	playTimer = setInterval(function(){
		mediaObj.getCurrentPosition(fn_currentPositionSuccess, fn_currentPositionError);
	}, 1000);
}

function fn_mediaRecordStartEvent() {
	
	...
	
	var recordSj = fn_mediaRecordStart();
	
	recTime = 0;

	...
	
	recordTimer = setInterval(function() {
		
		recTime = recTime + 1;
	...

    } , 1000);
}

function fn_insertRecordFile() {
	
	var file = fileURL.substr(fileURL.lastIndexOf('/') + 1);
	
	var options = new FileUploadOptions();
	options.fileKey = "file";
	options.fileName = file;
	options.mimeType = "audio/mp3";

	var params = {
			mdSj : file,
			uuid : encodeURI(device.uuid)
				};
	options.params = params;

	var ft = new FileTransfer();
	
	ft.upload(fileURL, loadServer + "/mda/mediaRecordUpload.do", fn_insertSuccess, fn_error, options);
}
}

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

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

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

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

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

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

• 프로젝트 선택 > 오른쪽 클릭 > Run As > Android Application

• 상단의 메뉴 > Run As > Android Application

• 실행할 타겟 선택 > 에뮬레이터, 디바이스(디버깅모드)

• 디바이스를 이용한 실행 화면

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

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

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

console.log의 작성 방법은 다음과 같다.

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

디버깅 코드가 실행 되면 아래와 같은 메시지를 개발도구의 콘솔 메시지 창에서 볼 수 있다.

Media 디바이스 API 가이드 프로그램 에서는 디버깅을 위하여 다음과 같이 콘솔 정보를 출력한다.

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

• Cordova : Click
  
• UX/UI 라이브러리 : jQuery MobileClick