Camera Access

Mobile Application Design and Development [./]
Spring 2010 — INFO 152 (CCN 42504)

Erik Wilde, UC Berkeley School of Information
2010-03-17

Creative Commons License [http://creativecommons.org/licenses/by/3.0/]

This work is licensed under a CC
Attribution 3.0 Unported License [http://creativecommons.org/licenses/by/3.0/]

Contents Erik Wilde: Camera Access

Contents

Erik Wilde: Camera Access

(2) Abstract

As a case study, we look at the (seemingly) simple task of how to add camera access to a mobile application. It turns out that this cannot be easily done in any Web-based application that is supposed to be working across a large range of devices. However, as an exercise of surveying the mobile ecosystem (and thus highlighting the difficulties of navigating this constantly changing landscape), in this lecture we look at the available options, and at the trade-offs involved with every of those options.



Camera Access

Outline (Camera Access)

  1. Camera Access [7]
  2. Web Technologies [9]
    1. HTML Forms [5]
    2. MMS [2]
    3. HTML5 [2]
  3. Platform-Specific Runtimes [8]
    1. Flash [2]
    2. BONDI [2]
    3. WRT [2]
    4. PhoneGap/QuickConnect [2]
  4. Native Applications [2]
Camera Access Erik Wilde: Camera Access

(4) Sharing Experiences

Memory card with integrated Wi-Fi

Camera Access Erik Wilde: Camera Access

(5) Mobile Cameras

bill-phones.jpg

Camera Access Erik Wilde: Camera Access

(6) Flickr Camera Models

flickr-cameras.png

Camera Access Erik Wilde: Camera Access

(7) Decoding Encoded Reality

QR Code for http://dret.net/lectures/mobapp-spring10/

Camera Access Erik Wilde: Camera Access

(8) Cameras and Privacy



Camera Access Erik Wilde: Camera Access

(9) Mobile Devices and Privacy



Camera Access Erik Wilde: Camera Access

(10) Mobile Platform Landscape Overview

mobile-platforms.png

Web Technologies

Outline (Web Technologies)

  1. Camera Access [7]
  2. Web Technologies [9]
    1. HTML Forms [5]
    2. MMS [2]
    3. HTML5 [2]
  3. Platform-Specific Runtimes [8]
    1. Flash [2]
    2. BONDI [2]
    3. WRT [2]
    4. PhoneGap/QuickConnect [2]
  4. Native Applications [2]

HTML Forms

Outline (HTML Forms)

  1. Camera Access [7]
  2. Web Technologies [9]
    1. HTML Forms [5]
    2. MMS [2]
    3. HTML5 [2]
  3. Platform-Specific Runtimes [8]
    1. Flash [2]
    2. BONDI [2]
    3. WRT [2]
    4. PhoneGap/QuickConnect [2]
  4. Native Applications [2]
HTML Forms Erik Wilde: Camera Access

(13) Generic File Upload

  • Forms allow general file uploads
    • most form fields are for direct data entry
    • one special form field activates the OS file selection dialog
    • this is the only access to a client's general data storage
  • Form file uploads are using the platform-specific file selection
    • files are selected based on the client's conventions
    • files are sent as multipart messages with POST requests
  • Form uploads essentially use the same mechanism as email
    • HTML forms can upload any number of files
    • servers are expected to unpack and process them
    • processing options are file storage or input to further processing


HTML Forms Erik Wilde: Camera Access

(14) HTML Form Example

<!DOCTYPE html>
<html>
 <head>
  <title>File Dialog Demo</title>
 </head>
 <body>
  <h1>File Dialog Demo</h1>
  <form action="file-uploader.php" method="post" enctype="multipart/form-data">
   <p>Name: <input type="text" name="filename" /></p>
   <p><input type="file" name="fileupload" /></p>
   <p><input type="submit" value="Upload File" /></p>
  </form>
 </body>
</html>


HTML Forms Erik Wilde: Camera Access

(15) Form Uploader Example

<!DOCTYPE html>
<html>
 <head>
  <title>File Uploader Demo</title>
 </head>
 <body>
  <h1>File Uploader Demo</h1>
  <p><?php
   $target_path = "uploads/";
   $target_path = $target_path . $_GET["filename"];
   if ( move_uploaded_file($_FILES['fileupload']['tmp_name'], $target_path) ) {
    echo "The file " . basename( $target_path ) . " has been uploaded";
   } else {
    echo "There was an error uploading the file, please try again!"; }
  ?></p>
 </body>
</html>


HTML Forms Erik Wilde: Camera Access

(16) HTML Forms Limitations

  • Not supported on all mobile devices
    • iPhone Mobile Safari always disables file upload controls in forms
  • Inconvenient for multiple uploads (frequent use case for images)
    • only one file per form control can be selected
    • additional form controls can be created via scripting
    • one form control per file in many cases is not convenient
  • Workarounds are used in different forms
    • Flickr uses Flash upload (allows selection of multiple files)
    • Facebook uses Java Applet (allows previews and preprocessing)
    • email uploads circumvent forms altogether (magic email address)


HTML Forms Erik Wilde: Camera Access

(17) Pro/Con

  • Advantages:
    • very well-established Web technology
  • Disadvantages:
    • very indirect (take picture, store it, upload it)
    • inconvenient for multiple uploads
    • not supported on some embedded devices (e.g., iPhone)
    • no support for more advanced interactions (live capture)


MMS

Outline (MMS)

  1. Camera Access [7]
  2. Web Technologies [9]
    1. HTML Forms [5]
    2. MMS [2]
    3. HTML5 [2]
  3. Platform-Specific Runtimes [8]
    1. Flash [2]
    2. BONDI [2]
    3. WRT [2]
    4. PhoneGap/QuickConnect [2]
  4. Native Applications [2]
MMS Erik Wilde: Camera Access

(19) Multimedia Phone Services

  • Multimedia Messaging Service (MMS) [http://en.wikipedia.org/wiki/Multimedia_Messaging_Service] extended SMS [http://en.wikipedia.org/wiki/SMS]
    • adding the ability to send multipart messages
  • MMS composition on phones can add attachments
  • Web-based applications could invoke MMS composition
    • there is no standard scheme for identifying MMS URIs
    • phones support for MMS URIs would take a while
    • the image is transported via an out-of-band mechanism
  • MMS implementation uses HTTP but is inaccessible to developers
    • MMS handsets retrieve receive MMS messages via HTTP
    • MMS is essentially expensive multipart email


MMS Erik Wilde: Camera Access

(20) Pro/Con

  • Advantages:
    • can use a phone's existing multimedia support
  • Disadvantages:
    • no URI scheme for MMS addressing
    • no phone support for composing MMS messages from Web content
    • out-of-band messaging
    • may incur substantial costs


HTML5

Outline (HTML5)

  1. Camera Access [7]
  2. Web Technologies [9]
    1. HTML Forms [5]
    2. MMS [2]
    3. HTML5 [2]
  3. Platform-Specific Runtimes [8]
    1. Flash [2]
    2. BONDI [2]
    3. WRT [2]
    4. PhoneGap/QuickConnect [2]
  4. Native Applications [2]
HTML5 Erik Wilde: Camera Access

(22) Camera Access on the Web

  • Hardware access is traditionally limited on the Web
    • screen-based output is the only output medium
    • input is limited to keyboard and mouse
  • Multimedia applications often bypass standard Web technologies
    • audio support is simple in Flash and other plugins
  • HTML5 APIs start targeting more advanced access to data/devices
    • camera access is identified but not yet included


HTML5 Erik Wilde: Camera Access

(23) Pro/Con

  • Advantages:
    • none
  • Disadvantages:
    • cameras not yet part of official HTML5 plans


Platform-Specific Runtimes

Outline (Platform-Specific Runtimes)

  1. Camera Access [7]
  2. Web Technologies [9]
    1. HTML Forms [5]
    2. MMS [2]
    3. HTML5 [2]
  3. Platform-Specific Runtimes [8]
    1. Flash [2]
    2. BONDI [2]
    3. WRT [2]
    4. PhoneGap/QuickConnect [2]
  4. Native Applications [2]

Flash

Outline (Flash)

  1. Camera Access [7]
  2. Web Technologies [9]
    1. HTML Forms [5]
    2. MMS [2]
    3. HTML5 [2]
  3. Platform-Specific Runtimes [8]
    1. Flash [2]
    2. BONDI [2]
    3. WRT [2]
    4. PhoneGap/QuickConnect [2]
  4. Native Applications [2]
Flash Erik Wilde: Camera Access

(26) The 900lb Gorilla

  • Used to be taken for granted in the pre-mobile days
    • iPhone/iPad seriously challenge the ubiquity of Flash support
  • Support limited based on underlying OS
    • Flash support for iPhone/iPad is unlikely to happen
    • Flash support for Android is planned (probably only 2.1 and later)
    • Flash support for WebOS and Windows Mobile can be expected
  • Camera access from Flash is trivial


Flash Erik Wilde: Camera Access

(27) Pro/Con

  • Advantages:
    • widely deployed on the computer Web
    • may see some adoption on the mobile Web
    • some developers have experience with Flash
  • Disadvantages:
    • not part of the Web (develop Flash code instead of Web code)
    • only works with a (potentially small) subset of mobile devices


BONDI

Outline (BONDI)

  1. Camera Access [7]
  2. Web Technologies [9]
    1. HTML Forms [5]
    2. MMS [2]
    3. HTML5 [2]
  3. Platform-Specific Runtimes [8]
    1. Flash [2]
    2. BONDI [2]
    3. WRT [2]
    4. PhoneGap/QuickConnect [2]
  4. Native Applications [2]
BONDI Erik Wilde: Camera Access

(29) Pre-HTML5 Advanced Web APIs

bondi.png
  • Platform vendors attempting to bridge the gap
    • phones are providing increasingly sophisticated features
    • browsers become more powerful but provide little platform support
  • BONDI has been established as a vendor initiative
    • phone manufacturers, network operators, service providers
    • first reference implementation based on Windows Mobile 6
    • BONDI 1.1 approved in early 2010 [http://bondi.omtp.org/whatisbondi/Lists/NewsList/DispForm.aspx?ID=9] and should be available soon


BONDI Erik Wilde: Camera Access

(30) Pro/Con

  • Advantages:
    • some support across vendor platforms
    • comprehensive platform for better platform access
  • Disadvantages:
    • future is uncertain (alignment with HTML5/DAP is pending)
    • support seems to be very limited as of today


WRT

Outline (WRT)

  1. Camera Access [7]
  2. Web Technologies [9]
    1. HTML Forms [5]
    2. MMS [2]
    3. HTML5 [2]
  3. Platform-Specific Runtimes [8]
    1. Flash [2]
    2. BONDI [2]
    3. WRT [2]
    4. PhoneGap/QuickConnect [2]
  4. Native Applications [2]
WRT Erik Wilde: Camera Access

(32) Nokia's BONDI

  • Nokia-specific API for platform services
    • available on Symbian devices only
    • support on Maemo/MeeGo may or may not happen
  • APIs and widget development environment
    • APIs for providing access to platform-specific functions
    • widget support for development and deployment of applications


WRT Erik Wilde: Camera Access

(33) Pro/Con

  • Advantages:
    • good market coverage (Symbian has a large market share)
  • Disadvantages:
    • only supported by a subset of installed Symbian versions
    • only supported by Nokia devices (not even all Nokia smartphones)
    • unclear alignment with BONDI and HTML5


PhoneGap/QuickConnect

Outline (PhoneGap/QuickConnect)

  1. Camera Access [7]
  2. Web Technologies [9]
    1. HTML Forms [5]
    2. MMS [2]
    3. HTML5 [2]
  3. Platform-Specific Runtimes [8]
    1. Flash [2]
    2. BONDI [2]
    3. WRT [2]
    4. PhoneGap/QuickConnect [2]
  4. Native Applications [2]
PhoneGap/QuickConnect Erik Wilde: Camera Access

(35) Bridging the Gap

  • Bundling access to missing functionality
  • Based on WebKit and adding access to device APIs
  • Web code and PhoneGap/QuickConnect runtime are bundled as a native application
  • Application development requires native SDK access
    • setup and configuration can be complicated
    • native SDKs for all targeted platforms must be available


PhoneGap/QuickConnect Erik Wilde: Camera Access

(36) Pro/Con

  • Advantages:
    • good mix of Web development and API support
    • requires no framework installation on the device
    • porting applications just requires rebuilding it
  • Disadvantages:
    • requires installation on the device (packaged runtime)
    • requires approval in some application stores (depending on platform)
    • application updates can be tricky (depending on design)


Native Applications

Outline (Native Applications)

  1. Camera Access [7]
  2. Web Technologies [9]
    1. HTML Forms [5]
    2. MMS [2]
    3. HTML5 [2]
  3. Platform-Specific Runtimes [8]
    1. Flash [2]
    2. BONDI [2]
    3. WRT [2]
    4. PhoneGap/QuickConnect [2]
  4. Native Applications [2]
Native Applications Erik Wilde: Camera Access

(38) Sophisticated and Expensive



Native Applications Erik Wilde: Camera Access

(39) Pro/Con



2010-03-17 Mobile Application Design and Development [./]
Spring 2010 — INFO 152 (CCN 42504)