Skip to content

takeScreenshot() returns a black image when capturing a video frame. #2732

@diegoVegaLoro

Description

@diegoVegaLoro

Is there an existing issue for this?

  • I have searched the existing issues

Current Behavior

When using InAppWebViewController.takeScreenshot() to capture the current frame of a webview, the resulting image is completely black only when the webview is displaying a video (e.g., YouTube, embedded MP4, etc.).

The same code works perfectly for capturing static pages or any other web content.

Expected Behavior

The method takeScreenshot() should return a valid image of the current webview content, including videos currently being displayed.

Steps with code example to reproduce

**_Steps to Reproduce_**:

1.- Load a web page that plays a video inside an InAppWebView.

2.- Call takeScreenshot() from the controller while the video is playing.

3.- The resulting screenshot will be completely black.

IF as a user you repeat the same process with a static page (non-video content) — the screenshot works fine.

Here’s the relevant part of the code:
Future<void> _handleCaptureEvent() async {
  print("xxxxxxxxxxxxxxxxxx  CASE CAPTURE");

  try {
    final screenshot = await webViewController?.takeScreenshot();
    // Convert the image to base64
    String base64Image = base64Encode(screenshot!);

    await uploadCapturedImage(base64Image);

    print('++++++++++++++++ capturedImage --> $base64Image');
  } catch (e) {
    if (e is Exception) {
      print('Screenshot capture failed: $e');
    } else if (e is FormatException) {
      print('Error encoding image to base64: $e');
    } else {
      print('Unknown error: $e');
    }
  }
}

Stacktrace/Logs

There are no errors, the image is successfully taken and sent to the backend, but it is a black image instead of the capture image of the video

Flutter version

3.29.0, 3.32.0

Operating System, Device-specific and/or Tool

Android Virtual Device (AVD)

AVD name: Television (720p) API 34

Device:
Television (720p)
55.0 1280x720 tvdpi

System Image:
UpsideDownCake
Android 14.0 arm64-v8a

Preferred ABI: Optimal

Emulated Performance:
Graphics: Automatic

Plugin version

v6.1.5

Additional information

Flutter version: tested in 3.29.0 and 3.32.0

Plugin version: flutter_inappwebview: tested in ^6.1.5 (last version)

Platform: AndroidTV

Device: AndroidTV Emulator 1280x720

OS version: Android 14

It seems the video rendering surface might not be included in the bitmap capture used by takeScreenshot().
Would it be possible to provide an alternative capture method or flag to include video frames as well?

Self grab

  • I'm ready to work on this issue!

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions