在Ionic4中使用Javascript API

Question

我需要在Ionic4项目中使用Javascript API (https://github.com/justadudewhohacks/face-api.js)。为此，我需要将lib face-api.min.js导入到我的文件夹中。但据我所知，Ionic只适用于Typescripts文件...我找过医生，但没有找到...

以下是我在浏览器中使用的代码，我需要在Ionic项目中使用：

const video = document.getElementById('video')

Promise.all([
  faceapi.nets.tinyFaceDetector.loadFromUri('/models'),
  faceapi.nets.faceLandmark68Net.loadFromUri('/models'),
  faceapi.nets.faceRecognitionNet.loadFromUri('/models'),
  faceapi.nets.faceExpressionNet.loadFromUri('/models')
]).then(startVideo)

function startVideo() {
  navigator.getUserMedia(
    { video: {} },
    stream => video.srcObject = stream,
    err => console.error(err)
  )
}

video.addEventListener('play', () => {
  const canvas = faceapi.createCanvasFromMedia(video)
  document.body.append(canvas)
  const displaySize = { width: video.width, height: video.height }
  faceapi.matchDimensions(canvas, displaySize)
  setInterval(async () => {
    const detections = await faceapi.detectAllFaces(video, new faceapi.TinyFaceDetectorOptions()).withFaceLandmarks().withFaceExpressions()
    const resizedDetections = faceapi.resizeResults(detections, displaySize)
    canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height)
    faceapi.draw.drawDetections(canvas, resizedDetections)
  }, 100)

})

它的语法与Typescript相同(除了document.GetElementById，但我们会适应)，但只有在我可以调用API文件时才能工作。

有人知道如何在Ionic4项目中实现JS文件吗？

Answer 1

有一个用于加载异步JavaScript文件的库。https://www.npmjs.com/package/scriptjs

安装程序包：

npm i scriptjs

然后在任何地方使用它，如下所示：

import { get } from 'scriptjs';

ngOnInit() {

    get("assets/js/searchEmp.js", () => {
        getSerchInspContext = this;
        loadSearchEmp();
    });}

或

您可以简单地使用jquery方法来附加或删除标头中的脚本标记。

要添加.js文件，请在页面加载时调用以下代码：

$('head').append('<script async src="assets/js/search.js"></script>');

删除.js文件：

document.querySelector('script[src="assets/js/search.js"]').remove();

Answer 2

我看到了一个示例github存储库，您可以查看它的引用：

Ionic4-ngx-face-api-js