Appearance

On this page

Creating a User Preview ​

As part of your application, it is recommended to present the user with a camera preview, as it helps the user to center his/her face on the camera screen. It also allows for the presentation of a face detection bounding graphic on the screen.

The following code can be used to create a preview and present a face detection bounding graphic to the user.

1. Add a CameraPreviewView Element to the Screen ​

CameraPreviewView elements is supplied by the Binah.ai React Native SDK. It is a wrapper of a native (iOS/Android) view.

Note

Due to performance considerations, the camera preview is implemented as a native view that presents the images received from the SDK and is wrapped by a React Native component.

The aspect ratio of the images received from the SDK is 4:3. In order to preserve the same aspect ratio in the UI and prevent image distortion, the CameraPreviewView element is configured with aspectRatio: 0.75,.

TypeScript
export const CameraPreview = () => {
    const [previewSize, setPreviewSize] = useState({x: 0, y: 0, width: 0, height: 0} as LayoutRectangle)
    const onLayout = (event: LayoutChangeEvent) => {
        setPreviewSize(event.nativeEvent.layout);
    };

    return (
        <View style={styles.container} onLayout={onLayout}>
                <CameraPreviewView style={styles.preview} />
                <FaceDetection previewSize={previewSize} />
        </View>
      );
};

const styles = StyleSheet.create({
    container: {
        aspectRatio: 0.75,
        width: '100%',
    },
    preview: {
        flex: 1,
    }
});

2. Drawing the Face Detection Graphics ​

Face detection graphics are implemented in React Native on the CameraPreviewView Component. This allows the application to control the look and feel of the face detection bounding graphic in accordance with the application's UI requirements. The position of the face detection bounding graphic in the image is provided by the SDK.

TypeScript
const FaceDetection = (props: {previewSize: LayoutRectangle}) => {
    const imageData = useImages();
    if (!imageData || !imageData.roi) {
        return null;
    }
    
    if (imageData.imageValidity != ImageValidity.VALID) {
        console.log(`Image Validity Error: ${imageData.imageValidity}`);
    }

    const devicePixelRatio = PixelRatio.get();
    const widthFactor = props.previewSize.width / (imageData.imageWidth / devicePixelRatio);
    const heightFactor = props.previewSize.height / (imageData.imageHeight / devicePixelRatio);  
    const left = (imageData.roi.left * widthFactor) / devicePixelRatio;
    const top = (imageData.roi.top * heightFactor) / devicePixelRatio;
    const width = (imageData.roi.width * widthFactor) / devicePixelRatio;
    const height = (imageData.roi.height * heightFactor) / devicePixelRatio;
    
    return <View style={{...styles.faceDetection, ...{ width: width, height: height, left: left, top: top, position:'absolute'}}}/>
}

const styles = StyleSheet.create({
    faceDetection: {
        position: 'absolute',
        backgroundColor: 'none', 
        borderColor: '#0653F4', 
        borderWidth: 4
    }
});