FaceDetector
얼굴 자동 모자이크
해결하는 문제
행사·현장 사진을 공유하기 전에 얼굴을 일일이 가리기 번거롭다.
카메라와 사진에서 얼굴을 찾아 모자이크나 흐림으로 가리고, 처리한 사진을 저장합니다. 사진은 기기 밖으로 나가지 않습니다.
서버 의존도
외부 라이브러리나 AI 모델을 CDN에서 받아 옵니다. 서버는 필요 없고, 오프라인용은 ./libs/에 넣어 둡니다.
브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요
데이터가 흐르는 길
무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.
들어오는 것카메라 영상 또는 사진
브라우저가 하는 일얼굴 위치 상자 찾기
나오는 것얼굴을 가린 화면·이미지
쓰는 브라우저 기술
getUserMediaCanvas 2Dcanvas.toDataURL
라이브러리와 모델
MediaPipe Tasks (로컬 우선 로딩)blaze_face_short_range.tflite (약 0.2MB)
바꿀 수 있는 옵션
- 가리는 방식: 모자이크, 흐림, 상자
- minDetectionConfidence
- 가림 여백
자주 막히는 곳
- 짧은 거리용 모델이라 멀리 작게 찍힌 얼굴은 놓칠 수 있다
- 옆모습·가려진 얼굴은 확인 후 손으로 보완해야 한다
이 능력으로 만들 수 있는 서비스
같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.
AI 서비스
- 개인정보 비식별 처리 도우미
웹 서비스
- 민원 사진 공개 전 처리 도구
- 교육 사진 공유
피지컬 AI
- CCTV 화면 실시간 비식별 표시
넓히는 방법
- 폴더 사진 일괄 처리
- 영상 파일 프레임별 처리
- 특정 사람만 제외
지원 브라우저
PC 크롬·엣지된다
맥 사파리된다
안드로이드 크롬된다
아이폰 사파리된다
코딩 에이전트에게 줄 프롬프트
복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.
MediaPipe FaceDetector로 사진 속 얼굴을 모두 찾아 모자이크하고 PNG로 저장하는 웹페이지를 만들어줘. 사진은 서버로 보내지 마.
같은 분류의 능력
12 보안·개인정보·권한에 속한 다른 능력입니다.
무료로 보는 것
체험 페이지, 한 줄 설명, 미리보기 영상
스킬팩 구성
full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md