не сразу появляется рамка face detector после загрузки страницы

Question

У меня стоит задача определять лицо ли в кадре или нет, и возможность сделать снимок выделенной области. Функционал рабочий, но проблема в том, что после открытия или перезагрузки страницы, проходит довольно много времени, прежде чем появится рамка детектора:

Использую face-api.js и vue2, уверена, что проблема в неправильной структуре кода, но не хватает опыта исправить. Пожалуйста, помогите оптимизировать. Вот ссылка в песочницу codesandbox. Вот код:

import * as faceapi from 'face-api.js'

export default {
  name: 'FaceId',
  methods: {
    async extractFaceFromBox (inputImage, box) {
      const outputImage = document.getElementById('outputImage')
      const regionsToExtract = [
        new faceapi.Rect(box.x, box.y, box.width, box.height)
      ]
      let faceImages = await faceapi.extractFaces(inputImage, regionsToExtract)
      if (faceImages.length === 0) {
        console.log('Face not found')
      } else {
        faceImages.forEach(cnv => {
          outputImage.src = cnv.toDataURL()
        })
      }
    },
    startVideo () {
      const video = document.getElementById('video')
      navigator.getUserMedia(
        { video: {} },
        stream => video.srcObject = stream,
        err => console.error(err)
      )
    },
    async getImage () {
      const video = document.getElementById('video')
      const detections = await faceapi.detectAllFaces(video).withFaceLandmarks()
      if (!detections.length) {
        alert('Лицо не обнаружено')
        return
      }
      this.extractFaceFromBox(video, detections[0].detection.box)
    }
  },

  beforeMount () {
    Promise.all([
      faceapi.nets.tinyFaceDetector.loadFromUri('/models'),
      faceapi.nets.faceLandmark68Net.loadFromUri('/models'),
      faceapi.nets.ssdMobilenetv1.loadFromUri('/models')
    ]).then(this.startVideo)
  },
  mounted () {
    const video = document.getElementById('video')
    const wrap = document.getElementById('wrap')

    video.addEventListener('play', () => {
      const canvas = faceapi.createCanvasFromMedia(video)
      canvas.style.position = 'absolute'
      wrap.append(canvas)
      console.log('canvas created', canvas)
      const displaySize = { width: video.width, height: video.height }
      faceapi.matchDimensions(canvas, displaySize)
      setInterval(async () => {
        const detections = await faceapi.detectAllFaces(video).withFaceLandmarks()
        const resizedDetections = faceapi.resizeResults(detections, displaySize)
        canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height)
        faceapi.draw.drawDetections(canvas, resizedDetections)
      }, 100)
    })
  }
}

<template>
  <div class="face-wrap" id="wrap">
    <video id="video" width="720" height="560" autoplay muted></video>
    <button @click="getImage" id="screen">screen</button>
    <img id="outputImage" />
  </div>
</template>

БЛОГ НА HUSL

не сразу появляется рамка face detector после загрузки страницы

Ответы (0 шт):