Recently, I attempted to integrate this credit card reader into my Angular application. Despite carefully following all the installation steps and obtaining a valid license key, I encountered 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 adherence to the documentation, I've implemented the following method in my component:
scanCard() {
if ( BlinkCardSDK.isBrowserSupported() ) {
const loadSettings = new BlinkCardSDK.WasmSDKLoadSettings( 'sRwAAAYJbG9jYA==' );
BlinkCardSDK.loadWasmModule( loadSettings ).then
(
( wasmSDK: BlinkCardSDK.WasmSDK ) => {
// Successfully initialized SDK, save 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 occurred during SDK initialization
console.log( 'Error during SDK initialization!', error );
});
} else {
console.log( 'This browser is not supported by the SDK!' );
}
}
In the HTML file, you will find:
<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>
Although I have included the BlinkCardWasmSDK.js in /src/assets/BlinkCardWasmSDK.js, the error persists. Could there be a missing reference that I overlooked? Any assistance would be greatly appreciated.