관리 메뉴

즐겁게, 코드

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

🎨 프론트엔드/Others

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

Chamming2 2020. 12. 29. 02:20

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

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

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

 

justadudewhohacks/face-api.js

JavaScript API for face detection and face recognition in the browser and nodejs with tensorflow.js - justadudewhohacks/face-api.js

github.com

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

 

결론부터 이야기하자면 굉장히 신선한 경험이었는데, <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

Contribute to C17AN/Face-Detection-JavaScript development by creating an account on GitHub.

github.com

 

반응형
Comments
소소한 팁 : 광고를 눌러주시면, 제가 뮤지컬을 마음껏 보러다닐 수 있어요!
와!! 바로 눌러야겠네요! 😆