npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@trulioo/docv-capture-web

v2.13.1

Published

Trulioo DocVCapture Web SDK

Downloads

140

Readme

@trulioo/docv-capture-web

Trulioo DocVCapture Web SDK

Document Capture and Verification Flow Overview

Starting a new document verification transaction

Create an instance of TruliooCapture and call the initialize function using the shortcode obtained from the Trulioo API endpoint: /customer/handoff. This will create a new document verification transaction with a unique Transaction ID.

const shortCode = "generatedFromTruliooAPI"

const truliooCapture = new TruliooCapture()

truliooCapture.initialize(shortCode).then((transactionId) => {
    console.log(`Success initialize with transaction ID: ${transactionId}`)
}).catch(error => {
    console.log(`Error on initialize: ${error}`)
})

Creating and rendering a camera component

Using the same created instance of TruliooCapture, we can get a camera component to be rendered later by calling the getCameraComponent function. We can specify the camera detection type by providing a TruliooCameraConfig with the desired DetectionType.


// Will get a document detection type camera by default.
const documentCamera = truliooCapture.getCameraComponent()


// To get a selfie detection type camera.
const selfieCamera = truliooCaptureSdkInstance.getCameraComponent({
  detectionType: DetectionType.BIOMETRIC_SELFIE,
})

To render the camera component on the screen, we just need to call the renderCamera function. This will render a full screen camera on the screen by attaching a video element to the parent element based on the provided element id. The renderCamera function will resolve when the camera is successfully loaded, otherwise it will reject with an error. The onCaptureRegionChange callback function is provided, which will return the current capture frame coordinates location (the location on the camera screen where the document/face should be located to do a capture). We can utilize this coordinate information to render custom UI overlay.

const cameraProps = new CameraProps(
    (captureRegion: CaptureRegion) => {
        // Utilize the given captureRegion data to render custom UI.
    }
)

documentCamera.renderCamera("parent-element-id", cameraProps).then((_) => {
    console.log("Camera is successfully loaded")
}).catch((e: Error) => {
    console.error(`Camera is not loaded successfully: ${e.message}`)
})

To remove/unrender the current camera on the screen, call the removeCamera function.

documentCamera.removeCamera()

Starting the document capture flow

Once the camera component is loaded and ready. We can start the document capture experience by calling startFeedback from previously created TruliooCapture instance.

To do an auto capture experience (a good document/selfie image criteria decided entirely by SDK), we can simply call startFeedback by just providing the camera id that refers to the currently active/rendered camera component. The promise will only resolve when the SDK manage to capture a good image that is presented in front of the camera capture frame.

truliooCapture.startFeedback(documentCamera.id).then((result: TruliooCaptureResponse) => {
    console.log(`Succesfully captured a good image: ${result}`)
})

We can also stop the feedback by calling the stopFeedback function. This will stop any ongoing feedback from the camera component.

truliooCapture.stopFeedback(documentCamera.id)

The SDK also provides the onFeedbackState function that we can listen to for the ongoing capture state updates that is started by the startFeedback function. This allows us to add any logic needed or render any necessary custom UI needed based on the current capture state. It is recommended to call the onFeedbackState function and start listening to the feedback state before calling the startFeedback function.

truliooCapture.onFeedbackState(
    (feedbackState: FeedbackState) => {
        switch (feedbackState) {
            case FeedbackState.NONE:
                // Nothing happened yet/no document detected at this point.
                break
            case FeedbackState.CAPTURING:
                // Currently in the middle of capturing a document.
                break
            case FeedbackState.BLUR:
                // The detected document is blurry. Show a blur UI feedback to user.
                break
            case FeedbackState.SUCCESS:
                // Manage to captured a document.
                break
            default:
                break
        }
    },
)

Note that the above flow is the same for the selfie capture type too.

Analysing the captured image result through post capture verify feedback

Once we have the resulting TruliooCaptureResponse image data, we are able to get a post capture feedback by simply calling the verifyImage function that is part of the response data. This will give use more information regarding the captured image and let us decide whether we should submit the captured image for verification by calling the acceptImage function.

// As an example, we will submit the captured image for document verification if the post capture feedback returns a CAN_BE_PROCESSED status.
result.verifyImage().then((verifyFeedback: TruliooVerifyResponse) => {
    if (verifyFeedback.verificationStatus == VerificationStatus.CAN_BE_PROCESSED) {
        // Note that the acceptImage can be called outside of the verifyImage function.
        result.acceptImage().then((status: boolean) => {
            console.log("Successfully submitted the image")
        })
    } else {
        // Do something else. Ex. notify the user about the not accepted image and retake a new image.
    }
})

Finalize the document verification transaction

Once we submitted all the necessary image for the transaction, we can finalize the transaction by calling the submitTransaction function.

truliooCapture.submitTransaction().then((status: Boolean) => {
    console.log("Transaction Successfully submitted.")
})