face-api.js、webcamjs循环拍照识别人脸数量

import React, { Component } from 'react';
import * as faceapi from 'face-api.js';
import * as webcamjs from 'webcamjs';
import { Button } from 'antd';
class FaceRecognition extends Component {
  // 初始化摄像机
  _initCamera = async () => {
    await faceapi.nets.ssdMobilenetv1.loadFromUri(
      'http://localhost:8004/faceapi-weights/',
    );

    await faceapi.nets.faceLandmark68Net.loadFromUri(
      'http://localhost:8004/faceapi-weights/',
    );
    await faceapi.nets.faceRecognitionNet.loadFromUri(
      'http://localhost:8004/faceapi-weights/',
    );
    // 设置好打开摄像机
    this.openCamara()
  };

  componentDidMount(){
    // 初始化摄像环境
    this._initCamera()
  }

  componentWillUnmount() {
    // 关闭摄像头
    webcamjs.reset()
  }

  // 打开摄像头
  openCamara = () => {
    webcamjs.attach('#camera');
    // 延时拍照
    setTimeout(()=>{
      // 循环拍照
      this.loopTakePicture()
    },500)
  };

  // 进行拍照
  takePicture =  () => {
    webcamjs.snap( (imgUrl)=> {
      document.getElementById('picture').src = imgUrl
    });
  };

  // 循环拍照
  loopTakePicture = ()=>{
    setInterval(() => {
      this.takePicture()
      setTimeout(()=>{ this.indetifyPeople()} , 500)
    }, 5000)
  }

  // 识别人像
  indetifyPeople = async () => {
    const picture0 = document.getElementById('picture');
    const picture = await faceapi.detectAllFaces(picture0).withFaceLandmarks().withFaceDescriptors();

    // 监测当前页面中不止一张脸或是没有脸的时候
    if (!picture || picture.length !== 1) {
      console.log('人脸识别错误'); return;
    } else {
      console.log('人脸正常');
    }
  };

  render() {
    return (
       <>
         <h1>人脸识别</h1>
         <div id="camera" style={{width: 638, height: 359, background : '#000'}}></div>
         <img id="picture"/>
         <Button type="primary" onClick={this.takePicture} style={{margin: '0 auto',width : 120}}>采集人脸</Button>
       </>
     );
  }
}

export default FaceRecognition;