@berbix/react-advanced-sdk NPM

Berbix React Advanced SDK

This is the documentation for the Berbix React Advanced SDK, which lets you compose a Berbix ID verification flow using your own UI components (as opposed to our React SDK, which is a one-line solution to integrate Berbix ID verification).

Getting started

Your app needs to be wrapped in a CameraProvider to provide the appropriate context to the SDK's other components.

import { CameraProvider } from "@berbix/react-advanced-sdk";

export default function App({ children }) {
  return (
    <html>
      <head>
        <meta />
      </head>
      <body>
        <CameraProvider>{children}</CameraProvider>
      </body>
    </html>
  );
}

Learn more about CameraProvider in its API docs.

Showing the stream from the camera

To render the output from the device's camera, use the CameraStream component. This component is essentially a managed <video> element; it takes care of permissions and selection of device cameras, as well as setting up and running real-time shape detection on the camera stream.

It also provides various callbacks that developers can use to detect or respond to various events. You can learn more about this in the CameraStream API docs.

import { CameraStream } from "@berbix/react-advanced-sdk";

function MyPage() {
  return (
    <div>
      <CameraStream
        fit="cover"
        onStreamStart={() => console.log("Stream started")}
        onStreamEnd={() => console.log("Stream ended")}
      />
    </div>
  );
}

Laying out the camera stream

The pixel dimensions of the rendered <CameraStream> element depend on the resolution of the device's camera. Often, this is much larger than the viewport size, leading to scroll bars on the page if not sized correctly. As such, we recommend developers explicitly set the size of the element:

// Size the element to fully cover its parent container
style = { width: "100%", height: "100%" };

// Size the element to fully cover the viewport
style = { width: "100vw", height: "100vw" };

// Set a fixed size on the element
style = { width: "100px", height: "100px" };

<CameraStream style={style} />;

The CameraStream component uses the object-fit CSS property (aliased in the component as the fit prop) to determine how to crop or scale the video stream to fit the dimensions of the element. By default, fit is set to cover, meaning that the video stream will be cropped to ensure that it fully covers the element. Below is an overview of how each fit value behaves:

`fit` value	No cropping	No video bars	Preserve aspect ratio
`cover`		✅	✅
`contain`	✅		✅
`fill`	✅	✅

The MDN docs on object-fit has demos of these different values. You can read the docs here.

Adding shape detection

The CameraStream component has the built-in ability to do real-time shape detection. You can do this as follows:

<CameraStream
  shapeDetector="barcode"
  shapeDetectorProps={{
    active: true,
    onDetect: () => console.log("Shape detected"),
  }}
/>

You can read more about the various options for the shape detector in the shapeDetectorProps section of the docs.

Controlling the camera output

We provide a useCamera hook that gives you functions to control the CameraStream component. You can read about the hook and its functions here.

Capturing camera frames

There are two ways to capture camera frames: either through the capture() function in the useCamera hook, or using shapeDetectorProps.autoCapture. The former needs to be imperatively called; the latter will automatically trigger a capture if a shape is successfully detected.

In either case, it will fire the onCapture callback in the CameraStream component, passing in a Blob of the captured image from the stream. You can add a handler to handle this:

const [active, setActive] = useState(true);

<CameraStream
  onCapture={(blob, shapes) => {
    setActive(false);

    // Do some handling of the blob, e.g. send it to an API.
  }}
  shapeDetector="barcode"
  shapeDetectorProps={{
    active,
    autoCapture: true,
  }}
/>;