Photo with iPad/iPhone

You could make an iOS (iPhone/iPad) application starting from the AIR-based Webcam recipe, but it might complicate matters if you then want to use this capability as part of a custom-designed user interface. This is owing to the licensing restrictions surrounding the iOS, where all applications must be signed with a certificate. A certificate can only be obtained by first becoming an official iOS developer which can be a somewhat complex and time-consuming process. 

iOS devices come with a very capable web browser, which allows for many simpler applications to be developed as “web apps.” This method can be used to develop custom apps to control WATCHOUT (see other recipes on how to control WATCHOUT from an iOS device). However, the iOS web browser doesn’t provide direct access to the built-in camera.

Fortunately, a “helper app” comes to the rescue:

http://itunes.apple.com/us/app/picup/id354101378
 

By first installing this app on your iOS device, you can actually access the built-in camera from a web app. When you want to take a photo, the PICUP app is temporarily brought to the front, allowing you to take the picture. Once taken, it will be uploaded to the dynamic image server, and you’ll be returned to the web page, so you can take another picture. You can learn more about this app, and how it works here:

http://picupapp.com/
 

The PICUP app is all that needs to be installed on your iOS device. The rest of the application is installed on the web server used to communicate with the Dynamic Image Server.

Web Server Configuration

This recipe uses the same web server as the one titled “Uploading with a Browser”, but adds a folder containing three files to take the photo and upload it to the image server. Download the attached “MobileSafariImage.zip” file, unpack it, and copy the resulting “MobileSafariImage” folder, in its entirety, to c:\wamp\www, so the folder ends up as c:\wamp\www\MobileSafariImage. This folder contains three files:

  • index.php is the main application file. It displays a single button on screen, letting you take the picture. It also includes some code to activate and configure the PICUP app
  • picup.js provides the interface between the application and the PICUP app, which is activated automatically when you press the button to take the picture. The latest version of this file can be obtained from picupapp.com (see above)
  • postMSImage.php receives the file uploaded by the webcam client application, and stores it in “C:\DynImages\WebcamImage.jpg”.

CAUTION: The PHP code used in this example is deliberately kept as simple as possible. It doesn’t perform any error handling, or verification of the file supplied by the user. Do not use this on a publicly accessible network as is, as doing so may pose a security risk.

Once all of the above is in place, make sure that the WAMP server is running, then browse to the newly installed folder on the server using your camera-equipped iPhone/iPad. This is done by opening the Safari app and entering the address of the above folder, like this:

192.168.0.48/MobileSafariImage
 

Replace the initial group of digits with the IP address of your server computer. This should display a page with a single button titled “Take a Picture…”. If not, make sure you have the separate PICUP app installed on your iOS device, as described above. Pressing this button switches to the PICUP app, allowing you to take a picture and send it to the server. It should appear as a file named “iOSImage.jpg” in the c:\DynImages folder.

Configuring the Dynamic Image Server

The WATCHOUT Dynamic Image Server needs to be configured exactly as in the “Uploading with a Browser” recipe. Make sure the image server is running before proceeding. Remember to start it using a shortcut that points the image server to the “C:\DynImages" folder.

WATCHOUT Show

Download and extract the attached “iOS-Picture.zip” file. Open the resulting “iOS-Picture.watch” in WATCHOUT. Make sure the “Picture” media item is configured with the IP address of the dynamic image server. Now click the single cue on the main timeline to display the image.

 

Files attached to this recipe: