Camera 소개

Camera는 모바일 장치의 기본 카메라 앱을 사용하여 사진을 촬영하는 기능을 수행하는 오브젝트입니다. 단순한 촬영뿐 아니라 사진의 크기와 품질도 설정할 수 있습니다. 단, 이미지만을 지원하므로 카메라 앱 실행시 동영상 촬영 기능은 자동으로 비활성화됩니다.

사진찍기

모바일 장치의 카메라를 이용해 사진을 찍으려면 Camera 오브젝트의 takePicture 메소드를 사용합니다. takePicture 메소드는 모바일 장치의 기본 카메라 앱을 수행시켜 사진을 찍을 수 있게 해주고 그 결과 이미지를 얻을 수 있게 해줍니다.

takePicture 메소드 수행으로 얻어진 이미지는 앱에 할당된 경로에 파일로 저장됩니다. 파일의 경로는 CameraEventInfo의 url 속성을 통해 얻을 수 있으나 앱의 고유 영역에 저장되므로 데모 앱 이외의 앨범 앱이나 파일 탐색기 등을 통해서는 확인할 수 없습니다.

//data/data/com.tobesoft.np17demodev/files/NEXACRO/_resource_/_devicepics_/1522128907601.JPEG

촬영한 사진 이미지를 앨범에 별도로 저장하려면 usegallery 속성을 사용합니다. usegallery 속성을 설정하면 촬영한 사진의 복사본을 만들어 앨범에 저장해줍니다.

예제

다음은 takePicture 메소드를 수행하여 이미지를 얻고 그 정보를 출력하는 예제입니다.

사진을 찍으려면 Take a picture 버튼을 터치합니다. 그러면 모바일 장치의 카메라 앱이 구동되며 사진을 찍을 수 있습니다. 사진을 찍으면 그 결과 이미지를 ImageViewer로 보여주며 로그는 하단의 TextArea에 출력됩니다.

예제에서 사용한 핵심 기능

Camera > takePicture 메소드

모바일 장치의 카메라 앱을 수행하여 사진을 찍고 그 이미지를 얻는 메소드입니다.

Camera > usegallery 속성

모바일 장치에서 촬영한 사진의 복사본을 만들어 앨범에 저장할지 설정하는 속성입니다. 속성 값을 설정하지 않으면 true로 적용됩니다.

Camera > oncapture 이벤트

takePicture 메소드의 수행이 성공했을 때 발생하는 이벤트입니다. 이벤트 함수에서 CameraEventInfo 객체를 통해 이미지 정보를 얻을 수 있습니다.

System > convertRealPath 메소드

%USERAPP%, %CACHE% 등과 같은 Alias가 포함된 경로를 실제 절대 경로로 변환해주는 메소드입니다.

예제 구현 방법

Camera 오브젝트를 추가합니다. 추가된 오브젝트는 Invisible Object 창에서 확인할 수 있습니다.

화면을 구성하기 위한 Button, ImageViewer, TextArea 컴포넌트를 예제의 그림과 같이 적절히 배치합니다. 화면 구성을 위해 사용한 컴포넌트 및 오브젝트는 다음과 같습니다.

Take a picture 버튼을 터치했을 때 동작할 함수를 다음과 같이 작성합니다.

this.btn_take_picture_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Camera00.takePicture();
};

takePicture 메소드가 수행되면 모바일 장치의 기본 카메라 앱이 실행됩니다. 실행된 카메라 앱으로 사진을 찍고 이미지를 얻는 데 성공하면 oncapture 이벤트가 발생하고 실패하면 onerror 이벤트가 발생합니다.

• oncapture 이벤트 함수

oncapture는 takePicture 메소드 수행이 성공하면 호출되는 이벤트입니다. oncapture 이벤트 함수에서는 카메라로부터 얻은 이미지를 ImageViewer로 출력하고 이벤트 정보를 TextArea 컴포넌트에 출력합니다.

this.Camera00_oncapture = function(obj:nexacro.Camera,e:nexacro.CameraEventInfo)
{
	var strResult, strEventReason, strFilePath;

	if(e.reason === "0")
	{
		strEventReason = "\nSucceed getting images.\n";
		strFilePath = "file://"+ system.convertRealPath(e.url);

		this.ImageViewer00.set_image(strFilePath);

		strResult = strEventReason;
		strResult += "\n> Path: "+ strFilePath;
		strResult += "\n> Width: " + e.imagewidth +" px";
		strResult += "\n> Height: " + e.imageheight +" px";
	}
	else if(e.reason === "1")
	{
		strEventReason = "\nCanceled getting images.\n";
	}

	this.TextArea00.set_value(strResult);
};

• onerror 이벤트 함수

onerror는 takePicture 메소드 수행이 실패하면 호출되는 이벤트입니다. onerror 이벤트 함수에서는 어떤 문제가 있었는지 확인할 수 있도록 에러 메시지를 출력합니다.

this.Camera00_onerror = function(obj:nexacro.Camera,e:nexacro.CameraErrorEventInfo)
{
	var strResult = "["+ e.errortype +" "+ e.statuscode +"] "+ e.errormsg;

	this.TextArea00.set_value(strResult);
};

Take a picture 버튼을 터치하여 카메라 앱이 수행되는지 확인하고 사진을 촬영하여 결과가 옳바르게 화면에 출력되는지 확인합니다.

사진 포맷 설정하기

takePicture 메소드를 사용해 촬영된 이미지의 속성은 카메라 앱의 설정을 따릅니다. 일반적으로 카메라 앱의 설정은 사용자가 취향에 맞게 설정해서 사용하기 때문에 촬영된 이미지의 형식, 크기, 품질 등이 제각각입니다. 사용자가 원하는 이미지 포맷이 있을 경우 Camera 오브젝트의 속성을 설정하면 원하는 포맷의 이미지를 얻을 수 있습니다.

Camera 오브젝트에서 설정 가능한 속성은 이미지 전달 형식, 인코딩 형식, 포맷, 품질, 넓이, 높이 정보입니다.

예제

다음은 Camera 오브젝트의 이미지 속성을 설정하고 takePicture 메소드를 수행하여 이미지를 얻는 예제입니다.

사진을 찍으려면 Take a picture 버튼을 터치합니다. 그러면 모바일 장치의 카메라 앱이 구동되며 사진을 찍을 수 있습니다. 사진을 찍으면 그 결과 이미지를 하단의 Image 탭에서 보여주며 로그는 Information 탭에 출력됩니다.

특정 포맷으로 설정하여 사진을 찍으려면 상단의 메뉴에서 이미지 전달 방식, 인코딩 타입, 품질, 사이즈를 설정합니다.

• Imate Type: "url"을 설정하면 이미지의 위치 정보가 URL 형태로 전달되며, "imagedata"로 설정하면 이미지가 오브젝트 형태로 전달됩니다. 결과 값은 Camera 오브젝트의 oncapture 이벤트에서 e.url, e.imagedata 속성에서 확인할 수 있습니다.

• Encoding: 이미지 형식을 JPEG 혹은 PNG로 설정합니다.

• Quality: 이미지 품질을 설정합니다. 설정 할 수 있는 값은 0~100 입니다.

• Width, Height: 이미지의 크기를 설정합니다. 0 혹은 빈값으로 설정하면 원본 이미지의 크기로 설정됩니다.

예제에서 사용한 핵심 기능

Camera > encodingtype 속성

이미지의 인코딩 형식을 설정하는 속성입니다. JPEG와 PNG 형식을 지원하며 기본값은 JPEG입니다.

Camera > imagequality 속성

이미지의 품질을 설정하는 속성입니다. 0~100사이의 값으로 설정할 수 있으며 encodingtype이 JPEG 형식일 경우에만 적용됩니다.

Camera > imagewidth 속성

이미지의 너비를 설정하는 속성입니다. 속성값을 설정하지 않으면 0으로 설정되며 원본 이미지 너비를 사용합니다. 너비 설정 시 높이와 비율이 맞지 않으면 이미지가 왜곡될 수 있습니다.

Camera > imageheight 속성

이미지의 높이를 설정하는 속성입니다. 속성 값을 설정하지 않으면 0으로 설정되며 원본 이미지 높이를 사용합니다. 높이 설정 시 너비와 비율이 맞지 않으면 이미지가 왜곡될 수 있습니다.

Camera > gettype 속성

촬영된 이미지가 전달되는 방식을 설정합니다. url로 설정시 이미지 파일의 위치 정보가 전달되고 imagedata로 설정 시 오브젝트로 전달됩니다.

Camera > takePicture 메소드

모바일 장치의 카메라 앱을 수행하여 사진을 찍고 그 이미지를 얻는 메소드입니다.

Camera > oncapture 이벤트

takePicture 메소드의 수행이 성공했을 때 발생하는 이벤트입니다. 이벤트 함수에서 CameraEventInfo 객체를 통해 이미지 정보를 얻을 수 있습니다.

예제 구현 방법

Camera 오브젝트를 추가합니다. 추가된 오브젝트는 Invisible Object 창에서 확인할 수 있습니다.

화면을 구성하기 위한 Static, Radio, Spin, Edit 컴포넌트, 이미지와 로그를 출력하기 위한 Tab, ImageViewer, TextArea 컴포넌트를 예제의 그림과 같이 적절히 배치합니다. 화면 구성을 위해 사용한 컴포넌트 및 오브젝트는 다음과 같습니다.

Take a picture 버튼을 터치했을 때 동작할 함수를 다음과 같이 작성합니다.

this.btn_take_picture_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Camera00.set_gettype(this.rdo_imageType.text);
	this.Camera00.set_encodingtype(this.rdo_encodingType.text);
	this.Camera00.set_imagequality(this.spn_quality.value);
	this.Camera00.set_imagewidth(this.edt_width.value);
	this.Camera00.set_imageheight(this.edt_height.value);

	this.Camera00.takePicture();	
};

사용자로부터 입력받은 값을 Camera 오브젝트의 속성에 설정한 후 takePicture 메소드를 호출합니다.

takePicture 메소드가 수행되면 모바일 장치의 기본 카메라 앱이 실행됩니다. 실행된 카메라 앱으로 사진을 찍고 이미지를 얻는 데 성공하면 oncapture 이벤트가 발생하고 실패하면 onerror 이벤트가 발생합니다.

• oncapture 이벤트 함수

oncapture는 takePicture 메소드 수행이 성공하면 호출되는 이벤트입니다. oncapture 이벤트 함수에서는 카메라로부터 얻은 이미지를 ImageViewer로 출력하고 이벤트 정보를 TextArea 컴포넌트에 출력합니다.

this.Camera00_oncapture = function(obj:nexacro.Camera,e:nexacro.CameraEventInfo)
{
	var strResult, strEventReason, strFilePath;

	if(e.reason === "0")
	{
		strEventReason = "Succeed getting images.\n";
		strFilePath = "file://"+ system.convertRealPath(e.url);
		
		this.Tab00.Tabpage1.form.ImageViewer00.set_image(strFilePath);
		
		strResult = strEventReason;
		strResult += "\n> Path: "+ strFilePath;
		strResult += "\n> Width: " + e.imagewidth +" px";
		strResult += "\n> Height: " + e.imageheight +" px";		
	}
	else if(e.reason === "1")
	{
		strEventReason = "Canceled getting images.\n";
	}
	
	this.Tab00.Tabpage2.form.TextArea00.set_value(strResult);
};

• onerror 이벤트 함수

onerror는 takePicture 메소드 수행이 실패하면 호출되는 이벤트입니다. onerror 이벤트 함수에서는 어떤 문제가 있었는지 확인할 수 있도록 에러 메시지를 출력합니다.

this.Camera00_onerror = function(obj:nexacro.Camera,e:nexacro.CameraErrorEventInfo)
{
	var strResult = "["+ e.errortype +" "+ e.statuscode +"] "+ e.errormsg;
	
	this.Tab00.Tabpage2.form.TextArea00.set_value(strResult);
};

Take a picture 버튼을 터치하여 카메라 앱이 정상적으로 오픈되는지 확인합니다. 원하는 이미지 포맷을 설정한 후 사진을 촬영하고 촬영된 이미지가 설정에 맞게 출력되는지 확인합니다.