Introduction to the Camera Component
The Camera component displays the live feed from a device’s built-in or external camera within the application. It can be used in scenarios where user interaction via the camera is required.
This component must be paired with the CameraController Generator to enable capturing or recording functionality.
When placed on the canvas, the Camera component behaves like a monitoring view. It can also be configured not to display video, functioning only through triggered events for interaction.
Frame Section
The basic Frame properties are the same as those of the Rect component. For details, please refer to the Frame section of the Rect component documentation.
Properties Section
The Camera component inherits most of its basic properties from the Rect component. For details, please refer to the Properties section of the Rect component documentation.
Note: In the Camera component, the Opacity property of the underlying Rect does not affect transparency, since the camera feed overlays the Rect component.
Additional property descriptions are as follows:
Property Name | Property Type | Description |
Type | One Of List | The camera type:
Configure which built-in camera the Camera component should connect to. If an external camera is used, this setting can be ignored.
|
Zoom | Number Numeric value (0–1) | The camera zoom. Configure the zoom ratio of the camera feed. The actual zoom range is subject to the hardware’s limitations. |
Flash Mode | One Of List | The camera flash mode.
Configure the flash mode.
|
Ratio | String Text string (ratio, e.g., 1:1, 4:3, 16:9) | The camera ratio such as 1:1, 4:3, 16:9. The ratio will depend on the camera itself. If the ratio specified is not supported by the physical camera, the default ratio will apply. Configure the aspect ratio of the camera feed. The format should be written as 1:1, 4:3, 16:9, etc. The actual ratio depends on the capabilities of the camera hardware. If an unsupported ratio is entered, the default ratio will be used. |
Capture Audio | Boolean Boolean value | To set whether audio will be captured while filming. Configure whether audio should be recorded along with video during recording. |
White Balance | One of List | Setting the white balance of the camera will balance the color temperature in the image:
Configure the white balance setting of the camera feed.
|
Auto Focus Section
Property Name | Property Type | Description |
Enabled | Boolean Boolean value Yes/No | To set whether the camera will autofocus. Configure whether the camera should perform autofocus automatically. |
Point of interest X | Number (between 0 and 1) Numeric value (0–1) | Autofocus on the part of the image at this X coordinate. 0 stands for the left edge while 1 stands for the right edge. Configure the X-coordinate position for autofocus. A value of 0 represents the left edge, and 1 represents the right edge. |
Point of interest Y | Number (between 0 and 1) Numeric value (0–1) | Autofocus on the part of the image at this Y coordinate. 0 stands for the top edge while 1 stands for the bottom edge. Configure the X-coordinate position for autofocus. A value of 0 represents the left edge, and 1 represents the right edge. |
Face Detection Section
Property Name | Property Type | Description |
Enabled | Boolean Boolean value Yes/No | To set whether face detection is enabled. Configure whether to enable face detection. |
Event Mode | One Of List | The face detection's event mode:
Configure the face detection mode.
|
Properties – Border Section
The basic border properties are the same as those of the Rect component. For details, please refer to the Border section of the Rect component documentation.
Animations Section
The basic animation event properties are the same as those of the Rect component. For details, please refer to the Animations section of the Rect component documentation.
Additional animation event explanations are as follows:
State Change | Animation that will be triggered when the camera's state changes. Configure the animation event that is triggered when the camera status changes. |
Record Start | Animation that will be triggered when the camera begins recording. Configure the animation event that is triggered when camera recording starts. |
Record End | Animation that will be triggered when the camera finishes recording. Configure the animation event that is triggered when camera recording ends. |
Barcode Read | Animation that will be triggered when the camera detects and reads a barcode. Configure the animation event that is triggered when the camera detects a barcode. |
Events Section
The basic event properties are the same as those of the Rect component. For details, please refer to the Events section of the Rect component documentation.
Additional event explanations are as follows:
State Change | Event that will be triggered when the camera's state changes. Configure the event that is triggered when the camera status changes. |
Record Start | Event that will be triggered when the camera begins recording. Configure the event that is triggered when camera recording starts. |
Record End | Event that will be triggered when the camera finishes recording. Configure the event that is triggered when camera recording ends. |
Barcode Read | Event that will be triggered when the camera detects and reads a barcode. Configure the event that is triggered when the camera detects a barcode. |