How to screen record particular widget in flutter?

Question

Currently, I'm using a flutter screen recorder plugin(https://pub.dev/packages/flutter_screen_recording) to record the screen, Actually, this plugin records the full screen of the mobile.

But my requirement is to record only a particular widget or a particular section of the screen, For example in the video call app there are two users in the screen, I just want to record only the opposite user video only.

So Is there any workaround or solution available for this, Please guide.

Watanabe

You can use the screenshot package to achieve this. You can change the capture rate in the controller to "record" the widget. You can try 60 low-res images per second. – Appellant

@Appellant I'm asking for a screen-recording future, not for screenshot future and also this plugin does not suit with agora video call service, can you please provide some other solution – Watanabe

Then you would be better of using a third-party solution for this – Appellant

@Appellant any suggestions – Sweettempered

Answer 1

2021 Solution

There is a fairly new package called screen_recorder that can be used for exactly this.

Here's the example:

ScreenRecorder(
  height: 200,
  width: 200,
  background: Colors.white,
  controller: ScreenRecorderController(
    pixelRatio: 0.5,
    skipFramesBetweenCaptures: 2,
  ),
  child: // child which should be recorded
);

The only downsides are that it can't record platform views like the camera or a Google Maps widget and the recording must have a background color (so you can't record with a transparent background).

Unicycle

there is any solution to record to platforms like GM or YT with that plugin? – Participation

This package exports as GIF. Is there any way to convert GIF to MP4 in web? – Croquette

@UtsavkumarLal they have a section here for converting from GIF to video, although it's likely lossy: github.com/Baseflow/screenrecorder#convert-gif-to-video – Steels

Answer 2

I was facing a similar issue while taking screenshots as I was getting a blank or black screen while taking a screenshot. But then using this package solved that problem https://pub.dev/packages/native_screenshot

You can simply run this function to take the screenshot of your stream:

Future<void> _capturePng() async {
    String path = await NativeScreenshot.takeScreenshot();
    print(path);
  }

You can find the complete code here: https://github.com/Meherdeep/agora-videocall-demo

Edmea

I am looking a solution / package which records my mobile screen and stream it on youtube, facebook or any other RTMP (real time messanging protocol). Do you have any previous experience or any suggestion? Please share thanks. – Retsina

Is there a way we could convert the set of pictures to a video? – Manard

If you want to record a video then I would suggest you to go for Agora's Cloud Recording SDK. docs.agora.io/en/cloud-recording/landing-page?platform=RESTful – Edmea

Answer 3

screen recording function part not working its only save the gif but does not save the video

Seraphina

This can be included as a comment, and not as an answer. If you can't comment yet, you don't have the privileges, wait for them – Affirmative