Camera Introduction

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

Taking Pictures

To take a picture using the camera of the mobile device, the takePicture method of the Camera object is used. The takePicture method runs the default camera app of the mobile device, allowing you to take a picture and obtain the resulting image.

The image obtained by the takePicture method execution is saved as a file in the path assigned to the app. The path of the file can be obtained through the URL property of CameraEventInfo, but as it is stored in the unique area of the app, it cannot be checked through the album app or file explorer other than the demo app.

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

To save the captured photo image separately in the album, the usegallery property is used. If you set the usegallery property, a copy of the captured photo is created and saved in the album.

${sample}

The following is an example of executing the takePicture method to obtain the image and output its information.

To take a picture, touch the Take a picture button. This will start the camera app of the mobile device and allow you to take a picture. When the picture is taken, the resulting image is displayed in ImageViewer and the log is output in TextArea at the bottom.

${sample_element}

Camera > takePicture

This is the method to take a picture and obtain the image by operating the camera app of the mobile device.

Camera > usegallery

This is the property that sets whether to make a copy of the photo taken on the mobile device and save it in the album. If the property value is not set, then it is applied as true.

Camera > oncapture

This is the event that occurs when the takePicture method execution is successful. You can obtain image information through the CameraEventInfo object in the event function.

System > convertRealPath

This is the method that converts the path containing Alias, such as %USERAPP%, %CACHE%, into the actual absolute path.

${sample_step}

Add the Camera object. The added object can be checked in the Invisible Object window.

Place the Button, ImageViewer, and TextArea components to configure the screen appropriately as shown in the example figure. Components and objects used to configure the screen are as follows.

Write the function that will operate when the Take a picture button is touched as follows.

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

When the takePicture method is performed, the default camera app of the mobile device is executed. The oncapture event occurs when taking a picture and obtaining the image are successful and the onerror event occurs when they fail.

• oncapture Event Function

oncapture is the event that is called when the takePicture method execution is successful. In the oncapture event function, the image obtained from the camera is output to ImageViewer, and event information is output to the TextArea component.

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 Event Function

onerror is the event that is called when the takePicture method execution fails. In the onerror event function, then the error message is output to check what kind of problem there was.

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

	this.TextArea00.set_value(strResult);
};

Touch the Take a picture button to see if the camera app is running, and then take a picture to see if the results are output correctly on the screen.

Setting Picture Format

The properties of the image captured using the takePicture method follow the settings of the camera app. In general, the settings of the camera app are set to suit the user’s preference, so the format, size, and quality of the captured images vary. If there is an image format that the user desires, then you can get the image of the desired format by setting the properties of the Camera object.

The properties that can be set in the Camera object are image transmission format, encoding format, format, quality, width, and height information.

${sample}

The following is an example of obtaining the image by setting the image property of the Camera object and executing the takePicture method.

To take a picture, touch the Take a picture button. This will start the camera app of the mobile device and allow you to take a picture. When the picture is taken, the resulting image is displayed in the Image tab at the bottom and the log is output in the Information tab.

To take a picture with a specific format, set the image transmission method, encoding type, quality, and size in the menu at the top.

• Image Type: When "URL" is set, the location information of the image is transmitted in the form of URL, and when "imagedata" is set, the image is transmitted in the form of the object. The result value can be checked in the e.url, e.imagedata properties in the oncapture event of the Camera object.

• Encoding: It sets the image format to JPEG or PNG.

• Quality: It sets the image quality. The value that can be set is from 0 to 100.

• Width, Height: It sets the image size. When set to 0 or blank, it is set to the size of the original image.

${sample_element}

Camera > encodingtype

This is the property that sets the encoding format of the image. It supports JPEG and PNG formats, and the default is JPEG.

Camera > imagequality

This is the property that sets the quality of the image. It can be set to a value between 0 and 100 and is applied only when the encodingtype is JPEG format.

Camera > imagewidth

This is the property that sets the width of the image. If the property value is not set, then it is set to 0, and the original image width is used. If the proportion with the height does not match when setting the width, then the image may be distorted.

Camera > imageheight

This is the property that sets the height of the image. If the property value is not set, then it is set to 0, and the original image width is used. If the proportion with the width does not match when setting the width, then the image may be distorted.

Camera > gettype

It sets the method of the captured image being transmitted. When set to URL, the location information of the image file is transmitted, and when set to imagedata, it is transmitted to the object.

Camera > takePicture

This is the method that takes a picture and obtains the image by running the camera app of the mobile device.

Camera > oncapture

This is the event that occurs when the takePicture method execution is successful. Image information can be obtained through the CameraEventInfo object in the event function.

${sample_step}

Add the Camera object. The added object can be checked in the Invisible Object window.

Place the Static, Radio, Spin, and Edit components to configure the screen, and the Tab, ImageViewer, TextArea components to output images and logs appropriately as shown in the example figure. Components and objects used to configure the screen are as follows.

Write the function that will operate when the Take a picture button is touched as follows.

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

After setting the value input from the user in the property of the Camera object, call the takePicture method.

When the takePicture method is performed, the default camera app of the mobile device is executed. The oncapture event occurs when taking a picture and obtaining the image are successful, and the onerror event occurs when they fail.

• oncapture Event Function

oncapture is the event that is called when the takePicture method execution is successful. In the oncapture event function, the image obtained from the camera is output to the ImageViewer, and event information is output to the TextArea component.

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 Event Function

onerror is the event that is called when the takePicture method execution fails. In the onerror event function, the error message is output to check what kind of problem there was.

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

Touch the Take a picture button to check if the camera app opens normally. After setting the desired image format, take a picture and check that the captured image is output according to the settings.