Record a animation widget at 60fps and extract a video

[flutterdev77]

Use case

I would like to record a flutter widget

Existing Flutter Feature : -> RepaintBoundary allows us to take a screenshot of a particular widget

New Feature Request: -> A widget like Repaint boundary but can record a widget like Screen recorder and can be used to extract a video,

Exiting plugin Issues for the Feature Request: -> There are some flutter plugins but they crash after certain time due to memory issues, Native apps has the capacity to render a video by taking screenshot

Current Approach : I tried to fix this feature using Repaint Boundary from Flutter and then passing the bytedata to swift AV Foundation but has a lot of inconsistencies.

Since, Flutter Engine has access to low level render tree, A new feature to tract the frames and bind it together ti extract a video can be implemented.

Use Cases: -> Video Editor Apps completely based on flutter can offer video render features, -> Games can be recorded in real time that are made in flutter

Proposal

Some package offering the feature conpect but has drawbacks

https://pub.dev/packages/screen_recorder -> This can only extract a gif and has low quality and frame rate and can only be used for very few seconds,

https://pub.dev/packages/ed_screen_recorder -> This is a solution for screen recorder but can't record the individual widget instead records the entire screen and asks for permission,

https://pub.dev/packages/render -> Low frame rate and can only be used to record for few seconds

[flutterdev77]

Use Cases: The native screen recorder records the entire view of the screen and always asks for permission, The use case for Flutter Recorder will only be to record particular widget in a render tree hierarchy.

This feature will allow developers to render videos using Flutter Framework itself and contribute to the ecosystem with various creative apps.

For e.g. I'm creating an app in flutter that allows user to add various elements [ Text, Audio, Video , Image ] along with animations, I need to make screenshot using Repaint Boundary in Flutter, Send the ByteData to AV Foundation and generate a video, This is too complicated process which can be done easily if the flutter engine offers such feature.

A small demo is presented in the video:

https://github.com/flutter/flutter/assets/135830318/805a6c96-c300-48ff-9c52-779ec5739970

[huycozy]

A widget like Repaint boundary but can record a widget like Screen recorder and can be used to extract a video

Labeling this as a request on framework level although it probably needs involvement of engine team.

[Hetal9Brainz]

@flutterdev77 did you get the solution? I have the same requirement.

[acastry]

@flutterdev77 how is this so far ? Your solution would be a major improvement as it would get rid of permission popup as we just focus on recording app and not whole screen. Any news ?

[akshayOnform]

Any update on this? I have similar requirement.

[jdevp]

I don't think that there is a better solution using Flutter. One big drawback of Flutter is that it's lack of double buffered image support. The toImage method is basically useless in this case. First of all, you'll need to scale up the image to dpr in order to get good quality, then you'll need to scale it back and then encode the data. It's very slow to encode PNG format and it crashes when encoding a lot of image frames at even very low speed.