How to take picture of selected area in video only

Question

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.

How can we do something like above in flutter?

Solution

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
    ],
  ),
);

Comments

[sppc42]

am able to overlay the filter, but taking a picture, am getting the full image. How can I get the final image also with the filter, so that I just capture what I clicked.

[Stefan Galler]

You can wrap your widgets in a RepaintBoundary and export the pixels as an image as shown here: stackoverflow.com/questions/51117958/…