You are here: Creating a Camera Using a Constructor: voltmx.ui.Camera
Camera Widget
Camera widget allows you to capture pictures and videos using native Camera or using customized Camera (overlay Camera).
Some real-world scenarios when you can use Camera widget are as follows:
- Capturing the profile photo of a user
- Capturing the image of a cheque in a banking app
- Capturing video /claims for Insurance claims
- To maintain a visual record of your inventory
The key features of the Camera widget are as follows:
Compression: You can compress the image captured from the Camera widget to a manageable size. This image can then be either stored in the device or in a server.
RawBytes and base64: You can store the images captured from the Camera widget by using base64 string and raw bytes. These strings can then be assigned to an Image widget to view it in the application or be stored in a server for later use.
Back and Front Camera Compatibility: You can utilize both the front and back cameras of a mobile device by using a Camera widget.
Overlay: Overlay is a transparent form that is assigned to a Camera widget for customizing the camera screen.
Video Capturing: The Camera widget also has the capability to capture videos. You can change the mode of the camera to Video, and then capture the required video.
Responsive Web Support
Camera widget is supported in Responsive Web/ Desktop Web platforms from Volt MX Iris V8 SP4 FP 20 onwards. Camera widget for Responsive Web/ Desktop Web platforms through code only.
You can now capture images and videos by using the Camera widget with a web browser.
- Take a picture by using front and rear cameras
- Record a video by using front and rear cameras
Take a Picture by using Front and Rear Cameras
- When triggered, the browser asks for the users' permission to access the camera. A placeholder image displays the preview of what is seen with the camera.
- You can decide the size and the format of the captured image.
- You can upload the captured image to a server or save the image to your device.
- The camera methods such as, openCamera, takePicture, and closeCamera, can be triggered on the launch of a form or can be mapped to any event on the form.
Record a Video by Using Front and Rear Cameras
- When triggered, the browser asks for the users' permission to access the camera. A placeholder image displays the preview of what is seen with the camera.
- onClick events are present on the page to start and stop the video capturing process.
- You have the ability to display the time elapsed stamp on the preview.
- You can decide the size and the format of the video.
- You can upload the captured video to a server or save the video to your device.
- The camera methods, such as startVideoCapture, and stopVideoCapture, can be triggered on the launch of a form or can be mapped to any event on the form.
The following table displays the browser support for the various methods in Camera widget.
| Browser Support | openCamera | closeCamera | takePicture | startVideoCapture | stopVideoCapture |
|---|---|---|---|---|---|
| Chrome(74.0) |  |
|
|
|
|
| Firefox (66.0) | |
|
|
|
|
| Edge (42.17134) | |
|
|
 |
|
| IE (11.7) | |
|
|
|
|
| Opera (60) | |
|
|
|
|
| Mobile FireFox(66.0.2) | |
|
|
|
|
| Mobile Chrome(74.0) (only using https) | |
|
|
|
|
| Safari(11.12) | |
|
|
|
|
| Safari iOS Mobile (only using https) | |
|
|
|
|
| Chrome for MAC & iOS | |
|
|
|
|
Widgets are normally added to your application by using Volt MX Iris, but they can also be added through code. For general information on using widgets in Volt MX Iris, refer Designing an Application in the Iris User Guide.
For general information on the Camera widget see the Camera topic in the Volt MX Iris User Guide.
Note: From Volt MX IrisV8 SP4 onwards, the Camera widget's data for a Volt MX App child app is stored in child app data and not under the parent app. This feature is applicable for iOS, Windows, and Android platforms.
For a more hands-on approach on the functionality of Camera widget, import and preview the Camera Feature sample app by using Volt MX Iris.
The Camera widget capabilities can be broadly categorized into the following:
- Layout
- UI Appearance
- Animations
- Capturing Features
- Data Management
- 3D Touch
- User Input Handling
- Enabling RTL
- Miscellaneous
- Configurations Common To All Widgets
Layout
| Events | Description |
|---|---|
| doLayout | Invoked for every widget when the widget position and dimensions are computed. |
| Properties | Description |
|---|---|
| bottom | Determines the bottom edge of the widget and is measured from the bottom bounds of the parent container. |
| centerX | Determines the center of a widget measured from the left bounds of the parent container. |
| centerY | Determines the center of a widget measured from the top bounds of the parent container. |
| contentAlignment | Specifies the alignment of the text for a widget with respect to its boundaries. |
| height | It determines the height of the widget and measured along the y-axis. |
| left | Determines the lower left corner edge of the widget and is measured from the left bounds of the parent container. |
| maxHeight | Specifies the maximum height of the widget and is applicable only when the height property is not specified. |
| maxWidth | Specifies the maximum width of the widget and is applicable only when the width property is not specified. |
| minHeight | Specifies the minimum height of the widget and is applicable only when the height property is not specified. |
| minWidth | Specifies the minimum width of the widget and is applicable only when the width property is not specified. |
| right | Determines the lower right corner of the widget and is measured from the right bounds of the parent container. |
| top | Determines the top edge of the widget and measured from the top bounds of the parent container. |
| width | Determines the width of the widget and is measured along the x-axis. |
| zIndex | Specifies the stack order of a widget. |
UI Appearance
| Properties | Description |
|---|---|
| backgroundColor | Specifies the background color of the widget in hex format. |
| backgroundColorMultiStepGradient | Specifies the multi-step gradient color for the background of the widget. |
| backgroundColorTwoStepGradient | Specifies the two-step gradient color for the background of the widget. |
| backgroundImage | Sets the image for the background of the widget. |
| borderColor | Specifies the border color of the widget. |
| borderColorGradient | Specifies the multi-step gradient color for the border of the widget. |
| borderStyle | Specifies the border style for the widget. |
| borderWidth | Specifies the width of the border for the widget in pixels. |
| cornerRadius | Specifies the radius of the border for the widget. |
| disabledStateSkinProperties | Specifies the skin properties that define the look and feel of the widget, when the widget is disabled or blocked. |
| focusStateSkinProperties | Specifies the skin properties that define the look and feel of the widget, when the widget is in focus. |
| fontColor | Specifies the font color of the widget. |
| fontFamily | Specifies the font family for the font of the widget. |
| fontSize | Specifies the font size for the widget in percentage (%) units. |
| fontStyle | Specifies the font style for the widget. |
| fontWeight | Specifies the weight for the font of the widget. |
| hoverStateSkinProperties | Specifies the skin properties that define the look and feel of the widget, when the cursor hovers on the widget. |
| pressedStateSkinProperties | Specifies the skin properties that define the look and feel of the widget, when the widget is pressed or clicked. |
| shadowColor | Specifies the color for the shadow of the widget. |
| shadowOffset | This property specifies the current coordinates of the shadow region in the widget. |
| shadowRadius | Specifies the radius for the blur value of the shadow. |
| textShadowColor | Specifies the color for the text shadow of the widget. |
| textShadowOffset | This property specifies the current coordinates of the text shadow region in the widget. |
| textShadowRadius | Specifies the radius for the blur value of the text shadow. |
| focusSkin | Specifies the look and feel of the widget when in focus. |
| hoverSkin | Specifies the look and feel of a widget when the cursor hovers on the widget. |
| poster | Specifies the placeholder image for Camera widget when the device camera is not open. |
| opacity | Specifies the opacity of the widget. |
| skin |
Animations
| Methods | Description |
|---|---|
| animate | Applies an animation to the widget. |
Capturing Features
| Methods | Description |
|---|---|
| closeCamera | Allows you to close the camera. |
| getSupportedCameraSources | Returns an array of supported camera sources. |
| openCamera | Opens the camera preview. |
| startVideoCapture | Allows you to capture a video that will end as configured in the videoDuration property. |
| stopVideoCapture | Allows you to stop a video that is being captured using startVideoCapture method. |
| takePicture | Allows you to capture the picture when the camera is in preview mode. |
| Properties | Description |
|---|---|
| cameraOptions | Specifies the camera options that can be used on a form. |
| cameraSource | Specifies the source of the camera, either front or rear. |
| captureOrientations | Specifies the orientation of the captured image. |
| captureMode | Specifies the capture mode of the camera. |
| compressionLevel | Specifies the compression level or picture quality with which the captured image must be stored. |
| enableOverlay | The camera is launched with capability of over-lay a Form UI over the camera view. |
| enablePhotoCropFeature | Enables you to crop the captured image. |
| enableZoom | Set this property as true to enable pinch to zoom of the camera preview in the overlay mode. |
| focusMode | Specifies the focus mode for the camera and is respected when the enableOverlay is set to true. |
| imageFormat | Specifies if the image must be stored as a PNG (Portable Network Graphics) or a JPEG (Joint Photographic Experts Group) image. |
| maxSideOfTheImage | Specifies the width of the camera picture/image. |
| nativeUserInterface | Specifies if the camera must have the native interface on camera view (an interface with the default platform controls for camera) or the user interface with custom options. |
| overlayConfig | Specifies the overlay configuration parameters for overlaying a form. |
| scaleFactor | Specifies the ratio by which the captured image is reduced. |
| supportedVideoQualityLevels | Returns an array of possible quality levels for the given device for the configured camera source. |
| videoStabilization | Enables you to reduce the shaking of the camera while shooting a video. |
| videoFormat | Specifies the video format of the captured video. |
| videoDuration | Specifies the length of the captured video in seconds. |
| videoQualityLevel | Specifies the quality of the video. |
| Events | Description |
|---|---|
| onCapture | Invoked when the user captures a picture. |
| onCaptureFailed | Invoked when the user has tapped on Don't Allow over permission alert and also when camera privacy is turned off under iPhone settings. |
| onFailure | Invoked when an error occurs using a camera widget. |
| onImageSaveFailed | Invoked when the user has performed some action over permission alert and also when image cannot be saved to photo album or due to data save error. |
Data Mangement
| Methods | Description |
|---|---|
| clone | When this method is used on a container widget, then all the widgets inside the container are cloned. |
3D Touch
| Methods | Description |
|---|---|
| registerForPeekandPop | Registers a widget to enable 3D Touch peek and pop gestures. |
| setOnPeek | Sets and overrides the existing onPeekCallback for the widget. |
| setOnPop | Overrides the existing onPopCallback for the widget. |
| unregisterForPeekandPop | Unregisters a widget from 3D Touch peek and pop gestures. |
User Input Handling
| Events | Description |
|---|---|
| onTouchEnd | Invoked by the platform when the user touch is released from the touch surface. |
| onTouchMove | Invoked by the platform when the touch moves on the touch surface continuously until movement ends. |
| onTouchStart | Invoked by the platform when the user touches the touch surface. |
| Methods | Description |
|---|---|
| addGestureRecognizer | Allows you to set a gesture recognizer for a specified gesture for a specified widget. |
| removeGestureRecognizer | Allows you to remove a child widget from a parent widget. |
| setGestureRecognizer | Allows you to set a gesture recognizer for a specified gesture for a specified widget. |
Enabling RTL
| Properties | Description |
|---|---|
| retainContentAlignment | Helps to retain the content alignment of the widget while applying RTL. |
| retainFlexPositionProperties | Helps to retain the left, right and padding properties while applying RTL. |
| retainFlowHorizontalAlignment | Enables you to change the horizontal flow of the widget from left to right. |
Miscellaneous
| Methods | Description |
|---|---|
| getBadge | Enables you to read the badge value (if any) attached to the specified widget. |
| setBadge | Enables you to set the badge value to the given widget at the upper, right corner of the widget. |
| Properties | Description |
|---|---|
| accessMode | Specifies how the captured image must be stored. |
| base64 | Returns the base64-encoded string of the image raw bytes. |
| cursorType | Specifies the type of the mouse pointer used. |
| rawBytes | Specifies the rawbytes representing an Image (usually the image captured from the camera) that can be used as a background for the Camera. |
Configurations common to all widgets
| Methods | Description |
|---|---|
| convertPointFromWidget | Allows you to convert the coordinate system from a widget to a point (receiver's coordinate system). |
| convertPointToWidget | Allows you to convert the coordinate system from a widget to a point (receiver's coordinate system). |
| removeFromParent | Allows you to remove a child widget from a parent widget. |
| setEnabled | Specifies the widget that must be enabled or disabled. |
| setFocus | Specifies the widget on which there must be focus. |
| setVisibility | Use this method to set the visibility of the widget. |
| Properties | Description |
|---|---|
| accessibilityConfig | Enables you to control accessibility behavior and alternative text for the widget. |
| enable | Allows you to make a widget visible but not actionable. |
| enableCache | Enables you to improve the performance of Positional Dimension Animations. |
| id | id is a unique identifier of the Camera Widget consisting of alphanumeric characters. |
| info | A custom JSObject with the key-value pairs that a developer can use to store the context with the widget. |
| isVisible | Controls the visibility of a widget on the form. |
| parent | Helps you access the parent of the widget. |
Camera Widget Basics
If you select the Camera widget, the phone camera is invoked to capture an image (which you can choose to accept or discard) and is stored as a PNG (Portable Network Graphics) image by default with the original size.
Note: Camera widget is not supported for SPA platform.
The following are few examples where you can use a Camera widget:
- Automobile Insurance - To capture the scene of an accident for claims
- To capture VIN (Vehicle Identification Number)
Creating a Camera Using a Constructor: voltmx.ui.Camera
var mycamera = new voltmx.ui.Camera(basicConf, layoutConf, pspConf);
- basicConf is an object with basic properties.
- layoutConf is an object with layout properties.
- pspConf is an object with platform specific properties.
Note: The configuration properties should be passed only in the respective configuration objects otherwise they are ignored.
Example
//Defining the properties for a Camera.
var camBasic = {
id: "camera1",
skin: "camSkin",
focusSkin: "camFSkin",
text: "Camera",
isVisible: true
};
var camLayout = {
containerWeight: 100,
padding: [5, 5, 5, 5],
margin: [5, 5, 5, 5],
paddingInPixel: true,
marginInPixel: true,
hExpand: true,
vExpand: true
};
var camPSP = {
enableOverlay: true
};
//Creating the Camera.
var camera1 = new voltmx.ui.Camera(camBasic, camLayout, camPSP);
//Reading enableOverlay of Camera.
alert("Camera enableOverlay::" + camera1.enableOverlay);
Note: For optimization, the raw bytes property can be read only once. Once it is read, the platform releases the handle. The camera image handle is provided to the action handler and if the action handler does not store the image handle, the image cannot be retrieved from the widget (the camera widget does not have the getImageHandle method).
To delete the rawbytes, use the releaseRawBytes method.
Common Issues
The following are the issues to avoid for a camera:
- If you delete the rawbytes using the releaseRawBytes method, you will not be able to access the captured image.
- On iPhone, the size of the captured image varies from device to device and is not the same. You must take this factor into consideration when you are working with the image. To have a consistent size of the captured image across all iPhone devices, you can use the maxSideOfTheImage property to specify width and height of the captured image.
Important Considerations
The following are the important considerations of the camera widget across all platforms and individual platforms:
- iPhone: The following are the important considerations:
- You can down scale a captured image (using maxSideOfTheImage and the scaleFactor properties) but cannot up scale a captured image.
- The click events on camera Overlay form works only if hideControlBar property is set to true.
- On iOS devices, due to technical limitation, avoid overlayForm option when nativeUserInterface is set to true.
- Tap anywhere is not supported when hideControlBar property is set to true.
- For overlay forms that require orientation works only if hideControlBar property is set to true.
- cameraOptions should not be modified in camera preview mode.
- Only pre-show and post show events of the overlay form are respected.
- Flash mode always on (constants.FLASH_MODE_ALWAYS_ON) is not supported. If set, it will change to Flash mode as on (constants.FLASH_MODE_ON).
-
Android: The following are the important considerations:
- Camera OverlayForm , displayOrientation is not respected in devices with OS versions < 3.0 , by default OverayForm is shown in Landscape mode.
- The captured picture orientation is not respected in OS versions < 3.0, by default the picture is captured in Landscape mode.
-
Windows: The following are the important considerations:
- The camera widget launches as a popup with a capture button.
- The overlay camera uses the form lifecycle, so events preshow and postshow now work for the overlay camera.
- The overlay camera does not support the Capture application menu. Instead, use the takePicture() API on button click or app menu tap.
Limitations of Camera widget in video capture mode:
- The following iOS specific properties are not supported:
- captureOrientation
- compressionLevel
- transitionEffect
- tapAnywhere property is not supported.
- maxSideOfTheImage property is not supported.
- captureButtonSkin and captureButtonText options are not supported in video capture mode.
- imageFormat and scaleFactor properties are not supported in video capture mode.
- On Android platform, accessMode property option constants.CAMERA_ACCESS_MODE_INMEMORY is not supported in video mode.
- On Android platform, accessMode property options constants.CAMERA_ACCESS_MODE_PRIVATE and constants.CAMERA_ACCESS_MODE_INMEMORY are not supported when enableOverlay is set to false.
- For Android platform, form's displayOrientation option FORM_DISPLAY_ORIENTATION_BOTH is not supported. By default the FORM_DISPLAY_ORIENTATION_LandSCAPE option is set.
- On Android platform reverse portrait and reverse landscape orientations for OverlayForm are not supported.