Saving story as Draft/Gif/Video

[RoyalCoder88]

Hi Camilo, can you add please the saving story as Draft/Gif/Video also how to add video in the story?
Thanks in advance!

[camilo1498]

hello @RoyalCoder88, later I will try to give support to video/gif saving, I haven't had much time to continue with this project but I will try as soon as possible.
At the moment you can only load images in the widget, I haven't given it support for video yet.

[rlee1990]

Video support would be awesome

[polarby]

@camilo1498 Any updates on this? RenderRepaintBoundary should not really work for converting as it is just for one frame. How do we combine those different mediums (image + gif + video)? Maybe something like ImageMagick?

[nhtlquan]

+1 Video support add
Thank!!!!!!!!!!!!!!

[polarby]

I am currently working on a flutter rendering package (gif, video incl. audio, image) as a side project, so it might take about two months until it is usable. Please feel free to join the contribution, so we can finish sooner.

[RoyalCoder88]

@polarby Hi Paul sounds great, good luck I starred you as well ;) let me know if I can help somehow ;)

[polarby]

@RoyalCoder88 @nhtlquan @camilo1498 I have released the new rendering package. I am not interested in adding this to the story_editor, but if somebody has some time, it sure would be great for others who need this.

It should be quite easy to implement this. Use as follows:

import 'package:render/render.dart';

final controller = RenderController();

Render(
    controller: controller,
    child: StoryEditorView(),
),

final result = await controller.captureMotion(Duration(seconds: 4));
final result = await controller.captureImage(format: ImageFormat.png, settings:  ImageSettings(pixelRatio: 3),);

[FaisalMohammadi]

Hi @polarby thanks for the example. Where should i exactly add this snippet in sotries_editor package?

[polarby]

Replace the RepaintBoundary with the Render widget in the lib/src/presentation/main_view file.

Now you just have to render the story content as image or gif with the controller.

(Sorry for bad presentation, I am on mobile)

[FaisalMohammadi]

Thank you alot for your answer @polarby its working perfectly now, But i have some other issues, which is when i try to add a video and edit it and then try to capture it as motion. It takes me alot of time to save it. Basically it takes the duration of the video.
It means when the video is 5 min it take me to save the video 5 min for example and i have also issue to sync the video audio like the original video audio. i can set the audio of the video like this
final result = await renderController!.captureMotion( controlNotifier.videoPlayerController!.value.duration, logLevel: LogLevel.none, format: MovFormat(audio: [ RenderAudio.file(File(controlNotifier.mediaPath)), ]), ); but i am not able to sync it with the sound of original video

i am using the video_player package for showing the video and getting the video duration

expecting behavior

• (✅) pick a video from gallery
• (✅) adding gifs, texts, and so on
• (X) saving the video with the original audio in sync
• (X) saving the end result should not take too much time for example the duration of the video

I have achieved the first two points but i have no idea how to achieve the last two point.
Is it even possible to do it with render package.
I would be very appreciate if you or anybody could help me by this.
I have almost achieved what i want but need the last two point as described above.

i have no problem with saving the result of images or gifs its working perfectly and also not take too much time to save it because gifs are not very long

[polarby]

@FaisalMohammadi yes, you have archived everything the package provides you.

The Render package is literally rendering (meaning capturing frame by frame) the video/gif/image. This is the reason why the duration for saving is content duration + processing duration (processing is usually quite fast).

The audio should be in sync if there is only one video. If there are more and they start playing at different times during the overall recording, you can set the time offset for audios as well.

For each step of rendering (capturing, frame processing & post-processing) the documentation is available in the package docs.

For (almost) instant conversion, you are looking for a package that processes the position of layers and its content directly to ffmpeg - meaning it’s not rendering, but rather smartly importing each video/gif into ffmpeg(a mix out of capturing single flutter widgets and importing files at a certain position).
-> this is quite complicated, and would not be “rendering”

Bonus tip:

To save on conversion time, start converting while the user is adjusting the post title, or even let it keep running in background (capture from widget) while the user is able to continue on the app. Many apps, such as TikTok choose to have asynchronous loading times after confirming the post (used for example for uploading).

[FaisalMohammadi]

Thank you alot for your brief introductiona and very quick response i appreciate it.

Yes i have now achieved everything what i want and the duration it would take is also understandable i would not need more then 20 second to 1 min duration for my stories, so it would be fine to make the users wait that time.

Now i am able to take video, pic and edit it with texts, gifs and so on and get the result back.
To make the process faster i check if the user has add anything at all like gifs and so on. if yes i render the result with Render package, otherwise i just give the original video back.