ANR (Application Not Responding) when loading large videos with pro_video_editor

[viniciusddrft]

Hi! I'm experiencing an issue when using the pro_video_editor package with large video files in my Flutter app.

When I try to load large videos (e.g. over 100MB or Full HD resolution), the app freezes and eventually triggers an ANR (Application Not Responding), especially during the initial loading of the video in the editor.

Environment details:
Flutter: 3.32.7

Dart: 3.8.1

Packages:

pro_video_editor: ^0.2.2

pro_image_editor: ^10.5.4

Device: POCO F4 (Android)

Video size/resolution: approx. 100MB, .mp4, 1920x1080, 60fps

Additional notes:
I compress the video using FFmpeg before opening it in the editor, which reduces the file size and bitrate significantly.

However, the ANR still happens when opening the video, even after compression.

The freeze seems to occur during frame extraction or the initial timeline processing.

Relevant code
Here’s the part of the code responsible for rendering the video after editing:

Future<void> generateVideo(CompleteParameters parameters) async {
  try {
    if (_videoController.value.isPlaying) {
      unawaited(_videoController.pause());
    }

    final exportModel = RenderVideoModel(
      id: _taskId,
      video: _video,
      outputFormat: _outputFormat,
      enableAudio: _proVideoController?.isAudioEnabled ?? true,
      imageBytes: parameters.layers.isNotEmpty ? parameters.image : null,
      blur: parameters.blur,
      colorMatrixList: parameters.colorFilters,
      startTime: parameters.startTime,
      endTime: parameters.endTime,
      transform: parameters.isTransformed
          ? ExportTransform(
              width: parameters.cropWidth,
              height: parameters.cropHeight,
              rotateTurns: parameters.rotateTurns,
              x: parameters.cropX,
              y: parameters.cropY,
              flipX: parameters.flipX,
              flipY: parameters.flipY,
            )
          : null,
      bitrate: _videoMetadata.bitrate,
    );

    debugPrint('Starting video rendering...');
    _exportedVideo = await ProVideoEditor.instance.renderVideo(exportModel);
    debugPrint('Video rendering completed successfully!');
  } catch (e, stackTrace) {
    debugPrint('Error while generating video: $e');
    debugPrint('$stackTrace');
    rethrow;
  }
}

Question:
Is there any recommended approach for handling large videos with this package?
Is it possible to load the video progressively or off the main thread to avoid UI blocking?
Would it be possible to control the preview/timeline quality to reduce the risk of ANRs?

Thanks in advance for any guidance. I'm happy to provide logs or run tests if needed.

[hm21]

The pro_video_editor package only handles the 'rendering' and 'thumbnail extraction' processes. To display the video itself, however, it uses the video-player package. The UI is from the pro_image_editor package, which is built around the video player, but this should not affect it.

What you can try to do now to find the problem is:

1. Check if you are extracting too many thumbnails at once on startup. Are you using getKeyFrames or getThumbnails, and are you ensuring that you limit how many you extract?
2. Make sure that you load the video from a file constructor in your video player package and not from memory.
3. When you use only the video player package, does it also block the UI?