polarby / render

A package to render any native static and moving flutter widgets to exportable formats
https://pub.dev/packages/render
MIT License
49 stars 26 forks source link

How do i capture animation ? #32

Open Kaizodo opened 1 month ago

Kaizodo commented 1 month ago

I have following widget that i am trying to capture BounceInUp is taken from animate_do package

video is beeing captured however i don't see text when i start the recording however when i remove the animation and put only text in stack it works.

class VideoCanvasWidget extends StatelessWidget {
  final VideoPlayerController videoPlayerController;
  const VideoCanvasWidget({super.key, required this.videoPlayerController});

  @override
  Widget build(BuildContext context) {
    return AspectRatio(
      aspectRatio: videoPlayerController.value.aspectRatio,
      child: Stack(alignment: Alignment.center, children: [
        VideoPlayer(videoPlayerController),
        BounceInUp(
            child: const Text(
          'My Animated Text',
          style: TextStyle(color: Colors.white, fontSize: 50),
        ))
      ]),
    );
  }
}

this is my render code


  render() async {
    progress.value = 0.0;
    rendering.value = true;
    renderVideoPlayerController = await getVideoPlayerController(videoUrl);
    renderVideoPlayerController.play();
    renderVideoPlayerController.setVolume(0);
    var motionController = renderController.recordMotionFromWidget(
      Get.context!,
      VideoCanvasWidget(videoPlayerController: renderVideoPlayerController),
      settings: const MotionSettings(pixelRatio: 2, frameRate: 30, simultaneousCaptureHandlers: 10),
      format: Mp4Format(audio: [RenderAudio.url(Uri.parse(videoUrl))]),
    );
  //simultaneousCaptureHandlers are high just for quick render i have tried multiple combinations to check if its config issue

    await Future.delayed(const Duration(seconds: 10));

    motionController.stream.listen((event) {
      if (event.isActivity) {
        final activity = event as RenderActivity;
        progress.value = activity.progressPercentage;
      }

      if (event.isResult) {
        final result = event as RenderResult;
        Get.to(() => PlayVideoWidget(video: result.output));
        rendering.value = false;
      }
    });
    motionController.stop();
  }

On PlayVideoWidget captured video is playing but its laggy(probably because of configs) and with animation i don't see my text at all but without animation everything works as expected.

is there something that i am missing here ? i have tried other methods as well but no luck