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. |