Getting error while serve the microblink code

[pjain8889]

I update the In browser SDK version and when to compile, I am getting multiple errors.

Please let me know what I am missing here.

I tried to follow the "https://codepen.io/microblink/pen/BajeeMx" URL but I am getting an error there also.

@microblink folder is updated with basics/advanced/advanced-threads when i run the command npm install :
npm install @microblink/blinkid-in-browser-sdk

Thanks!

[vjekoart]

Hi @pjain8889,

Sorry for the delayed answer.

I wasn't able to reproduce this issue. Could you provide more information about the technical environment on your side?

In particular, could you share the following information:

1. If you're getting Type '"BASIC"' is not assignable to type 'WasmType' error on our Codepen example, could you let us know which web browser are you using?
2. What happened before errors in the first screenshot? It looks like source TypeScript files are copied to a folder named assets, even though they're not intended to be used that way.

At first look, it seems like there are multiple versions of our SDK in your system, but I cannot be 100% sure.

Sincerely,
Vjekoslav

[pjain8889]

I am not getting Type '"BASIC"' is not assignable to type 'WasmType' issue in codepen. I am getting this issue only in my code.

Please ignore the above error shows in first screenshot. It is fixed now.

Thanks,
Prashant Jain

[vjekoart]

I'm still not able to reproduce the issue with wasmType.

Could you provide us with the complete integration code for the UI component?

For example, this is the relevant TypeScript code in our official example, and everything works fine. At least on my local machine in Visual Studio Code.

// Import typings for UI component
import "@microblink/blinkid-in-browser-sdk/ui";

// Import typings for custom events
import
{
    EventFatalError,
    EventScanError,
    EventScanSuccess
} from "@microblink/blinkid-in-browser-sdk/ui/dist/types/utils/data-structures";

function initializeUiComponent()
{
    const blinkId = document.querySelector( "blinkid-in-browser" ) as HTMLBlinkidInBrowserElement;

    if ( !blinkId )
    {
        throw "Could not find UI component!";
    }

    blinkId.wasmType = "BASIC";

    blinkId.licenseKey = "...";
    blinkId.engineLocation = window.location.origin;
    blinkId.recognizers = [ "BlinkIdRecognizer" ];

    ...
}

window.addEventListener( "DOMContentLoaded", () => initializeUiComponent() );

[pjain8889]

I am using angular framework and using the code this way :

**import * as BlinkIDSDK from "@microblink/blinkid-in-browser-sdk";

const loadSettings = new BlinkIDSDK.WasmSDKLoadSettings(license_key);

loadSettings.wasmType = "BASIC";
loadSettings.engineLocation = "https://unpkg.com/@microblink/[email protected]/resources/";

BlinkIDSDK.loadWasmModule(loadSettings).then
(
(wasmSDK: BlinkIDSDK.WasmSDK) => {
this.startScanUpload(wasmSDK);
},
(error: any) => {
// Error happened during the initialization of the SDK
console.log("Error during the initialization of the SDK!", error);
}
)**

Is there anything I am missing?

I am following the below codepen URL for implementation:
https://codepen.io/microblink/pen/BajeeMx

NOTE: Earlier, I was using the In-browser SDK 5.7.0 version.

Thanks,
Prashant Jain

[vjekoart]

Oh, thank you for the information, now everything makes sense :)

When using BlinkID In-browser in the TypeScript environment, it's advised to look at the examples written in TypeScript. For example, BlinkID camera scan example can be found here.

Since everything is in the TypeScript environment, it's not possible to use loadSettings.wasmType = "BASIC";. This way of usage is intended for the JavaScript environment.

To solve this issue, instead of a string, provide an enum for wasmType. This would be the correct code loadSettings.wasmType = BlinkIDSDK.WasmType.Basic;.

Let me know if this has fixed your issue.

Sincerely,
Vjekoslav

[pjain8889]

Thanks, It works.

Can you please let me know which link should I follow to check the document Type and where I will get the document type in the micro blink response?

Should I follow the below link to document type in In-browser SDK?
https://github.com/BlinkID/blinkid-in-browser/blob/master/src/Recognizers/BlinkID/Generic/ClassInfo.ts

Thanks,
Prashant Jain

[vjekoart]

Hi @pjain8889,

I'm glad everything is now working as expected.

The ClassInfo type is the right way to determine the document type. When the recognition is completed, check the value of the classInfo property value to get information about the document type.

Sincerely,
Vjekoslav

[pjain8889]

Just want to know, what is the document type in mrz json because I am seeing classinfo and mrz have different document type.

Thanks,
@vjekoart

[vjekoart]

@pjain8889, could you provide more details about this problem?

I would like to point out that MRZ has a different data structure than the ClassInfo enum. That is, MRZ has the MrtdDocumentType enum, which provides generic information about document type.

On the other hand, the ClassInfo enum is much more specific. It provides information about a specific document type. For example, in the same scenario, classInfo may give information about a country and a region.

Also, some documents don't have a MRZ, so it's much more reliable to get information about document type from the classInfo property.

Here's an example when a user scans a German passport:

{
    ...
    classInfo:
    {
        country: Germany,
        documentType: passport
    },
    mrz:
    {
        documentType: passport
    }
    ...
}

[vjekoart]

Hi @pjain8889,

Do you have anything new regarding this issue? That is, have you managed to integrate our SDK as intended?

Sincerely,
Vjekoslav

[pjain8889]

Hi @vjekoart,
I uploaded one passport and I am getting different document types in the class info and mrz section.
Please see the screenshot.

I saw this issue with multiple documents.

Can you please let me know what is the issue here?

Thanks,
Prashant

[vjekoart]

Hi @pjain8889,

As I can see from the provided results, you're getting the same document type.

Property classInfo.documentType is 25. If you look at the ClassInfo.ts file, you can see that 25 represents a passport.

On the other hand, property mrz.documentType is 2. This is another data structure, documented in MrtdStructures.ts file. As you can see, number 2 represents MRTD_TYPE_PASSPORT in the MrtdDocumentType enum.

Sincerely,
Vjekoslav

[pjain8889]

Hi @vjekoart,

Thanks for the clarification above.

I just have one more query that the currentsettings() is not working for "CreateBlinkIdRecognizer". I have a single function to handle the single side scan and double side scan so using different recognizer as per the sides but it gives an error when calling createBlinkIDRecognizer for the single side.

Please let me know what I am missing here. How can I fix it?

Thanks,
Prashant