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

UI Appearance

Animations

Capturing Features

Data Mangement

3D Touch

User Input Handling

Enabling RTL

Miscellaneous

Configurations common to all widgets

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.