blinkcard / blinkcard-in-browser

21 stars 11 forks source link

DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://localhost:4200/BlinkCardWasmSDK.js' failed to load #2

Closed shahzib111 closed 3 years ago

shahzib111 commented 3 years ago

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.

In the browser I get the following error zone-evergreen.js:171 Uncaught Error: Unknown message action: undefined at context.onmessage (BlinkCardWasmSDK.worker.min.js:15) at wrapFn (zone-evergreen.js:1218) at ZoneDelegate.invokeTask (zone-evergreen.js:399) at Zone.runTask (zone-evergreen.js:167) at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:480) at invokeTask (zone-evergreen.js:1621) at globalZoneAwareCallback (zone-evergreen.js:1647)

vjekoart commented 3 years ago

Hi @shahzib111,

It looks like the SDK cannot load engine, i.e. WASM and support JS file.

When using the SDK in the Angular app, it's required to set the proper location of WASM resource files. This can be done with the loadSettings.engineLocation property.

For example, you can set the value of aforementioned property in the following way loadSettings.engineLocation = window.location.origin + '/assets/';.

In any case, here's the link to the relevant section from the official documentation.

Sincerely, Vjekoslav