Details
-
Type:
Improvement
-
Status: Closed
-
Priority:
Major
-
Resolution: Fixed
-
Affects Version/s: None
-
Fix Version/s: EE-4.0.0.GA
-
Component/s: MOBI-Components
-
Labels:None
-
Environment:ICEmobile EE 1.3.1
-
Assignee Priority:P2
-
Affects:Compatibility/Configuration
Description
Enhancement of the ICEmobile Camera component with HTML5 getUserMedia support
The Camera component will dynamically render JavaScript code for an HTML5 fallback mode when BridgeIt Native utility app is not available or not present
The HTML5 fallback mode will do client-side detection of the getUserMedia API
If the API is not present, the component will render an input file element as before
If the API is present, the component will render a button to trigger the getUserMedia API and a simulated camera capture popup
Simulated Camera Capture popup
Will show the user the video capture stream from within the web application
Will provide a capture button to take a photo
Will provide a thumbnail of the captured image using an HTML5 canvas element
Will allow the user to select the current image, or take another photo
If possible, the image data may be stored in local storage until the form is posted
The selected image will be serialized into the form so that it can be uploaded on the next form post
The server-side mobi:camera component API will remain unchanged, if possible.
The Camera component will dynamically render JavaScript code for an HTML5 fallback mode when BridgeIt Native utility app is not available or not present
The HTML5 fallback mode will do client-side detection of the getUserMedia API
If the API is not present, the component will render an input file element as before
If the API is present, the component will render a button to trigger the getUserMedia API and a simulated camera capture popup
Simulated Camera Capture popup
Will show the user the video capture stream from within the web application
Will provide a capture button to take a photo
Will provide a thumbnail of the captured image using an HTML5 canvas element
Will allow the user to select the current image, or take another photo
If possible, the image data may be stored in local storage until the form is posted
The selected image will be serialized into the form so that it can be uploaded on the next form post
The server-side mobi:camera component API will remain unchanged, if possible.
Activity
- All
- Comments
- History
- Activity
- Remote Attachments
- Subversion
IM 1.3.1 camera rendering logic (without Shim support):
Server
- if BridgeIt app registered
- render button with onclick script for BridgeIt native camera
- else
- render button with onclick script for dynamic getUserMedia detection (ice.mobi.fallbackCamera())
Client button onclick handler
- if getUserMedia supported
- create popup with video element
- fire getUserMedia()
- direct video stream to video element
- show 'take picture' button
- else
- render a file upload element with HTML5 accept and capture attributes,
- eg. accept='images/*;capture=camera', capture='true'
- render a file upload element with HTML5 accept and capture attributes,
Client getUserMedia image capture handler
- create canvas element
- create img element
- canvas.getContext('2d').drawImage(video)
- draw img element with base64 data url
- show 'keep' and 'redo' buttons
Client image capture from canvas element
- create hidden input element
- set hidden input element value with img element data url data
Current IF 4 Camera rendering logic:
Server
- render button with bridgeit.camera() handler
BridgeIt camera onclick handler
- call native BridgeIt utility app
- if native call fails, call bridgeit.launchFailed() callback hook
Proposed IF 4 Camera rendering logic:
Server
- render button with onclick ice.mobi.cameraBtnOnClick handler
Client cameraBtnOnClick handler
- call bridgeit.camera() with custom cameraLaunchFailed callback
cameraLaunchFailed callback
- if getUserMedia supported
- create popup with video element
- fire getUserMedia()
- direct video stream to video element
- show 'take picture' button
- else
- render a file upload element with HTML5 accept and capture attributes,
- eg. accept='images/*;capture=camera', capture='true'
- render a file upload element with HTML5 accept and capture attributes,
Show
Philip Breau
added a comment - - edited IM 1.3.1 camera rendering logic (without Shim support):
Server
if BridgeIt app registered
render button with onclick script for BridgeIt native camera
else
render button with onclick script for dynamic getUserMedia detection (ice.mobi.fallbackCamera())
Client button onclick handler
if getUserMedia supported
create popup with video element
fire getUserMedia()
direct video stream to video element
show 'take picture' button
else
render a file upload element with HTML5 accept and capture attributes,
eg. accept='images/*;capture=camera', capture='true'
Client getUserMedia image capture handler
create canvas element
create img element
canvas.getContext('2d').drawImage(video)
draw img element with base64 data url
show 'keep' and 'redo' buttons
Client image capture from canvas element
create hidden input element
set hidden input element value with img element data url data
Current IF 4 Camera rendering logic:
Server
render button with bridgeit.camera() handler
BridgeIt camera onclick handler
call native BridgeIt utility app
if native call fails, call bridgeit.launchFailed() callback hook
Proposed IF 4 Camera rendering logic:
Server
render button with onclick ice.mobi.cameraBtnOnClick handler
Client cameraBtnOnClick handler
call bridgeit.camera() with custom cameraLaunchFailed callback
cameraLaunchFailed callback
if getUserMedia supported
create popup with video element
fire getUserMedia()
direct video stream to video element
show 'take picture' button
else
render a file upload element with HTML5 accept and capture attributes,
eg. accept='images/*;capture=camera', capture='true'
From Philip's commit log: