Camera UI

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

Usage

Swift

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:

SwiftObjective-C

FaceSDK.service.customization.actionDelegate = self

RGLFace.shared.customization.actionDelegate = self;

Set a button callback:

SwiftObjective-C

extension ViewController: FaceSDK.CustomizationActionDelegate {
    func onCustomButtonTapped(withTag tag: Int) {
        print("Button with tag = \(tag) tapped.")
    }
}

- (void)onCustomButtonTappedWithTag:(NSInteger)tag {

}