mediapipe를 제가 만들 웹사이트에 연결가능한가요?

Question

mediapipe의 얼굴 특징점 그런거 이용해서 얼굴에 필터 씌우는 사이트 만들고 싶은데요 기본적으로 잇는 그 자원을 만들 사이트에 연결해서 쓰는 게 가능한지도 모르겠구요 그게 없다면 어떻게 필터 씌우는 사이트를 만들 수 있는지 궁금해요 ai답변 필요없고 너무 중요합니다 제발 부탁드려요ㅜㅜ

Answer 1

안녕하세요. 이수민 전문가입니다.

네, 충분히 가능해요. MediaPipe는 브라우저용 자바스크립트 라이브러리를 무료로 제공하고, 얼굴 특징점은 Face Landmarker 기능에 들어 있어요. npm의 @mediapipe/tasks-vision 패키지를 설치하거나 CDN으로 불러오고, 구글이 공개한 얼굴 모델 파일을 연결하면 돼요. 연산이 브라우저 안에서 돌아가 서버도 필요 없어요.

웹캠 영상을 video 태그로 받고, 그 위에 같은 크기의 canvas를 겹쳐 두세요. 매 프레임 detectForVideo 함수에 영상을 넣으면 얼굴마다 478개 점의 좌표가 나와요. 양쪽 눈 바깥 점으로 안경 이미지의 위치, 크기, 기울기를 계산해 canvas에 그리면 안경 필터가 돼요. 입체 가면은 얼굴 회전 정보를 함께 받아 Three.js로 3D 모델을 띄우면 돼요.

웹캠은 https 주소나 localhost에서만 켜져요. 완성하면 https를 무료로 주는 GitHub Pages나 Netlify에 올리면 돼요 :)

Answer 2

안녕하세요. 박재화 전문가입니다.

가능할 것으로 생각됩니다. 전문적으로 아는 것은 아니지만, MediaPipe는 얼굴의 눈, 코, 입 같은 위치를 자동으로 찾아주는 기능을 웹사이트에서도 사용할 수 있는 것으로 보입니다. 얼굴을 카메라로 비추면 MediaPipe가 눈, 코, 입 같은 위치를 찾아주고 그 위치에 필터를 맞춰 올리는 방식이라고 합니다.

그러니까 MediaPipe가 얼굴 위치를 찾아주는 역할을 하고, 실제 안경이나 모자 같은 이미지는 따로 화면에 표시해주는 구조로 보입니다. 처음부터 얼굴 인식 기능을 직접 만들 필요는 없고, 이미 제공되는 기능을 가져와서 사용할 수 있을 것 같습니다.

처음 시작한다면 얼굴을 인식한 뒤 PNG 이미지 하나를 얼굴 위에 올려보는 방식부터 해보는 게 가장 쉽게 접근할 수 있는 방법 같네요.