CODEWITHSUNDEEP
flutterflutter-layout
sppc42
sppc42

Reputation: 3272

How to take picture of selected area in video only

In Flutter, whilst taking a video, how can we overlay a filter screen, allowing users to capture only their face. This is now commonplace in many banking apps, where an oval circle is shown (as below) and rest all is blurred. This helps guide the user to put their face in that circle boundary only.

enter image description here

How can we do something like above in flutter?

Upvotes: 3

Views: 2457

Answers (1)

Stefan Galler
Stefan Galler

Reputation: 831

You can check out my tutorial on recording a video: https://bettercoding.dev/flutter/tutorial-video-recording-and-replay/.

There, I overlay the CameraPreview with a button. You could also overlay it with a transparent widget, darkening everything but the area around the face.

This could probably be done as shown in this post: Flutter: inverted ClipOval using a CustomClipper.

return Center(
  child: Stack(
    alignment: Alignment.bottomCenter,
    children: [
      CameraPreview(_cameraController),
      FaceOverlay(), // some gray overlay with a clipped out area
    ],
  ),
);

Upvotes: 2

Related Questions