Question

我正在尝试构建使用tensorflowjs和coco-ssd模型的离子应用程序，以检测来自相机的图像上的对象。另外，我需要能够在使用相机时切换手电筒。当我像通过promise进行await调用一样使用模型的检测功能时，它将停止另一个“线程”，直到完成检测为止。这样可以防止手电筒立即切换，在按下按钮（切换手电筒的按钮）后，它必须等待大约半秒钟才能打开或关闭。

我决定在Web Worker中使用coco-ssd，但是我发现由于以下错误，我无法在Web Worker中导入节点模块：

SyntaxError: import declarations may only appear at top level of a module   worker-test.js:1

我已经搜索了一些类似的问题，但是几乎没有人在web worker中导入模块，而有的人则是在javascript中导入模块。要在js中启用模块导入，您只需要将另一个参数传递给worker构造函数：new Worker('url/to/script.js', {type: 'module'}) 但事实是，您不能在typescript中将第二个参数传递给worker构造函数，因此我无法创建这样的worker。

相关文件：
test.page.ts

...
ionViewDidEnter() {
    this.testWorker();
  }

  testWorker() {
    const worker = new Worker('assets/worker-test/worker-test.js');

    worker.onmessage = function(event) {
      console.log('onmessage');
      console.log(event.data);
    };

    worker.postMessage('From main thread');
  }
...

worker-test.js

import * as cocoSsd from '@tensorflow-models/coco-ssd';

postMessage("posting message");

onmessage = function(data) {
    console.log('In worker');
    console.log(data.data);
    console.log(model);
};

let model;

cocoSsd.load().then((res) => {
    model = res;
});

离子信息：

   ionic (Ionic CLI)             : 4.12.0 (~/.nvm/versions/node/v12.4.0/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.6.2
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

谢谢您的帮助。

Answer 1

打字稿的编译选项应针对es2015或esnext。

{
  ...
  "compilerOptions": {
    "lib": ["esnext", "webworker"],
  }
}

另外添加"webworker"将表示该项目将使用webworker api。

如何将节点模块导入Web Worker脚本？

1 个答案: