자바스크립트 얼굴 인식 라이브러리 - face-api.js

[코드 강의 영상 - 짧고 재밌으니 아래 글을 참고해 완성해보자.]

신묘한 유튜브 알고리즘에 이끌려 face-api 라는 얼굴 인식 라이브러리를 경험해볼 기회가 있었다.

[face-api.js 깃허브 저장소 링크 : github.com/justadudewhohacks/face-api.js]

justadudewhohacks/face-api.js

내가 따라한 예제에서는 현재 감정을 추론하는게 전부였지만, 문서를 뒤적여 다른 모델을 찾아보면 인물의 나이 & 성별 추론, 특정 인물과의 일치 / 불일치 여부까지 검사가 가능하다. (잘하면 종설때도 써먹을 수 있겠다.)

 

결론부터 이야기하자면 굉장히 신선한 경험이었는데, <video> 태그를 활용해 웹캠을 조작하는 것부터 그간 C++과 파이썬의 점유물이라고 생각했던 영상처리를 꽤나 짧고 굵게 맛볼 수 있었다.

 

다만 몇 가지 문제가 있다면 강의에서 사용하는 navigator.getUserMedia() 함수는 deprecated 판정을 받아 navigator.mediaDevices.getUserMedia() 라는 함수로 대체하여 사용해야만 한다.

 

또 getUserMedia 함수에서 콜백을 통해 웹캠을 조작하면 이유는 몰라도 가끔씩 웹캠이 출력되지 않을 때가 있다.

영상에서는 소개하지 않았지만 getUserMedia 함수는 프라미스를 반환하는데, 프라미스를 통해 웹캠을 조작하면 문제가 100% 해결된다.

 

[기존 코드 -> 실행 불가]

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

[수정 & 보완된 코드]

function startVideo() {
  navigator.mediaDevices
    .getUserMedia({ video: true })
    .then(function (stream) {
      video.srcObject = stream;
    })
    .catch(function (err) {
      console.log(err);
    });
}

그밖에 필요한 리소스는 각각 아래 링크에서 구할 수 있다.

 

[face-api.min.js : github.com/justadudewhohacks/face-api.js/tree/master/dist]

[학습된 얼굴 모델 (11개) : 하단 깃허브 저장소 참고]

[깃허브 저장소 링크 : https://github.com/C17AN/Face-Detection-JavaScript]

C17AN/Face-Detection-JavaScript