Skip to content

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

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.