[Refactor] remove ffmpeg_kit dependency and add web implementation

[maRci002]

closes #146

This PR contains the following:

• Removed the dependency on the ffmpeg_kit package.
• Created FFmpegConfig to improve video and cover export functionality.
• Added an example demonstrating how to export video and cover images using either ffmpeg_kit or ffmpeg_wasm, depending on the platform.
• Updated the video_thumbnail version to 0.6.0.
• Updated the project to work on the web.
• Updated the documentation to reflect these changes.

Breaking changes

• Replaced File with XFile in VideoEditorController.file.
• Removed VideoEditorController.getMetaData.
• Removed VideoEditorController.exportVideo.
• Removed VideoEditorController.extractCover.

Still need:

• Merge PR for Refactor API to improve functionality and usability redleafsofts/flutter_ffmpeg_wasm#1
• Merge PR for web implementation justsoft/video_thumbnail#135
• Remove git and local path from pubspec.yaml, this needs the Pull Requests to be merged.
• Update documentation how to create custom export, especially the executeFFmpegWeb and executeFFmpegIO methods in the example.
• When CropScreen is closed the VideoPlayer is black
  • Problem: [video_player_web] Using multiple players with the same VideoPlayerController flutter/flutter#124210 using two VideoPlayer at the same time: CropGridViewer.preview / CropGridViewer.edit
  • Solution: since we never show two video players side by side at the same time, the VideoPlayer key must change as soon as we are done cropping
• Check why cropStyle: const CropGridStyle(background: Colors.transparent), is needed on the web. It seems that Path.combine breaks on the web.
  • HTML Renderer: Path.combine not implemented in the HTML backend flutter/flutter#44572
  • Canvaskit renderer: [WEB] Canvaskit: PathOperation.difference doesn't work properly when one geometry contains the other one flutter/flutter#124675
  • Solution: Set Path's fillType to PathFillType.evenOdd

Please refer to the redleafsofts/flutter_ffmpeg_wasm#1 README for instructions on how to run ffmpeg_wasm on the web.

This is what it looks like on the web (using HTML renderer):

video_editor_on_the_web.mp4

[LeGoffMael]

Thank you a lot for your work this is really great !
I agree that removing ffmpeg from this package is the good approach.

However the web support cannot seems to be published without the video_thumbnail package being updated first.
So this might have to wait a bit.

[LeGoffMael]

I have a question about why XFile is needed here instead of simply File ?

[maRci002]

I have a question about why XFile is needed here instead of simply File ?

Because you would have to import dart:io which won't work on web.

The image_picker library also returns an XFile, which is smart enough to hold a File when the runtime is VM-based and holds a Blob when the runtime is web-based. In addition, the latest version of video_thumbnail library, which is still waiting for a PR to be merged, also returns an XFile object instead of a string path.

[maRci002]

On the web, when you want to play a Blob, it is treated as a network URL. Therefore, you have to use VideoPlayerController.network instead of VideoPlayerController.file this is done automatically by this package. Currently, VideoEditorController.file takes an XFile. Perhaps we could split it up into file and network constructors. Since export is decoupled from this plugin, it is up to the developer to read bytes for export.

VideoPlayerController _controller = kIsWeb ? VideoPlayerController.network(widget.video.path) : VideoPlayerController.file(File(widget.video.path))

[hwakstar]

Hello
I want to run this package on web.
I checked the above mp4 file and I am trying about it.
Please help me as soon as possible.
Thanks.

[Megatronicus]

What's the status for web?
Read the above discussions, this seems important: "However the web support cannot seems to be published without the video_thumbnail package being updated first.
So this might have to wait a bit."

Is it done? Can we use the web version of video_editor?

Thank you in advance.

[maRci002]

Can we use the web version of video_editor?

  video_thumbnail:
    git:
      url: https://github.com/maRci002/video_thumbnail.git
      ref: feat-web_implementation
      path: video_thumbnail
  video_editor:
    git:
      url: git@github.com:maRci002/video_editor.git
      ref: feature/separate-video-export

What's the status for web?

The primary focus of this PR was on two aspects: removing the ffmpeg_kit dependency and adding a web implementation.

PR #156 had already removed the ffmpeg_kit dependency and introduced some helper functionality to generate ffmpeg commands. My changes are quite similar; however, they have resulted in some conflicts. Therefore, my first step is to make this PR compatible with the current master branch.

The web implementation will introduce some breaking changes, such as the use of XFile instead of File, unless the VideoEditorController.networkUrl constructor is used. XFile is beneficial as it holds important information like the mimeType and allows easy access to bytes, which is useful for working with the web ffmpeg library.

However the web support cannot seems to be published without the video_thumbnail package being updated first.
So this might have to wait a bit.

It appears that the video_thumbnail package has been abandoned. I am considering forking it to enhance its capabilities, such as supporting web or providing support for a Stream of thumbnails. This approach would be more efficient, as the underlying generator (such as AVAssetImageGenerator or MediaMetadataRetriever) wouldn't need to be opened and closed repeatedly but could remain open as needed for each frame.