Chapter 2. Capturing, Storing, and Sharing Photos

For many people, photography is a collaborative and social activity. This is not just a new perspective. Even the pioneers of photography spent long hours sharing their creative processes with family, students, models, and curious members of the public, who hoped to be immortalized in this new art form.

Today's technology enables people to collaborate and socialize in a short time and at a great distance. As we discussed in the previous chapter, the iPhone offers a set of unobtrusive and intuitive tools to any user who wants to capture, edit, and share photos from this small screen. For better or worse, a few taps of the user's fingers have replaced all the manual work of the studio, darkroom, print shop, and delivery service.

This chapter addresses the technical challenges of developing a mobile workflow for the social photographer. We will accomplish the following tasks:

• Configure the camera, including focus and exposure settings

• Process images...

Planning a photo sharing application

When it opens, LightWork will present a vintage photograph and toolbar containing a few items. The following screenshot shows it all:

This bucolic image is an early color photograph, shot in 1902 by Adolf Miethe, a German photographer, professor, and inventor. The photo almost looks like a painting due to its coarse grain and pastel colors. However, it is a true example of a color photographic process. Miethe captured a scene on three photographic plates behind three different filters: red, green, and blue. Then, to recreate a multicolored image, he superimposed the three images using a projection process with different colors of light or a printing process with different dyes. Similar techniques are still in use today in our digital sensors, monitors, and printers.

LightWork will also be capable of displaying a live preview from a camera. However, for our purposes, a static (still) image is also a useful preview. A static image (unlike a camera preview...

Configuring the project

Create an Xcode project named LightWork using the Single View Application template. Configure the project according to the instructions in the Configuring the project section in Chapter 1, Setting Up Software and Hardware. Next, we will take a few additional configuration steps because LightWork depends on more frameworks and requires a camera.

Adding frameworks

Besides its dependency on opencv2.framework, LightWork also depends on the following standard frameworks from the iOS SDK:

• Accelerate.framework: This is optional but recommended because it enables OpenCV to use advanced optimizations

• AssetsLibrary.framework

• AVFoundation.framework

• CoreGraphics.framework

• CoreMedia.framework

• CoreVideo.framework

• Photos.framework

• QuartzCore.framework

• Social.framework

• UIKit.framework

Add these frameworks to the Build Phases | Link Binary With Libraries section of the project settings.

Specifying the camera requirement

Currently, there is a camera in all devices that support...

Defining and laying out the view controller

As discussed in the previous chapter, we may declare GUI elements in a view controller's source code and lay them out in a storyboard. Thus, to begin, let's open ViewController.m and define the private interface of our ViewController class. The interface depends on headers from the iOS SDK's Photos and Social frameworks as well as the OpenCV framework. Moreover, it depends on headers that define the public interfaces of our own classes, ViewController and VideoCamera. The latter class will handle many aspects of camera input and video display and we will write it later in the Controlling the camera section. Let's import these dependencies by adding the following code at the start of ViewController.m:

#import <Photos/Photos.h>
#import <Social/Social.h>

#import <opencv2/core.hpp>
#import <opencv2/imgcodecs.hpp>
#import <opencv2/imgcodecs/ios.h>
#import <opencv2/imgproc.hpp>

#import "ViewController.h"
#import ...

Controlling the camera

The iOS SDK and OpenCV provide several programming interfaces for camera control. Within the iOS SDK, AVFoundation is the general-purpose framework for all recording and playback of audiovisual (AV) content. AVFoundation provides complete access to the iOS camera's parameters, including the image format, focus, exposure, flash, frame rate, and digital zoom (crop factor). However, AVFoundation does not solve any GUI problems. The application developer may create a custom camera GUI, use a higher-level framework that provides a GUI, or automate the camera so that it operates without GUI input. AVFoundation is sufficiently flexible to support any of these designs, but this flexibility comes at a price as AVFoundation is complex.

Note

The official AVFoundation Programming Guide is located at https://developer.apple.com/library/ios/documentation/AudioVideo/Conceptual/AVFoundationPG.

The iOS SDK implements a standard camera GUI in the UIImagePickerController class, which...

Working with various color formats

As we have seen, OpenCV and the iOS SDK work with various formats for color and grayscale images and sometimes we need to convert between formats. Let's step back from the code for a few moments to discuss the differences between formats and the problems that can arise if we do not perform the correct conversions.

RGB, BGR, RGBA, and BGRA

You probably learned the 24-bit RGB color format long ago, the first time you picked a custom color in a paint program or word processor. A pixel's color is represented by a sequence of three values, each with a range of 0 to 255 (that is, 8 bits or 1 byte). The first value is the color's red component or channel, followed by green, and lastly blue. For example, the color of an amber traffic light is (255, 126, 0), a mixture of lots of red and some green, but no blue. A series of pixel data makes an image.

The 24-bit BGR format simply reverses the channel order. For example, the color of the amber traffic light is (0, 126...

Starting and stopping the busy mode

Remember that we want to show an activity indicator and disable all the toolbar items while LightWork is busy saving or sharing a photo. Conversely, when LightWork is no longer busy with the photo, we want to hide the activity indicator and re-enable the toolbar items. As these actions affect the GUI, we must ensure that they run on the app's main thread.

Note

If our code is running on a background thread, nothing will happen when we try to show or hide the activity indicator.

To run code on a specific thread, we can make a post to the thread's event queue. The iOS SDK provides a C function, dispatch_async, which takes a target queue and code block as arguments. Another C function, dispatch_get_main_queue(), enables us to get the main thread's event queue. Let's use these functions in the following helper method, which starts the busy mode:

- (void)startBusyMode {
  dispatch_async(dispatch_get_main_queue(), ^{
    [self.activityIndicatorView startAnimating...

Saving an image to the Photos library

When the user presses the Save button, we start the busy mode. Then, if the video camera is running, we prepare to save the next frame. Otherwise, we immediately save the processed version of the static image. Here is the event handler:

- (IBAction)onSaveButtonPressed {
  [self startBusyMode];
  if (self.videoCamera.running) {
    self.saveNextFrame = YES;
  } else {
    [self saveImage:self.imageView.image];
  }
}

A helper method, saveImage:, is responsible for the transactions with the filesystem and Photos library. First, we try to write a PNG file to the application's temporary directory. Then, we try to create an asset in the Photos library based on this file. As part of this process, the file is automatically copied. We call other helper methods to show an alert dialog, which will describe the success or failure of the transaction. Here is the method's implementation:

- (void)saveImage:(UIImage *)image {
  
  // Try to save the image to a temporary...

Displaying an alert

To build a typical alert, we need a title, a message, and one or more action buttons. Each action button has a block of code that runs when the user presses the button.

As an example, let's study a helper method that displays an error popup with an OK button. When the user presses the OK button, the alert will be dismissed and the app will stop its busy mode. Here is the implementation:

- (void)showSaveImageFailureAlertWithMessage:(NSString *)message {
  UIAlertController* alert = [UIAlertController
    alertControllerWithTitle:@"Failed to save image"
    message:message preferredStyle:UIAlertControllerStyleAlert];
  UIAlertAction* okAction = [UIAlertAction actionWithTitle:@"OK"
    style:UIAlertActionStyleDefault
    handler:^(UIAlertAction * _Nonnull action) {
      [self stopBusyMode];
    }];
  [alert addAction:okAction];
  [self presentViewController:alert animated:YES completion:nil];
}

Sharing an image via social media

If LightWork successfully saved the image to the Photos library, we want to show the user another alert with sharing options. The following method checks the availability of various social media platforms and builds an alert with an action button for each available platform. Despite targeting different social media platforms, the action buttons are similar to each other, so we build them in a helper method, shareImageActionWithTitle:serviceType:image:. We also provide a Do not share action button that does nothing except stop the app's busy mode:

- (void)showSaveImageSuccessAlertWithImage:(UIImage *)image {
  
  // Create a "Saved image" alert.
  UIAlertController* alert = [UIAlertController
    alertControllerWithTitle:@"Saved image"
    message:@"The image has been added to your Photos library. Would you like to share it with your friends?"
    preferredStyle:UIAlertControllerStyleAlert];
  
  // If the user has a Facebook account on this device, add a...

Running the application

At runtime, LightWork will prompt the user once for permission to access the camera and again for permission to access the Photos library. If the user refuses, the app will not function fully. However, the user may grant (or revoke) these permissions later in the LightWork section of the Settings application.

Summary

Already, in the LightWork app, we have implemented a custom workflow for mobile photographers. Particularly, we have focused on enabling the user to configure the camera, select image processing effects, see a preview in real time, and share an image via social media. However, we can still do more. We will devote the next chapter to the goal of expanding LightWork's repertoire of image processing effects. At the same time, we will explore the concepts of multiple exposure, image comparisons, and augmented reality. LightWork will become more than a photography app; it will also help us visualize the relationship between two scenes and thus deepen our appreciation of computer vision.