JavaScript에서 추적을 사용하여 얼굴 테스트를 수행합니다.js

이번 주 일찌감치, 나는 파이톤에 Snapchat과 비슷한 필터를 만드는 방법을 알게 되었다.나는 전방에 유사한 개원 기술이 존재하는지 매우 궁금하다.몇 가지 리소스를 찾았습니다.

Tracking.js

clmtrackr

ccv

headtrackr

나는 파이톤이나 R 등 더 전통적인 데이터 과학 언어뿐만 아니라 이런 데이터 과학 기술이 전면에 존재한다는 것에 정말 흥분했다.
나는 위의 모든 항목이 매우 재미있고 GitHub에서 상대적으로 비슷한 성급을 가지고 있다고 생각한다.추적을 사용하기로 했습니다.문서가 매우 좋아서 많은 예가 있습니다. 저에게 있어서 이것은 가장 간단한 학습 방법입니다!나는 정말 더 좋은 문서가 이 라이브러리의 배후 작업을 설명하기를 바란다. 나는 어떤 통계 데이터를 진행하고 있는지도, 이 도구가 실현된 후에 어떻게 작동하고 있는지도 확실하지 않다.
그럼에도 불구하고 그것은 실현하기 쉽다.나는 내가 최종적으로 구축한 응용 프로그램에 사용하기 위해 쉽게 확장할 수 있다.

얼굴 카메라 예 학습 과정

추적 이후로js는 비교적 작은 도서관으로 그 뒤에 있는 지역사회가 내가 일반적으로 사용하는 것보다 적고 나의 학습은 그들 사이트의 예시만 볼 수 있다.나는 확실히 Codepen을 검색했지만, 위의 몇 개의 펜은 완전하지 않거나 예시와 매우 비슷한 것 같다.

마지막 항목

경고: 전체 프로젝트에서 나는 인터넷 카메라의 셀카가 매우 어색하다는 것을 절대 알게 되었다!고등학교 때 제가 페이스북에서 어떻게 인터넷 카메라로 셀카를 찍었는지 몰라요!
나는 먼저 추적상의 를 복제했다.js 사이트.나는 마침내 로컬에서 그것을 실행하고 조정을 했으며 로컬에서 추적 라이브러리를 다운로드했다.
face camera example
그리고 인터넷에서 몇 개의 PNG를 찾았는데 그 위에 필터로 층을 나누었다.나는 단지 구글 이미지 검색을 해서 로컬에서 그것들을 복제할 뿐이다.그리고 나는 간단한 알고리즘을 실현해서 필터를 얼굴에 추가했다. 나는 단지 사용자의 얼굴 위치에 따라 사이즈를 하드코딩했을 뿐이다.결과는 다음과 같습니다.


나는 또한 Snapchat의 개 얼굴 기능을 실현하려고 시도했지만, 그 결과 이 프로젝트처럼 빠른 것에 대해 이 수학 모형은 사람의 얼굴에 대해 너무 구체적이라는 것을 증명하였다.
그리고 나는 수학에 대해 개괄을 했고 사용자에게 필터 사이를 전환하는 기능을 추가했다.수학적 계산은 상대적으로 간단하다. 사람이 화면에서 이동할 때 터치하는 이벤트 탐지기가 보기에서 사람의 얼굴을 되돌려주는 좌표수 그룹이다.그리고 개선된 좌표로 맨 위에 필터를 그릴 것입니다.키 코드는 다음과 같습니다.

    context.drawImage(img, rect.x + (filterX * rect.width),
      rect.y + (filterY * rect.height),
      rect.width * filterWidth,
      rect.height * filterHeight
    )

그 후에 저는 CSS를 개선했습니다. 이것은 정말 어렵습니다!최종적인 작업 방식은 영상 요소에 HTML 화포를 층으로 나누는 것이기 때문에 격자 시스템이 모든 내용을 맞추는 것은 매우 까다롭다.마지막으로 나는 처음으로 CSS 격자를 삽입해서 이것이 가능한지 보았다.그것은 마침내 작용을 했지만, 내가 하는 방식은 사람을 매우 불편하게 한다.앞으로 나는 어쩔 수 없이 계속 CSS 격자에 주목할 것이다.
애플리케이션은 결국 다음과 같이 보입니다.


최종 출력은 괜찮은 것 같습니다. 완벽하지는 않지만, 더 나은 출력을 위해 라이브러리나 필터를 만들어야 할 수도 있습니다.나도 더 복잡한 필터를 작동시키기 어렵다.나는 그것들을 귀와 코 같은 다른 부분으로 나누어 수학을 계산해서 얼굴마다 넣어야 한다.만약 내가 얼굴 전체가 아니라 눈이나 입을 단독으로 추적하고 싶다면, 나는 서로 다른 얼굴 특징을 연결시키기 어려울 것 같다.
만약 내가 이 프로젝트에 더 많은 투자를 하고 싶다면, 나는 아마도 매끄러운 것을 추가해서 한 사람이 조금만 움직일 때 필터가 더욱 적게 뛸 수 있도록 시도할 것이다.전반적으로 말하면 이 프로젝트는 더욱 좋을 수 있지만, 도서관을 배우기 위해 나는 내가 원하는 것을 실현했다.

다음 단계

추적하다.js는 정말 멋있어요. 그리고 좋은 문서 기록이 있어요!나는 이것이 매우 좋은 라이브러리라고 생각한다. 예를 들어 이 응용 프로그램 같은 간단한 일을 할 수 있다.만약 내가 일이나 다른 더 큰 일을 위해 이렇게 한다면, 나는 응용 프로그램의 많은 기능을 개선해야 할 것이다.나는 또 인터넷 카메라 API를 사용하기가 매우 어렵다는 것을 발견했다. 나는 인터넷에서 스타일링과 사진 촬영의 예를 찾기가 매우 어렵다.나는 또 장래에 그것을 더욱 연구하고 싶다.전반적으로 말하면, 나는 매우 즐겁게 놀았다!그것은 결코 완벽하지는 않지만, 그것은 매우 좋은 빠른 프로젝트이다.

Code
내 App 시리즈의 일부