{"id":18332002,"url":"https://github.com/mrousavy/faceblurapp","last_synced_at":"2025-07-11T10:07:31.508Z","repository":{"id":235189438,"uuid":"790256387","full_name":"mrousavy/FaceBlurApp","owner":"mrousavy","description":"An app that blurs faces in realtime using VisionCamera, Skia and MLKit 😷","archived":false,"fork":false,"pushed_at":"2025-07-09T17:52:35.000Z","size":18051,"stargazers_count":151,"open_issues_count":2,"forks_count":7,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-07-10T02:19:53.984Z","etag":null,"topics":["android","app","blur","camera","detection","face","face-blur","face-filter","filter","ios","react-native","react-native-skia","react-native-vision-camera","realtime","skia","vision-camera"],"latest_commit_sha":null,"homepage":"https://mrousavy.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mrousavy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-04-22T14:50:16.000Z","updated_at":"2025-07-09T17:52:38.000Z","dependencies_parsed_at":"2024-04-22T16:24:54.120Z","dependency_job_id":"360975ab-2156-46d6-8245-dd3a6a2b0d05","html_url":"https://github.com/mrousavy/FaceBlurApp","commit_stats":null,"previous_names":["mrousavy/faceblurapp"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mrousavy/FaceBlurApp","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrousavy%2FFaceBlurApp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrousavy%2FFaceBlurApp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrousavy%2FFaceBlurApp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrousavy%2FFaceBlurApp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mrousavy","download_url":"https://codeload.github.com/mrousavy/FaceBlurApp/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrousavy%2FFaceBlurApp/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264781134,"owners_count":23662794,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","app","blur","camera","detection","face","face-blur","face-filter","filter","ios","react-native","react-native-skia","react-native-vision-camera","realtime","skia","vision-camera"],"created_at":"2024-11-05T19:36:50.306Z","updated_at":"2025-07-11T10:07:31.488Z","avatar_url":"https://github.com/mrousavy.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Face Blur App\n\nThis is an app to demonstrate the use of VisionCamera to build a realtime face blurring application. 😷\n\nhttps://github.com/mrousavy/FaceBlurApp/assets/15199031/cb2fd119-9dad-4e8a-9a97-579bb2eae888\n\nIt took me 25 minutes to build the app, and this runs on both iOS and Android at 60-120 FPS.\nI can swap out the drawing algorithm, plug in a different shader, use a different ML model like pose-, object- or hand-detection, and change Camera properties within seconds to minutes - it has never been so easy to build Camera apps, all thanks to [react-native-vision-camera](https://github.com/mrousavy/react-native-vision-camera)! 🚀\n\n## How?\n\nFaceBlurApp uses [react-native-vision-camera](https://github.com/mrousavy/react-native-vision-camera) to display a Camera feed.\n\nUsing the VisionCamera [Frame Processors](https://react-native-vision-camera.com/docs/guides/frame-processors) API and the [react-native-vision-camera-face-detector](https://github.com/nonam4/react-native-vision-camera-face-detector) Frame Processor plugin, we can detect faces in realtime at 60-120 FPS.\n\nThen, we can draw a blur shader/mask over the detected faces by using the VisionCamera [Skia Frame Processors](https://react-native-vision-camera.com/docs/guides/skia-frame-processors) integration. In this case, a simple blur `ImageFilter` from [react-native-skia](https://github.com/shopify/react-native-skia) is used.\n\nThis is the relevant code:\n\n```ts\nconst {detectFaces} = useFaceDetector({\n   performanceMode: 'fast',\n   contourMode: 'all',\n   landmarkMode: 'none',\n   classificationMode: 'none',\n});\n\nconst blurRadius = 25;\nconst blurFilter = Skia.ImageFilter.MakeBlur(\n   blurRadius,\n   blurRadius,\n   TileMode.Repeat,\n   null,\n);\nconst paint = Skia.Paint();\npaint.setImageFilter(blurFilter);\n\nconst frameProcessor = useSkiaFrameProcessor(frame =\u003e {\n   'worklet';\n   // 1. Render frame as it is\n   frame.render();\n\n   // 2. Detect faces in frame\n   const {faces} = detectFaces({frame: frame});\n\n   // 3. Draw a blur mask over each face\n   for (const face of faces) {\n      const path = Skia.Path.Make();\n\n      const necessaryContours: (keyof Contours)[] = [\n         'FACE',\n         'LEFT_CHEEK',\n         'RIGHT_CHEEK',\n      ];\n      for (const key of necessaryContours) {\n         const points = face.contours[key];\n         points.forEach((point, index) =\u003e {\n            if (index === 0) {\n               // it's a starting point\n               path.moveTo(point.x, point.y);\n            } else {\n               // it's a continuation\n               path.lineTo(point.x, point.y);\n            }\n         });\n         path.close();\n      }\n\n      frame.save();\n      frame.clipPath(path, ClipOp.Intersect, true);\n      frame.render(paint);\n      frame.restore();\n   }\n}, [paint, detectFaces])\n```\n\n\u003e See [`App.tsx`](https://github.com/mrousavy/FaceBlurApp/blob/main/app/App.tsx) for the full code.\n\n## How's the Performance?\n\nIf you know me you know that my libs are always really fast.\nThis is no exception:\n- Frame Processors are built almost entirely with C++ to run Frame analysis with almost zero overhead.\n- Frame Processors run in [Worklets](https://github.com/margelo/react-native-worklets-core/blob/main/docs/WORKLETS.md) on a separate Thread, so they are not interrupted by JS lags.\n- The MLKit models are built with native code and use GPU-acceleration\n- VisionCamera can provide either `yuv` or efficiently converted `rgb` buffers for faster ML execution\n- VisionCamera supports GPU buffer compression\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrousavy%2Ffaceblurapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmrousavy%2Ffaceblurapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrousavy%2Ffaceblurapp/lists"}