DOMException：无法在“WorkerGlobalScope”上执行“importScripts”：“http://localhost:4200/BlinkCardWasmSDK.js”处的脚本无法加载答案

【问题标题】：DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://localhost:4200/BlinkCardWasmSDK.js' failed to loadDOMException：无法在“WorkerGlobalScope”上执行“importScripts”：“http://localhost:4200/BlinkCardWasmSDK.js”处的脚本无法加载
【发布时间】：2021-05-17 20:35:19
【问题描述】：

我正在尝试让this 信用卡读卡器在我的 Angular 应用程序上工作。我按照阅读中的所有步骤操作并获得了许可证密钥，但由于某种原因，我收到以下错误

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.

在我的组件中，我根据说明实现了以下方法：

 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!' );
    }
  }

在我拥有的 html 中：

<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>

我在 /src/assets/BlinkCardWasmSDK.js 中添加了 BlinkCardWasmSDK.js，但它仍然给我错误。我是否缺少参考资料或其他内容？提前感谢您的帮助。

【问题讨论】：

标签： angular typescript npm angular11 domexception

【解决方案1】：

问题是 BlinkID 找不到它需要的资源。您需要将其指向架构师、构建、选项和最后资产数组中的 angular.json 配置文件 (Angular workspace configuration docs) 中的资源位置。

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

您不需要将 BlinkID 资源移动到您的资产中，而是指向它在 node_modules 中的位置。让我知道这是否有帮助。

【讨论】：