[proJ] VoiceFlow Face-API

React에서 Face-API 사용하기

face-api.js 깃허브 저장소 링크 : face-api.js

face-api란 ?

• 얼굴 인식 라이브러리
• 얼굴인식(faceRecognitionNet)
• 얼굴 랜드마크(faceLandmark68Net)
• 얼굴 표정 인식(faceExpressionNet)
• 연령 추정 및 성별 인식 (tinyFaceDetector)

  사진 관리, 보안 시스템, 사회적 미디어 분석, 게임 개발 등 다양한 분야에서 활용될 수 있다.

React에서 face-api 사용하기

step 01. face-api.js 패키지 다운

npm install face-api.js 

step 02. public 폴더 안에 models 폴더 넣기

models폴더
(위의 models폴더 클릭 시 압축된 models 폴더 다운)

step 03. face-api를 사용할 js/jsx 파일의 상위에 작성

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

step 04. 필요한 모델 로드하기

// fae-api를 사용할 jsx 또는 js에 추가하기 
  useEffect(() => {
    Promise.all([
      faceapi.nets.tinyFaceDetector.loadFromUri('/models'), 
      faceapi.nets.faceLandmark68Net.loadFromUri('/models'),
      faceapi.nets.faceRecognitionNet.loadFromUri('/models'),
      faceapi.nets.faceExpressionNet.loadFromUri('/models'),
    ]).then(startVideo);
  }, []);

step 05. video와 canvas 태그

<video style={CameraStyle} ref={videoRef} onLoadedMetadata={detectFace} autoPlay muted />
			    
<canvas ref={canvasRef} style={{ position: 'absolute', top: 0, left: 0, width: 838, transform: "scaleX(-1)"}}/>

step 06. 함수 작성

얼굴 감지

const detections = await faceapi.detectAllFaces(input)

얼굴 랜드마크

const detectionsWithLandmarks = await faceapi.detectAllFaces(input).withFaceLandmarks()

ex) 왼쪽 오른쪽 방향 표시 함수 
        const faceDirection = getFaceDirection(resizedDetections);
        if (faceDirection === 'left') {
          console.log('오른쪽');
        } else if (faceDirection === 'right') {
          console.log('왼쪽');
        }
          const getFaceDirection = (detections) => {
    if (!detections || detections.length === 0) {
      return 'unknown';
    }

    const landmarks = detections[0].landmarks;
    const noseX = landmarks.getNose()[0].x;

    const movementDistance = Math.abs(noseX - previousNoseX);

    let faceDirection = 'unknown';
    const movementThreshold = 5;
    if (movementDistance > movementThreshold) {
      if (noseX < previousNoseX) {
        faceDirection = 'left';
      } else if (noseX > previousNoseX) {
        faceDirection = 'right';
      }

      previousNoseX = noseX;
    }

    return faceDirection;
  };