Languages

Menu
Sites
Language
How to access to camera and take a simple picture

Hello,

I am trying to access to the camera of the emulator and to take a picture (with the save location path).

I found the following example https://developer.tizen.org/community/tip-tech/using-rear-camera-tizen-web-application

I want that, once i click on the shutter button, the taken picture will be displayed with the following message ("Do you want to save the picture? Yes/NO").... Of course Yes & No are 2 buttons .

I manage to get the taken image shown as a thumbnail (not on the entire screen size)!

I hope that you understand me! Thx in advance.

 

Responses

6 Replies
karray gargouri

in another tutorial, it's said that this statement:

 

<input type="file" accept="image/*" />

allow user to choose between selecting picture from gallery or from the phone camera... I tested it through the webapp, but I can, ONLY, choose from the gallery (the camera icon is not shown).

is it correct?

karray gargouri

Here is a screenshot of my problem

https://ibb.co/nkXtPc

karray gargouri

I modified the accept attribute like this:

<input type="file" accept="image/*,capture=camera"   />

but still not getting the camera choice in the select application window!

karray gargouri

Where is the camera application/feature? :    http://ibb.co/iorMCx
 

is it normal? is there anything wrong with the emulator?

André Reus

hi karray gargouri, You may use Application control to launch another application from your application.. Tizen provides some common application controls to make this kind of work easy ... Here is app control example to launch camera app

var appControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/create_content',
                                              null, 'image/*', null, null, null);

tizen.application.launchAppControl(appControl, null, function() {
    console.log('launch application control succeed');
}, function(e) {
    console.log('launch application control failed. reason: ' + e.message);
}, null);

https://developer.tizen.org/development/guides/web-application/application-management/application-information-and-controls/application-controls/common-application-controls#camera

And another information: Emulator is not giving you real environment to test/check camera application. Running/Debugging in real device would be helpful. 

karray gargouri

Thank you for your reply André Reus.

Another point, is that when I run the following code:

JAVASCRIPT

var fileInput = evt.target.files;
    	if(fileInput.length>0){
		
			console.log('File length bloc!');
			
			var windowURL = window.URL || window.webkitURL;
			
			//picture url
			var picURL = windowURL.createObjectURL(fileInput[0]);
			if(picURL !=null){
				console.log(picURL);
				alert(picURL);
			}
			
			
			//get canvas
			var photoCanvas = document.getElementById("capturedPhoto");
			console.log('photo canvas statement!');
			
			var ctx = photoCanvas.getContext("2d");
			console.log('ctx statement!');
			
			//create image
			var photo = new Image();
			
		
			photo.onload = function(){
			console.log('Photo onload  bloc!');
			  //draw photo into canvas when ready
			  ctx.drawImage(photo, 0, 0, 250, 250);
			};
			
			//load photo into canvas
		
				photo.src = picURL;
				console(' === '+photo.src);
			
			//release object url
			windowURL.revokeObjectURL(picURL);


		}
 
HTML
 
<canvas id="capturedPhoto" width="250" height="250">
When I execute my code, the canvas is getting the picture (with an error in the console output saying that:
 
console is not a function  ----> referring to this line:
 
console(' === '+photo.src);

but everything works fine, the problem is when I try to fixed it like that:

console.log(' === '+photo.src);

the canvas didn't get the choosen picture and remain "empty" !!!!

Any idea about this point?!