How to take a screenshot of a video on Flutter Web?

Question

I'm working on a Flutter web app that uses the Media Kit Player package for video playback. I want to add functionality to take screenshots of the video at any point. Here's what I've tried so far:

1. Media Kit Player's screenshot method – Works with local videos but not with web videos.
2. Testing the same video in Flutter mobile – Screenshot functionality works fine, so the issue seems web-specific.
3. Checked for CORS issues – Ensured that CORS is allowed on the video, but it still doesn't work.
4. Using the Screenshot package – Wrapped the video widget, but it returns a black image.

My questions are:

1. Is there a video player package for Flutter that works on the web and supports taking screenshots?
2. If I use the Flutter Video Player, how can I implement screenshot functionality myself? Any suggestions or guidance would be greatly appreciated. Thanks in advance!

Answer 1

To take a screenshot of a video, you can use the screenshot package:

1. wrap your widget in a Screenshot widget:

Screenshot(
    controller: screenshotController,
    child: Text("This text will be captured as image"),
),

2. call .capture on your Screenshot controller:

    screenshotController.capture().then((Uint8List image) {
        //Capture Done
        setState(() {
            _imageFile = image;
        });
    }).catchError((onError) {
        print(onError);
    });