Toggle Between the Front- and Back-Facing Cameras

Most mobile Android devices come with two built-in cameras, a front-facing camera intended for video phone or Skype calls and self portraits, and a back-facing camera for capturing video and still images at a high resolution. We need a UI button that toggles between the front and back camera. Let’s also activate the flash that’s built-into most back-facing cameras, and add an additional pair of buttons controls to start and stop the camera. The final app then looks like Figure 19, Camera Preview App, on page 110.

Figure 19—Camera Preview App. The illustrated UI allows to start and stop the camera, toggle between the front- and back-facing camera, and activate the built-in flash.

Android lists all built-in device cameras and allows us to pick the one we’d like to work with. For instance, the Nexus S uses the camera index id ⁰ for the rear camera, and ¹ for the front camera. Future Android devices might add more cameras to the device, potentially for 3D applications, so having an enumerated list enables Android OS to incorporate them.

Let’s build on the previous sketch on page 107, adding some camera controls that will remain pretty much the same throughout the chapter. Because this sketch is longer than the previous one, we’ll separate it into two tabs: a main tab containing the essential ^setup() and ^draw() methods, which we’ll name Cam-Chapter 5. Using Android Cameras

•

eraFrontBack (identical to the sketch folder). And a second tab, which we’ll call CameraControls, containing all the methods we need to ^read() the camera preview, start() and ^stop() the camera, and the UI buttons we’ll use to control the camera via touch screen.

Separating the code this way helps us reduce complexity within the main tab, and focus on relevant code the projects we are working on. We’ll store each tab in its own Processing source file, or ^.pde file, inside the sketch folder. You can always check what’s inside your sketch folder using the menu ^Sketch→ Show Sketch Folder, or the shortcut ^K.

Let’s first take a look at the main tab:

Camera/CameraFrontBack/CameraFrontBack.pde import ketai.camera.*;

KetaiCamera cam;

void setup() {

orientation(LANDSCAPE);

cam = new KetaiCamera(this, 640, 480, 30);

println(cam.list());

❶

// 0: back camera; 1: front camera cam.setCameraID(0);

In the main CameraFrontBack tab, we’ve added new features:

❶ Print all available device cameras to the Processing Console using the ^list() method included in KetaiCamera

❷ Set the camera to the back-facing camera id 0 via setCameraID()

❸ Increase the textSize() for the UI buttons to ²⁴ pixels

❹ Call the custom drawUI() method, taking care of drawing UI buttons The ^draw() method contains only a call to the ^image() method, used for displaying the camera preview, and a call to the custom ^drawUI() method we defined for our UI elements.

Now let’s explore the second sketch tab called CameraControls, where we’ll keep all the code that controls the camera:

Camera/CameraFrontBack/CameraControls.pde

if (mouseX > 0 && mouseX < width/4)

❺

else if (mouseX > width/4 && mouseX < 2*(width/4))

❻

else if (mouseX >2*(width/4) && mouseX < 3*(width/4))

❼

{

Chapter 5. Using Android Cameras

•

if (cam.isFlashEnabled())

❽

cam.disableFlash();

else

cam.enableFlash();

} } }

void onCameraPreviewEvent() {

cam.read();

}

void exit() {

cam.stop();

}

In this CameraControls tab, we use the following UI elements and camera methods to complete the following steps:

❶ Display the UI on the screen using a custom void function called ^drawUI(). Void functions execute but don’t return a value. The UI in this example consists of buttons that use half-transparent rectangles for their back-ground, and text labels for their names.

❷ Check if the cameras is running using the boolean method isStarted(). If the method returns ^TRUE, we display "stop", otherwise "start"

❸ Capture touch screen input for camera controls using mousePressed()

❹ Check if user is interacting with the UI at the top of the screen using the mouseY constant. If we receive user input within the top ⁴⁰ pixels of the screen, we continue checking the horizontal position via ^mouseX

❺ Check if the user presses the leftmost button to start and stop the camera.

Each button occupies one fourth of the screen width, so we check if the horizontal tap position is within the range ^0..width/4. We take the same approach for the other buttons

❻ Check if the user taps the second button, responsible for toggling between the rear and the front camera. We acquire the current camera id using getCameraID(), and toggle using setCameraID()

❼ Check if the user taps the third button, responsible for toggling the camera flash on and off.

❽ Check the flash status using the isFlashEnabled() method and toggle the flash by calling enableFlash() or disableFlash(), depending on the returned boolean value

Let’s go ahead and test the app now.

Run the App

Load or enter the two tabs of the sketch, run it on your device, and take a look at the Processing Console. You should see a list of all the built-in cameras on your device with their respective ids, as shown below.

[camera id [0] facing:backfacing, camera id [1] facing:frontfacing]

❮

When the app launches, the rear-facing camera becomes the default camera, but remains paused until we start it up. Press the "start" button now. The camera preview should appear on the screen at the defined resolution of 640x480 pixels. Toggle the camera from the front to the back using the "camera"

button. Start and stop the "flash". The camera flash belongs to the back-facing camera and works only when the rear camera is active.

Now that we know how to preview and control the camera, it’s time to put it to work—let’s snap some pictures. In our next project, we’ll learn how to store images on the device.