How do I Capture Images in LiveCode Mobile?

This lesson describes how to detect the camera features of iOS and Android devices and take photos from cameras that are available. Screen captures and sample code are provided.

Introduction

iOS and Android devices come with a number of features that can be accessed via LiveCode. In this lesson we will see how to detect what camera features are available and how to tell LiveCode how to use the camera features. Taking a photo with LiveCode launches the native camera control interface on the iOS and Android device and then returns control back to LiveCode.

Creating the Test Buttons

Creating the Test Buttons

In this example we create six buttons that allow you to probe a device for available cameras and take photos using the cameras that are available on the device. The six buttons have the following code associated with them.

The camera button allows you to take a picture with the default device camera:

on mouseUp
	# the X, Y dimensions for an image are not supported on Android and are ignored
	mobilePickPhoto "camera", 212, 122
	if the result is text then
		put the result into image "The_Image"
	else
		put the result into field "The_Result"
	end if
end mouseUp

The front camera button allows you to take a picture with the front device camera:

on mouseUp
	# the X, Y dimensions for an image are not supported on Android and are ignored
	mobilePickPhoto "front camera", 212, 122
	if the result is text then
		put the result into image "The_Image"
	else
		put the result into field "The_Result"
	end if
end mouseUp

The rear camera button allows you to take a picture with the rear device camera:

on mouseUp
	# the X, Y dimensions for an image are not supported on Android and are ignored
	mobilePickPhoto "rear camera", 212, 122
	if the result is text then
		put the result into image "The_Image"
	else
		put the result into field "The_Result"
	end if
end mouseUp

The features button allows you to detect and list the camera features that are available on the device:

on mouseUp
	mobileCameraFeatures
	put the result into field "The_Result"
end mouseUp

The features front button allows you to detect and list the front camera features that are available on the device:

on mouseUp
	mobileCameraFeatures "front"
	put the result into field "The_Result"
end mouseUp

The features rear button allows you to detect and list the rear camera features that are available on the device:

on mouseUp
	mobileCameraFeatures "rear"
	put the result into field "The_Result"
end mouseUp

In a purpose built application you may want to combine the commands and raise custom dialogs to inform the user what cameras, if any, are available.

Detecting the Features

Detecting the Features

You can detect all of the camera features that are available by selecting the features button, as is shown in the above figure. This would return a list of cameras that are available or empty, if the device has no cameras available. Similarly, pressing the features front or features rear buttons lists the features that are available to the specific camera selected, or empty if the selected camera is not supported.

Trying to take a Photo with an Unavailable Camera

Trying to take a Photo with an Unavailable Camera

If a camera was selected for the purpose of taking a photo, and the devices did not support that camera, then mobilePickPhoto returns a string with the text: "source not available", as is shown in the above figure.

Taking a Photo

Taking a Photo

If a camera was selected that was supported by the iOS device, then the native device camera control is launched, allowing you to take and retake photos.

Displaying the Photo on the LiveCode Card

Displaying the Photo on the LiveCode Card

After you have taken a successful photo, such as the one shown in this example, control is returned to the LiveCode application. The size of the displayed images is controlled by parameters passed to mobilePickPhoto.

Note: The parameters passed to mobilePickPhoto that control the size of the photo are ignored in Android. To set the image size to be used on Android use the following

set the width of the templateImage to <width> 
set the height of the templateImage to <height> 
mobilePickPhoto "camera"

13 Comments

John

Based on the new release notes, it looks like the mobilePickPhoto function is now supported. Right?

John

Sorry... I misunderstood the android statement on the parameters.

Great tutorial! Thanks!

Kristian

Would it be possible to take a photo automatically? Or is control lost from the app when going into "the camera app" or would it be possible to create an external that connects directly to camera, and automatically takes picture?

Hanson Schmidt-Cornelius

Hi Kristian,

if you are trying to take a photo through LiveCode then this is accomplished via the default photo application. There is no built in feature to do this. If you would like your application to run on iOS and Apple provides access to the camera through appropriate APIs, then I cannot see any reason why you should not be able to create an external that interfaces with your LiveCode application.

Kind Regards,

Hanson

~Roger

This #comment is EXTREMELY annoying, as it offers no solution!

# the X, Y dimensions for an image are not supported on Android and are ignored

As a cross-platform tool, there is no mention in this "lesson" of how to control the image size on an Android device. As a service to others who might want to do so, here's what works:

set the width of the templateimage to 640
set the height of the templateimage to 480
mobilePickPhoto "camera"

Yes, I know it's in the Docs, but again, this is suppose to be a lesson for noobs.

Elanor Buchanan

Hi Roger

Thank you for your comment, I have updated the lesson to include your suggestion.

Kind regards

Elanor

Michel van der Kleij

Just starting out with LiveCode and trying to develop an app that relies heavily on GPS, camera etc. However, I noticed that the mobilePickPhoto function throws an unkown handler error in the IDE. Is there a way you can test that without the emulator (haven't tried that yet, it's VERY slow)? Perhaps install extra library or so?

Elanor Buchanan

Hi Michel

The best thing to do when using mobile only commands in your stacks is just to put an if statement around them, which checks the environment function, so that they are only executed when your app is running on a mobile device or sumulator. In the IDE you can either do nothing, use a placeholder control or default data or use a desktop equivalent e.g.

if the environment is "mobile" then
mobilePickPhoto "camera"
else
show image "placeholder"
end if

Kind regards

Elanor

Michel van der Kleij

Thanks Elanor, that sounds like a good suggestion. Does mean that you need at least an emulator for testing those commands though, but that's just part of the design I guess. Love the product and pretty determined to dive in deeper ;-)

Elanor Buchanan

Hi Michel

Yes, these commands use the native controls provided by the OS so for testing on iOS or Android you need the iOS simulator or Android emulator, or a physical device of course.

I'm glad to hear you are enjoying working with LiveCode, all the best as you dive in deeper. If you have any questions or our lessons please do ask here, or at StackOverflow http://stackoverflow.com/questions/tagged/livecode, or on our forums http://forums.livecode.com/ if your question is more general or not on a specific lesson. There are always community members willing to help out.

Kind regards

Elanor

Ulrich

I just tried to follow this lesson.
There is an error in the example, there is no result, instead the result of mobilePickPhoto is a new image.
Because of this, the scripts do not work, they have to be

if the result is text then
put the result into fld "the_result"
else
put the last image into image "the_image"
delete the last image
end if

Tate

How can you put the image within the image widget instead of populating in the center of the card?

Elanor Buchanan

Hi Tate

When a picture is taken a new image is created on the card. If there is an image control on your card that you want to populate instead you could do

set the text of image "The_Image" to the text of the last image of this card
delete the last image of this card

in this case the last image will be the one that was created when the picture was taken.

I hope that helps.

Kind regards

Elanor

Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.