在WebWorker中使用FaceAPI.js的正确姿势-逐梦个人博客

FaceAPI.js为我们提供了一系列人脸检测、识别和面部特征分析等功能，而且专为在Web应用程序中使用而设计，对于前端或node应用来说都十分友好。如果要将其在我们的前端项目中接入，出于对性能的考量，大部分开发者可能会将其放入WebWorker中去运行，但是遗憾的是，官方文档中并没有关于在WebWorker中使用的介绍，而且直接将其放入WebWorker中根本就没办法跑起来。

虽然官方没有明确的介绍，但是技术社区、论坛中还是有不少网友讨论这个问题，并且提供了一些行之有效的方案，本文将就公司项目中使用并验证通过的一个解决方案做一个记录。FaceApi.js提供了2种运行环境的支持，浏览器模式和node模式，如果直接将浏览器模式移入Webworker，是行不通的，因为WebWorker中支持特性有限，比如Image对象，常规Canvas都不支持，而这些都是FaceApi.js浏览器模式下所必须的，所以浏览器模式没办法在WebWorker中使用。那么node模式呢？我们知道node环境下默认是没有Canvas和Images等类的，但FaceApi.js作为一个图像处理的库，势必会用到这些，那么在node模式下FaceApi.js要么自己导入了Canvas和Image库，要么提供了某种方式允许我们将Canvas和Image等对象导入到FaceApi.js的运行环境中，faceapi.env.monkeyPatch正是我们所需要的。其实明白了这点接下来就好做了，关键代码：

faceapi.env.setEnv(faceapi.env.createNodejsEnv());
faceapi.env.monkeyPatch({
  Canvas: OffscreenCanvas,
  createCanvasElement: () => {
    return new OffscreenCanvas(480, 270);
  }
});

在我们使用faceapi的地方靠前的位置加入上面的代码，这段代码在react中测试通过，不过控制台会报一个“WARNING in ./node_modules/face-api.js/build/es6/env/createFileSystem.js Module not found: Error: Can't resolve 'fs' in '...\node_modules\face-api.js\build\es6\env'”的警告，通过在webpack的配置文件中添加

即可消除这个警告，该配置项和entry同级。

对于React项目我们需要经历打包才能得到最终的产物，整个跑下来是没有问题的，一切正常。但是如果我们用原生的js文件来编写worker并在html中引用，上面的方式就会报错并中止运行，主要有以下错误：

1、Uncaught ReferenceError: global is not defined at Object.Kd [as createNodejsEnv] (face-api.min.js:1:564455)

通过添加代码

即可解决上面的报错，但是会出现下面的报错。

2、Uncaught (in promise) Error: fetch - missing fetch implementation for nodejs environment跟踪报错的位置，如下图：

我们发现有一个global.fetch存在性判断，因为后面加载模型需要使用fetch，但是我们当前已经切换成了node模式，global被我们定义成了空对象，所以要解决这个错误，只需要将fetch传入即可，WebWorker环境下是支持fetch的。

整合一下所有的代码：

global = { fetch };
faceapi.env.setEnv(faceapi.env.createNodejsEnv());
faceapi.env.monkeyPatch({
  Canvas: OffscreenCanvas,
  createCanvasElement: () => {
    return new OffscreenCanvas(480, 270);
  }
});

至此，我们已经可以愉快的在WebWorker中使用FaceApi.js强大的功能啦！

在线demo：https://demo.deanhan.cn/faceapi-in-webworker/

如需下载案例中涉及的源码及素材包，请在关注本站公众号后发送：faceapi

赏

推荐订阅源

逐梦个人博客