blinkid / blinkid-in-browser Goto Github PK

WASM is supported by iOS since version 11 but blinkid-in-browser doesn't work on any version lower than iOS14.

Hello, good people,

We're using prebuilt UI web component, but I've come across a piece of code that does not work as expected in our project.

The blinkid-in-browser web component accepts a property called translations which in theory should replace defaultTranslations in translations.service.ts, which should accept both string and string[].

The implementation for the TranslationsService is the following:

constructor(alternativeTranslations?: { [key: string]: string|Array<string> }) {
    this.translations = defaultTranslations;

    for (const key in alternativeTranslations) {
      if (typeof this.translations[key] === 'string') {
        this.translations[key] = alternativeTranslations[key];
      }
    }
  }

The reality is - 2 default keys are never overwritten (camera-feedback-scan-front and camera-feedback-scan-back) because the condition is never met with string[] type.

Our usage sample is as per docs:

<script>
  // select web component DOM node
  el.licenceKey = ...
  // all other config
  el.translations = { 'camera-feedback-scan-front': 'This is never replaced with defaults' }
</script>

We have tried using rawTranslations api, but it is the same result and when looking at the source code, I think it is never utilised at all? But please don't take my word for it, it is only what I understood from a piece of code in blinkid-in-browser.tsx:287 in componenWillRender because this.translations will always be available since at least they will have assigned defaultTranslations from TranslationService instance ?

Best regards,

I have checked the live examples mentioned in the below link and it is awesome!

https://github.com/BlinkID/blinkid-in-browser

Is it possible to scan the identity document from both sides from image file.

Can you please add one more live example, how we can scan the identity document from both sides from image file.

let me know if I am missing something.

Thanks in Advance!

I'm using a combined recognizer to scan the front and back of my NC DL, but the issuingAuthority is an empty string (in the result root, but also in the frontViz, backViz and barcode properties. Within the barcode.barcodeData.stringData I see the AAMVA Issuer Identification Number of 636004, so it should be simple to lookup the issuing authority. I don't see another value

Having the issuing authority for a DL is very important.

Passport scanning does propery extract a value for the issuingAuthority.
The issuingAuthority at the root level has the same value as frontViz.issuingAuthority, and there are slightly different (but more useful) value for mrz.issuer and mrz.issuerName

I have taken the JS example and tried to run it on a Philippines Driver License card. The example says "Could not extract information". The same example provided on your CodePen links provide the same message. Am I missing something?

1. I am getting an error while clicking on the "start scan" button. It works fine with your code pen example.

2. I am getting the below error in the code for the WasmType.
   

Please let me know what I am missing here.

Is there any way to handle the extract data for the specific document we passed.

Suppose user select a passport from the dropdown and then he will be able to extract data for a passport only. If he uploads the driver`s licence then it shows some error which says to upload a passport only.
Any support for this type of issue?

Thanks in Advance!

Thanks,
Prashant

Is there any way to get the scan image url when scan through webcam.

Please help.

In blink id In-browser SDK I am trying to provide my license file instead of a string and cannot a find a way to do it.

I looked into blink id android sdk and there is a function "setLicenseFile" through which we can provide license file instead of a string. It will be great if similar type of feature is available in blink id In-browser SDK .

Thanks.

Hello Team,

We are facing some issues while scanning some of the docs. Please let us know about the particular resolution which you are looking for or something else related to quality of images, which might be missed by us. Also, please let us know about the max file size and the extensions which are supported by Blink ID.

Please find below the details of our implementation.

As per our requirement, we should allow the user to upload the doc for scanning and restrict him from using the web camera. So, we are using Blink ID for that and we have single scan option available for us.
Please find below some information of the recognizer, as we are directly creating the recognizer and recognizer running classes.
Please find below the code snippets which can help:-

const genericIDRecognizer = await BlinkIDSDK.createBlinkIdRecognizer(sdk);
const idBarcodeRecognizer = await BlinkIDSDK.createIdBarcodeRecognizer(sdk);

const recognizerRunner = await BlinkIDSDK.createRecognizerRunner(
// SDK instance to use
sdk,
// List of recognizer objects that will be associated with created RecognizerRunner object
[genericIDRecognizer],
false
);
// 3. Prepare image for scan action - keep in mind that SDK can only process images represented in
// internal CapturedFrame data structure. Therefore, auxiliary method "captureFrame" is provided.
let file = null;
const imageRegex = RegExp(/^image//);
for (let i = 0; i < fileList.length; ++i) {
if (imageRegex.exec(fileList[i].type)) {
file = fileList[i];
}
}

const imageFrame = BlinkIDSDK.captureFrame(document.getElementById(name));
const processResult = await recognizerRunner.processImage(imageFrame);
let genericIDResults;
if (processResult !== BlinkIDSDK.RecognizerResultState.Empty) {
genericIDResults = await genericIDRecognizer.getResult();
}

Kindly let us know if anything else is required from our end.

Regards,
Sachin

Hi!

I'm having trouble figuring out how I can use the SuccessFrameGrabberRecognizer in the UI web component.

I couldn't find an example of that in your documentation. Can I use SuccessFrameGrabber within the UI web component?

<SuccessFrameGrabber ... recognizers="SuccessFrameGrabberRecognizer"> dosen't work.

I think If error is thrown directly in the constructor then its fine, but throwing the error in the onerror's callback will lead to losing the context and the promise will not get rejected. Or do I miss something?

const imageFrame = BlinkIDSDK.captureFrame( imageElement );
const processResult = await recognizerRunner.processImage( imageFrame );
const recognitionResult = await recognizer.getResult();

ImageElment is a html image element .

But here I want to upload a pdf file to BlinkIDSDK.

Could you please tell me please. How can I pass a pdf file here to BlinkIDSDK.?

Thanks,
Shubham

If I try to add the sdk with yarn add or adding it manually and then running yarn install, I get:
Invalid hosted git fragment "github:BlinkID:blinkid-in-browser".

Installing it with npm works fine.

Yarn v1.22.0
Node v10.16.0

https://blinkid.github.io/blinkid-in-browser/examples/umd/index.html

Uncaught ReferenceError: BlinkIDSDK is not defined
    at index.html:45

Greetings,

I'm looking for a way to detect a face in the document and draw a quad around the face and crop the face from the document.
Particularly interested in the implementation in CombinedRecognizer.
Didn't find any settings related to face in BlinkIdCombinedRecognizerResult.

I'm having trouble figuring out how I can use the SuccessFrameGrabberRecognizer and BlinkIDCombined.

On the Example provided on your documentation it only uses BlinkID (scanning just one side of the ID).
How can I extract the images from both sides of the document?

Hi all,

We are currently running into a production issue and we are doing some troubleshooting steps on our end and have ran to various issues. I'm posting what would be our ideal setup, the issues around it, and hoping to see if we can get some help troubleshooting this issue.

We put the Expected / Actual sections of this issue up here for brevity, but please see the Details / Additional Context to know more about our scenario.

Expected Behavior

• Ideally we would like to be using the latest sdk: 5.11.1, but any version is fine
• Pointing the engine-location to unpkg should work just fine, as it has done so previously

Actual Behavior

We run into the following issues when the component is mounted:

JSX just for reference

const engineLocation = "https://unpkg.com/@microblink/[email protected]/resources"
...
<blinkid-in-browser
       ref={blinkId}
       license-key={licenseKey}
       recognizers="BlinkIdRecognizer"
       engine-location={engineLocation}
       include-success-frame={true}
       recognizer-options="returnFullDocumentImage, returnFaceImage"
 ></blinkid-in-browser>

Errors:

index.js:1 fatalError 
CustomEvent {isTrusted: false, detail: EventFatalError, type: "fatalError", target: blinkid-in-browser.hydrated, currentTarget: blinkid-in-browser.hydrated, …}
bubbles: true
cancelBubble: false
cancelable: true
composed: true
currentTarget: null
defaultPrevented: false
detail: EventFatalError {code: "SDK_LOAD_FAILED", message: "Failed to load SDK!", details: "Problem during initialization of worker file!"}
eventPhase: 0
isTrusted: false
path: (18) [mb-component.hydrated, slot, document-fragment, mb-container.hydrated, document-fragment, blinkid-in-browser.hydrated, div.css-1glq2si, div.css-1b3s1y3, div.css-pg23ef, div.css-1dlftso, div.css-1472lk3, main.css-0, div.css-15q7f2c, div#root, body, html.hydrated, document, Window]
returnValue: true
srcElement: blinkid-in-browser.hydrated
target: blinkid-in-browser.hydrated
timeStamp: 71938.78499994753
type: "fatalError"
__proto__: CustomEvent

BlinkIDWasmSDK.js:45 Uncaught DOMException: Failed to construct 'Worker': Script at 'https://unpkg.com/@microblink/[email protected]/resources/advanced-threads/BlinkIDWasmSDK.worker.js' cannot be accessed from origin 'https://drivers.dev.getcheckapp.com'.
    at Object.Fd (https://unpkg.com/@microblink/[email protected]/resources/advanced-threads/BlinkIDWasmSDK.js:45:42)
    at Object.Ud (https://unpkg.com/@microblink/[email protected]/resources/advanced-threads/BlinkIDWasmSDK.js:45:91)
    at Gb (https://unpkg.com/@microblink/[email protected]/resources/advanced-threads/BlinkIDWasmSDK.js:144:120)
    at _ (https://unpkg.com/@microblink/[email protected]/resources/advanced-threads/BlinkIDWasmSDK.js:194:280)
    at https://unpkg.com/@microblink/[email protected]/resources/advanced-threads/BlinkIDWasmSDK.wasm:wasm-function[4380]:0xc8df4
    at https://unpkg.com/@microblink/[email protected]/resources/advanced-threads/BlinkIDWasmSDK.wasm:wasm-function[4383]:0xc8fa9
    at https://unpkg.com/@microblink/[email protected]/resources/advanced-threads/BlinkIDWasmSDK.wasm:wasm-function[4385]:0xc90c2
    at Xa (https://unpkg.com/@microblink/[email protected]/resources/advanced-threads/BlinkIDWasmSDK.wasm:wasm-function[3882]:0xb0570)
    at E.___wasm_call_ctors (https://unpkg.com/@microblink/[email protected]/resources/advanced-threads/BlinkIDWasmSDK.js:197:81)
    at Sd (https://unpkg.com/@microblink/[email protected]/resources/advanced-threads/BlinkIDWasmSDK.js:31:95)

Specifications

Package Version: @microblink/blinkid-in-browser-sdk": "5.11.1"
Platform: Typescript React (CRA / react-scripts)

Details / Additional Context

• Initially we had the package version at ^5.8.1 but we were pointing our engine-location at https://unpkg.com/@microblink/blinkid-in-browser-sdk/resources/ (note: the lack of version locking within the url, so it probably just points to latest) - everything was working perfectly fine.
• Our team is guessing at some point, the latest version got bumped and was being served to the 5.8.1 component, thus causing the blinkid-in-browser component to crash.
• We moved the resources locally within the public folder, pointed to engine-location to /resources, but ran into some errors (failed to capture them, will reproduce momentarily)
• We then pointed the url to engine to https://unpkg.com/@microblink/[email protected]/resources and we ran into the following errors:

home/charlesbido/Documents/projects/check-app/node_modules/@microblink/blinkid-in-browser-sdk/ui/dist/esm-es5/blinkid-in-browser_10.entry.js
SyntaxError: /home/charlesbido/Documents/projects/check-app/node_modules/@microblink/blinkid-in-browser-sdk/ui/dist/esm-es5/blinkid-in-browser_10.entry.js: Identifier '__awaiter' has already been declared (609:9)

  607 | PERFORMANCE OF THIS SOFTWARE.
  608 | ***************************************************************************** */
> 609 | function __awaiter(thisArg, _arguments, P, generator) {
      |          ^
  610 |     function adopt(value) {
  611 |         return value instanceof P ? value : new P(function (resolve) {
  612 |             resolve(value);
printWarnings @ webpackHotDevClient.js:138
handleWarnings @ webpackHotDevClient.js:143
push.../../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:210

Error: Module build failed (from /home/charlesbido/Documents/projects/check-app/node_modules/react-scripts/node_modules/babel-loader/lib/index.js):
SyntaxError: /home/charlesbido/Documents/projects/check-app/node_modules/@microblink/blinkid-in-browser-sdk/ui/dist/esm-es5/blinkid-in-browser_10.entry.js: Identifier '__awaiter' has already been declared (609:9)

  607 | PERFORMANCE OF THIS SOFTWARE.
  608 | ***************************************************************************** */
> 609 | function __awaiter(thisArg, _arguments, P, generator) {
      |          ^
  610 |     function adopt(value) {
  611 |         return value instanceof P ? value : new P(function (resolve) {
  612 |             resolve(value);
    at Parser._raise (home/charlesbido/Documents/projects/check-app/node_modules/@babel/parser/lib/index.js:748)
    at Parser.raiseWithData (home/charlesbido/Documents/projects/check-app/node_modules/@babel/parser/lib/index.js:741)
    at Parser.raise (home/charlesbido/Documents/projects/check-app/node_modules/@babel/parser/lib/index.js:735)
    at ScopeHandler.checkRedeclarationInScope (home/charlesbido/Documents/projects/check-app/node_modules/@babel/parser/lib/index.js:4919)
    at ScopeHandler.declareName (home/charlesbido/Documents/projects/check-app/node_modules/@babel/parser/lib/index.js:4885)
    at Parser.registerFunctionStatementId (home/charlesbido/Documents/projects/check-app/node_modules/@babel/parser/lib/index.js:12417)
    at Parser.parseFunction (home/charlesbido/Documents/projects/check-app/node_modules/@babel/parser/lib/index.js:12397)
    at Parser.parseFunctionStatement (home/charlesbido/Documents/projects/check-app/node_modules/@babel/parser/lib/index.js:12024)
    at Parser.parseStatementContent (home/charlesbido/Documents/projects/check-app/node_modules/@babel/parser/lib/index.js:11714)
    at Parser.parseStatement (home/charlesbido/Documents/projects/check-app/node_modules/@babel/parser/lib/index.js:11676)
    at Object.../../node_modules/@microblink/blinkid-in-browser-sdk/ui/dist/esm-es5/blinkid-in-browser_10.entry.js (2.chunk.js:10)
    at __webpack_require__ (bootstrap:856)
    at fn (bootstrap:150)
    at Function.fn.t (bootstrap:194)
    at  groupOptions: {} namespace object:18

index-cb5c04e4.js:1310 Uncaught (in promise) TypeError: Cannot read property 'isProxied' of undefined
    at index-cb5c04e4.js:1310
    at step (index-cb5c04e4.js:45)
    at Object.next (index-cb5c04e4.js:26)
    at fulfilled (index-cb5c04e4.js:17)

Hi,

when I scan the document through camera, it works, but if I try to upload it via file upload (high quality scanned image) I get:
unable to read the document. Please try again.

I've tried on Windows' Chrome and Firefox, and on Mac's Chrome.

I have renamed the blink ID files and trying to load them with this snippet:

const loadSettings = new BlinkIDSDK.WasmSDKLoadSettings(options.licenseKey);
loadSettings.engineLocation = "(some-absolute-URL-of-mine)";
loadSettings.wasmModuleName = "custom";
const wasmSDK = await BlinkIDSDK.loadWasmModule(loadSettings);

Then custom.js is successfully loaded, but I get then a rejected promise Failed to load WASM in web worker!. I don't see the failing request in the network tab of chrome dev tools unfortunately.

Is this option really supported?

I am using Blink ID v.5.15.0 on Chrome 99. Thanks

Hi,

I run into an issue with version 5.12.0.
While using successFrameRecognizer, if I reload the page in Chrome v91.0.4472.114 on a Macbook, the whole browser freezes. The tab takes up 100% of the CPU and it hangs until I kill the process in Chrome's task manager.

• reproducible every time, although not on every machine
• only happens if dev tools is open, with the dev tools being closed, I couldn't reproduce the problem

I suspect that the sdk changed in a way that it triggers this behaviour, as with the same implementation, but an older version of the sdk (5.10.2) reloading the page while capturing worked fine.

Is there any other info I can provide that might be helpful?

Hey guys, just tried the new version of the sdk, and after upgrading the resources I run into this issue.
if I try to run the demo app, e.g. blinkid-camera, everything works fine, in that case the linked line has the real minified worker hardcoded.

Is this intended and I am the one who is doing something wrong or is this a bug?

Hi ,
i used the sample that in the web sdk menu but i faced an issue ,
in the browser the opened camera is the front one ,
but when i run the same code on mobile browser the opened on is the rear camera ,
there is no selection to which one to use.

Hey,
I think there is no way to stop the video recognition without pausing the video feed.

If I VideoRecognizer.cancelRecognition(), it pauses the video feed.
If I call VideoRecognizer.deleteRecognizer() without calling cancel firs, it will result in an unexpected error: "Uncaught (in promise): Recognizer runner is deleted. It cannot be used anymore!"
I think that's because there is still a setTimeout alive that tries to call processImage().

If I am wrong and there is a way, could you point me to the right documentation/code piece, please?

I am trying to setup Microblink Browser SDK in my angular project by referring the below link but I am getting the error during the initialization of the worker.
Refer link: https://github.com/BlinkID/blinkid-in-browser

Error Screenshot:

Firstly, I run the command "npm install @microblink/blinkid-in-browser-sdk" in the project and then import it in the component.
I am using the below code to run:

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

main() {
if (!BlinkIDSDK.isBrowserSupported()) {
return;
}
const loadSettings = new BlinkIDSDK.WasmSDKLoadSettings(this.licenseKey);
console.log("hello"); // Getting "hello" in console
loadSettings.loadProgressCallback = null;
loadSettings.engineLocation = "https://unpkg.com/@microblink/blinkid-in-browser-sdk/resources/";
loadSettings.useWebWorker = true;
loadSettings.workerLocation = "../../../node_modules/@microblink/blinkid-in-browser-sdk/resources";

BlinkIDSDK.loadWasmModule(loadSettings).then(
    (sdk) => {
      console.log(sdk);
    },
    (error) => {
        console.error("Failed to load SDK!", error);
    }
);

}

Can you please help me to fix the issue.

const imageFrame = BlinkIDSDK.captureFrame( imageElement );
const processResult = await recognizerRunner.processImage( imageFrame );
const recognitionResult = await recognizer.getResult();

ImageElment is a html image element .

But here I want to upload a pdf file to BlinkIDSDK.

Could you please tell me please. How can I pass a pdf file here to BlinkIDSDK.?

Thanks,
Shubham

I try to set custom translations to the web component on typescript and it looks like the type definition of the translations property is not matching with the defaultTranslations in the translations service.

Type definition of web component:

Type definition of defaultTranslations:

After using // @ts-ignore on that line it knows how to process the list of strings, so probably this is type definitions mismatch between the web component and translation service.

Currently VideoRecognizer class is exported, but it's constructor is private
see private constructor(); in /node_modules/@microblink/blinkid-in-browser-sdk/types/MicroblinkSDK/VideoRecognizer.d.ts

Is there a specific reason for not exposing it?

During the initial implementation we somehow missed that the createVideoRecognizerFromCameraStream actually requests a stream and sets it as a src for the video. While I see why this feature can have benefit for other users, in our case we already manage that part, and we need to and want to build on top of that.

To me it seams this functionality (where the implementation's responsibility is to handle the stream is already there in the VideoRecognizer. We can construct it simply with a video and the recognizeRunner.

We would like to request a change, which makes the VideoRecognizer publicly available.

I am using blinkid in browser , i installed it through npm, i am using a free trial, i am using it with webpack and babel ,i have it uploaded in heroku ,i am using blinkid combined to scan both sides of an ID document with a webcam, i am from el salvador , i am trying to scan a real ID document having the following problems:

1-I am trying to get the generated values of the photo in the document, but it does not always return an ArrayBuffer(0).

2-As well as the photo I am trying to get the values of the scanned signature, but in this case it always returns an ArrayBuffer(64) and all the 64 array elements are zero.

3-I don't extract the parent names, it always returns an empty string.
I also want to add that these properties do exist in the document.

I want to extract them for the purpose of converting them to base64 and display them in an img tag.

next I will leave some images to check that it does extract information and example of the document, but not in case of the photo, the signature and the names of the parents.

1-An example of the front part of the document

2-Result after the scanning of the photo and the signature

3-Result of the signature

4-Result of father's and mother's name

5-For you to see that it does scan the rest of the information

Thank you guys very much

Selecting combined id scan, make the upload file becaming disable.

i would like to be able to load 2 distinct files and re-enable the file upload functionality for combinedscan

Currently, the only way to change styling is by overriding some predefined variables which I found somewhat limited.
I came across this CSS pseudoelement https://css-tricks.com/styling-in-the-shadow-dom-with-css-shadow-parts/ where you expose
some parts of shadow dom which can be styled. Then shadow DOM elements could be styled from "parent".
What do you think about this?

Hi there,

Our integration is working great across many browsers, but this Samsung device in Chrome is failing to initialize the runner. In the Samsung browser on the same device, there's no issue. Any ideas on how to debug this issue, or if you've seen it before?

Thanks!

Hi,

This issue relates to #45 and because of that, we cannot handle/react to the error properly.

How to reproduce the the error, is not yet completely clear to us, we speculate that there might be a timing/rendering/api issue with videoWidth and the play() event. However we would like to at least handle the issue more gracefully, rather than throwing an unhandled error.

We see the following unhandled errors with the message:

Uncaught (in promise): Uncaught (in promise): IndexSizeError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source width is 0.

We get this only in case we use the VideoRecognizer.

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!

I am not able to scan the documents like Aadhar Card, PAN Card using the below demo links:

https://codepen.io/microblink/pen/BajeeMx
https://demo.microblink.com/in-browser-sdk/blinkid/index.html

I am using webcam (logitech HD 720p) to scan the documents.

I am not sure what I missing here. Can anyone help me here.

Thanks in Advance !!!

Hi
I Try to add the ui component https://github.com/BlinkID/blinkid-in-browser/tree/master/ui in Angular 12 app web.
After multiple steps, I am stuck. These have been my steps:

1. npm install @microblink/blinkid-in-browser-sdk and copy /ui/dist in assets/ui and copy /resources/ in src/assets/resources
2. In tsconfig.app.json I added "exclude": [ "src/assets/ui" ],
3. In angular.json I added "scripts": [ { "input": "src/assets/ui/blinkid-in-browser/blinkid-in-browser.esm.js", "inject": true, "bundleName": "blinkid-in-browser.esm" }]
4. In app.component.html I added

<blinkid-in-browser
      engine-location="http://localhost:4200/assets/resources/"
      license-key=""
      recognizers="BlinkIdRecognizer"
    ></blinkid-in-browser>

5. And inapp.component.ts I added

constructor(private readonly elementRef: ElementRef) {
  }

  afterViewInit() {
    const el = this.elementRef.nativeElement.querySelector('blinkid-in-browser');
    el.addEventListener('scanSuccess', (ev:any) => {
      // Since UI component uses custom events, data is placed in `detail` property
      console.log('Results', ev.detail);
    });

  }

With this config when run ng serve build correctly, but when open web in navigator, always get this console error:

SyntaxError: Unexpected token '{'. import call expects exactly one argument. blinked-in-browser.esm.js:1
I have tried different ways to load the script, but I always get that error. is there any way to load it correctly for Angular?

Thank you very much

Hello Team,
The documentcode in mrz object is not getting returned, so I am not able to identify which document has the user uploaded(Passport or any other national ID).

How we can save SuccessFrameGrabberRecognizer Result to a file in javascript (BlinkID/blinkid-in-browser) ?
We receive an arraybuffer but we didnt manage to save it to google cloud storage or a file.

Hi,
I noticed a substantial increase in file size from version 5.13 to version 5.14, mainly for the BlinkIDWasmSDK.data file. There is now around 10MB of data to download, that's a lot for a mobile device.

Is there a way to only load a subset of the data? Let's say I only want to scan German ID cards for example.
Thanks.

Hi,

We've tried enabling barcode reading via the camera feed but run into some issues on production.

We saw a lot of "Uncaught (in promise): Error: Missing video feed!\nError: Missing video feed!" unhandled errors.

It seems to me that the "Missing video feed" error thrown in VideoRecignozer's recognitionLoop method is not handled properly sometimes.

As far as I can see there are 3 calls to this method and only one of them handles the error, in the two other cases, the recognitionLoop is called within a setTimeout. In this case the error cannot be caught and processed properly.
e.g.

Can you confirm that this is the case or do we miss something and there is a way to handle this outcome?

I am trying to get this credit card reader to work on my angular application. I followed all the steps in the read me and got a license key as well but for some reason I am getting the following error

Error during the initialization of the SDK! DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://localhost:4200/BlinkCardWasmSDK.js' failed to load.

in my component I have the following method implemented from the instructions:

 scanCard() {
    if ( BlinkCardSDK.isBrowserSupported() ) {
      const loadSettings = new BlinkCardSDK.WasmSDKLoadSettings( 'sRwAAAYJbG9jYWxob3NjpmqGCINgvA==' );

      BlinkCardSDK.loadWasmModule( loadSettings ).then
      (
        ( wasmSDK: BlinkCardSDK.WasmSDK ) => {
          // The SDK was initialized successfully, save the wasmSDK for future use
          BlinkCardSDK.createBlinkCardRecognizer( wasmSDK ).then(recognizer => {
            BlinkCardSDK.createRecognizerRunner( wasmSDK, [ recognizer ], true ).then(recognizerRunner => {
              const cameraFeed = document.getElementById( 'myCameraVideoElement' ) as HTMLVideoElement;
              BlinkIDSDK.VideoRecognizer.createVideoRecognizerFromCameraStream(cameraFeed, recognizerRunner)
                .then(videoRecognizer => {
                  videoRecognizer.recognize().then(processResult => {
                    if ( processResult !== BlinkIDSDK.RecognizerResultState.Empty ) {
                     recognizer.getResult().then(recognitionResult => {
                       console.log( recognitionResult );

                     });
                    } else {
                      console.log( 'Recognition was not successful!' );
                    }
                    console.log(processResult);
                  });

              });
            });

          });
        },
        ( error: any ) => {
          // Error happened during the initialization of the SDK
          console.log( 'Error during the initialization of the SDK!', error );
        });
    } else {
      console.log( 'This browser is not supported by the SDK!' );
    }
  }

in the html I have:

<video id="videoElement">

I have added the BlinkCardWasmSDK.js in the /src/assets/BlinkCardWasmSDK.js but it still gives me the error. Am I missing a reference or something? Thanks in advance for the help.

Hello Team,

Can I get the progress of scan in case of BlinkID in Browser SDK. I need to show the progress of scanning to the user.

Regards,
Sachin Dhawan

The problematic scenario in my opinion is the following:
- call VideoRecognizer.recognize();
- this will lead to calling startRecognition
- before onScanningDone gets called, user e.g. goes back in the user journey, leaving the barcode reading page, hence, we call releaseVideoFeed() as suggested at

My suggestion is to either update the documentation to say cancelRecognition has to be called manually in this case or imo even better, just call cancelRecognition directly whenever the releaseVideoFeed is active. I don't see a reason why we shouldn't stop any recognition process when releaseVideoFeed is called.

EDIT:
my bad, in my app logic releaseVideoFeed() did not happen, so the videoFeed was not set to null.

Hi,
After enabling barcode reading with for camera, we started to get the following error:
Uncaught (in promise): Error: The play() request was interrupted or prevented by browser security rules

I suspect part of the problem is coming from not catching the error of calling .play()

Is there any way to find out the device have webcam/camera when we initialize the SDK so that we can show the camera button disabled.

Let me know if you need more info.

Thanks!

i would like to have access to your camera-combined ui, i mean the html,css files and the javascript logic behind it. what you have provided can't be customized .
I want to talk about this one: https://codepen.io/microblink/pen/GRZGQab

Hi ,

I need to get a call back when camera get detection failed on screen.

Could someone suggest me something please?

Thanks,
SP

Hi,

I am getting the below error:

I am using the correct key and domain but still getting error.

Can you please help me to find the issue here?

Thanks in advance

Thanks,
Prashant Jain

I want to develop the webcam functionality the same as shown in the below link.

https://microblink.com/products/blinkcard/web-api

Where I can click picture from the webcam and also save the image of the document which is scanned.
From where I can get the code?

Please help me.

Thanks in Advance.

I noticed the In-browser SDK version upgraded to 5.13.0 but not sure from today I am facing an issue in the older version(5.11.4) also.
While loading the WASM file in the browser, it is cached and giving an error when uploading an image for extraction.

It is cached instead of loading:

Error during upload a image:

This is the code I am using :
loadSettings.engineLocation = "https://unpkg.com/@microblink/[email protected]/resources/";
loadSettings.wasmType = BlinkIDSDK.WasmType.Basic;

Let me know what I am missing here or the issue is from the version. Please let me know as soon as possible.

Thanks,
Prashant