일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
- 이슈
- docker
- k8s
- 타입스크립트
- 백엔드
- 컴퓨터공학
- 리액트
- 이더리움
- JavaScript
- 쿠버네티스
- 웹
- 클라우드
- CSS
- 자바스크립트
- 솔리디티
- 알고리즘
- 파이썬
- 백준
- kubernetes
- 블록체인
- HTML
- VUE
- 프론트엔드
- next.js
- es6
- AWS
- 가상화
- BFS
- react
- TypeScript
- Today
- Total
즐겁게, 코드
자바스크립트 얼굴 인식 라이브러리 - face-api.js 본문
[코드 강의 영상 - 짧고 재밌으니 아래 글을 참고해 완성해보자.]
신묘한 유튜브 알고리즘에 이끌려 face-api 라는 얼굴 인식 라이브러리를 경험해볼 기회가 있었다.
[face-api.js 깃허브 저장소 링크 : github.com/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]
'🎨 프론트엔드 > Others' 카테고리의 다른 글
Notion API로 데이터베이스 불러오기 (1) | 2021.07.08 |
---|---|
Wappalyzer 로 서비스 스택 분석하기 (0) | 2021.03.20 |
Web Speech API로 음성인식 구현하기 (0) | 2021.03.06 |