Skip to content

Camera UI

To the Liveness module camera UI, you can add as many text and graphic elements as needed.

Usage

let jsonString = "{ \"objects\": [ { \"label\": { \"text\": \"Place the document\\ninside the camera frame\", \"position\": { \"h\": 1.0, \"v\": 1.0 }, \"background\": \"#00FFFFFF\", \"fontColor\": \"#FFEB6517\", \"fontSize\": 18, \"alignment\": \"center\" } } ] }"

if let data = jsonString.data(using: String.Encoding.utf8) {
    do {
        let json = try JSONSerialization.jsonObject(with: data, options: .mutableContainers) as? [String:Any]
        FaceSDK.service.customization.customUILayerJSON = json 
    } catch {
        print("Something went wrong")
    }
}

JSON Structure

The JSON file with all possible params can be found here.

objects
└── label
└── image
└── button
Name Description
label Text elements
image Graphic elements
button Buttons

Label

Adds text elements to the UI.

label
└── text
└── fontStyle
└── fontColor
└── fontSize
└── fontName
└── alignment
└── background
└── borderRadius
└── padding
|   └── start
|   └── end
|   └── left
|   └── right
|   └── top
|   └── bottom
└── margin
|   └── start
|   └── end
|   └── left
|   └── right
|   └── top
|   └── bottom
└── size
|   └── width
|   └── height
└── alpha
└── position
|   └── h
|   └── v
└── backLayer
Name Description
text Text.
fontStyle Defines whether a font should be styled with a normal, italic, or bold face. Possible values:
  • normal - the text is shown normally
  • italic - the text is shown in italics
  • bold - the text is shown in bold weight
fontColor Font color, hex.
fontSize Font size, pt.
fontName Font name.
alignment Defines how text aligns in the space it appears:
  • center - align the text in the center of the container
  • left - align the text on the left edge of the container
  • right - align the text on the right edge of the container
background Background color, hex.
borderRadius Defines the radius of the element's corners, lets you add rounded corners to elements.
padding The space between an element's border and the element's content.
margin The space around an element's border.
size Size:
  • width - Width, dpi
  • height - Height, dpi
alpha The alpha channel value, represents transparency or opacity of a color for each pixel. Can be any value between 0 and 1, where 0 is for full transparency and 1 is for full opacity.
position Position:
  • h - Horizontal positioning
  • v - Vertical positioning

The value should be in a range from 0 to 2.
backLayer An optional feature for images and labels. By setting it to 1, you can position the image/text behind a mask. If the field is missing from the JSON or set to any value other than 1, the text/image will be drawn in the foreground.

Warning

If both position and margin are used, position has the priority.

Image

Adds graphic elements to the UI.

image
└── data
└── name
└── background
└── borderRadius
└── contentMode
└── padding
|   └── start
|   └── end
|   └── left
|   └── right
|   └── top
|   └── bottom
└── margin
|   └── start
|   └── end
|   └── left
|   └── right
|   └── top
|   └── bottom
└── size
|   └── width
|   └── height
└── alpha
└── position
|   └── h
|   └── v
└── backLayer
Name Description
data Image in the Base64 format.
name File name.
background Background color, hex.
borderRadius Defines the radius of the element's corners, lets you add rounded corners to elements.
contentMode Defines how a view adjusts its content when its size changes:
  • fill - scale the content to fit the size of itself by changing the aspect ratio of the content if necessary
  • crop - scale the content to fit the size of the view by maintaining the aspect ratio
  • center - center the content in the view’s bounds, keeping the proportions the same
padding The space between an element's border and the element's content.
margin The space around an element's border.
size Size:
  • width - Width, dpi
  • height - Height, dpi
alpha The alpha channel value, represents transparency or opacity of a color for each pixel. Can be any value between 0 and 1, where 0 is for full transparency and 1 is for full opacity.
position Position:
  • h - Horizontal positioning
  • v - Vertical positioning

The value should be in a range from 0 to 2.
backLayer An optional feature for images and labels. By setting it to 1, you can position the image/text behind a mask. If the field is missing from the JSON or set to any value other than 1, the text/image will be drawn in the foreground.

Button

Adds custom buttons to the interface.

button
└── title
└── tag
└── alpha
└── backLayer
└── fontStyle
└── fontColor
└── background
└── fontSize
└── fontName
└── alignment
└── enabled
└── borderRadius
└── padding
|   └── start
|   └── end
|   └── top
|   └── bottom
└── margin
|   └── start
|   └── end
|   └── left
|   └── right
|   └── top
|   └── bottom
└── position
|   └── h
|   └── v
└── image
|   └── data
|   └── name
|   └── placement
|   └── padding
Name Description
title The text on the button.
tag Button identifier.
alpha The alpha channel value, represents transparency or opacity of a color for each pixel. Can be any value between 0 and 1, where 0 is for full transparency and 1 is for full opacity.
backLayer An optional feature for images and labels. By setting it to 1, you can position the image/text behind a mask. If the field is missing from the JSON or set to any value other than 1, the text/image will be drawn in the foreground.
fontStyle Defines whether a font should be styled with a normal, italic, or bold face. Possible values:
  • normal - the text is shown normally
  • italic - the text is shown in italics
  • bold - the text is shown in bold weight
fontColor Font color, hex.
background Background color, hex.
fontSize Font size, pt.
fontName Font name.
alignment Defines how text aligns in the space it appears:
  • center - align the text in the center of the container
  • left - align the text on the left edge of the container
  • right - align the text on the right edge of the container
enabled Whether to enable the button, bool.
borderRadius Defines the radius of the element's corners, lets you add rounded corners to elements.
padding The indent from the text inside the button to the borders of the button.
margin The space around the buttons's border.
position Position:
  • h - Horizontal positioning
  • v - Vertical positioning

The value should be in a range from 0 to 2.
image The added to the button image data:
  • data - image in the Base64 format
  • name - the name of the image. It can either be an image name from the resources or data in the Base64 format.
  • placement - the position of the image relative to the button text: start/top/bottom/end
  • padding - the distance between the text and image
  • Set a customization delegate:
FaceSDK.service.customization.actionDelegate = self
RGLFace.shared.customization.actionDelegate = self;
  • Set a button callback:
extension ViewController: FaceSDK.CustomizationActionDelegate {
    func onCustomButtonTapped(withTag tag: Int) {
        print("Button with tag = \(tag) tapped.")
    }
}
- (void)onCustomButtonTappedWithTag:(NSInteger)tag {

}