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

user_10302721 0
Viewed 486

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( 'sRwAAAYJbG9jYA==' );

      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( 'camera-feed' ) 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:

<body>
<div id="screen-initial">
  <h1 id="msg">Loading...</h1>
  <progress id="load-progress" value="0" max="100"></progress>
</div>

<div id="screen-start" class="hidden">
  <a href="#" id="start-scan">Start scan</a>
</div>

<div id="screen-scanning" class="hidden">
  <video id="camera-feed" playsinline></video>
  <!-- Recognition events will be drawn here. -->
  <canvas id="camera-feedback"></canvas>
  <p id="camera-guides">Point the camera towards Payment cards.</p>
</div>
</body>

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.

angular11 npm angular typescript domexception
1 Answers

The issue is BlinkID cannot find the resources it requires. You need to point it to where the resources are in your angular.json configurations file (Angular workspace configuration docs) in the architect, build, options, and finally assets array like so.

          "assets": [
              {
                "glob": "**/*",
                "input": "node_modules/@microblink/blinkid-in-browser-sdk/resources",
                "output": "/"
              }
            ]

You don't need to move the BlinkID resources to your assets but to instead point to where it live in the node_modules. Let me know if this has helped.

user_158103370
Related