How to capture screenshot of a MAUI app with webview and playing video

Siu Pang 0

Hi, I have an iOS app which has a webview control, I have a function to capture screenshot of the app with webView.Capture(), but it return a screenshot of the website, but the playing video can't be shown.

I also tried OpenTK.Platform.iPhoneOS.iPhoneOSGameView.Capture() & GL.ReadPixels(), both return a black screen.

STEPS TO REPRODUCE This is the function to capture screenshot in my app

private ImageData CaptureCurrentView()

{

try

{

var view = UIApplication.SharedApplication.KeyWindow;

UIGraphics.BeginImageContext(view.Frame.Size);

view.Layer.RenderInContext(UIGraphics.GetCurrentContext());

UIImage image = UIGraphics.GetImageFromCurrentImageContext();

UIGraphics.EndImageContext();

using (var imageData = image.AsJPEG(0.1F))

{

var bytes = new byte[imageData.Length];

System.Runtime.InteropServices.Marshal.Copy(imageData.Bytes, bytes, 0, Convert.ToInt32(imageData.Length));

return new ImageData

{

Data = bytes,

Height = Convert.ToInt32(Math.Round(image.Size.Height)),

Width = Convert.ToInt32(Math.Round(image.Size.Width))

};

}

}

catch (Exception ex)

{

_loggingManager.LogError("CaptureCurrentView", "An exception occurred capturing screen data", ex);

return null;

}

}

Siu Pang 0

namespace TestScreenShotMaui;

public partial class MainPage : ContentPage
{
	int count = 0;

	public MainPage()
	{
		InitializeComponent();
	}

        async void Button_Pressed(System.Object sender, System.EventArgs e)
        {
            //var result = await Screenshot.CaptureAsync();

            //var stream = await result.OpenReadAsync(ScreenshotFormat.Jpeg);
            //resultImage.Source = ImageSource.FromStream(() => stream);

			resultImage.Source = await TakeScreenshotAsync();

        }


        public async Task<ImageSource> TakeScreenshotAsync()
        {
            if (Screenshot.Default.IsCaptureSupported)
            {
                IScreenshotResult screen = await Screenshot.Default.CaptureAsync();

                Stream stream = await screen.OpenReadAsync();

                return ImageSource.FromStream(() => stream);
            }

            return null;
        }
}


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TestScreenShotMaui.MainPage">


    <Grid RowDefinitions="100,*,200" ColumnDefinitions="0.5*,0.5*">

        <Label Grid.Column="0" Grid.Row="0" Text="Start developing now" FontSize="Title" Padding="30,10,30,10"/>
        <Button Grid.Column="1" Grid.Row="0" Text="Screenshot" Pressed="Button_Pressed" Command="{Binding CaptureCommand}" CommandParameter="{x:Reference webView}"></Button>
        <WebView x:Name="webView" Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" Source="https://www.google.com">


        </WebView>
        <Image Grid.Row="2" Grid.ColumnSpan="2" x:Name="resultImage"></Image>

    </Grid>

</ContentPage>

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 30,666 Reputation points Microsoft Vendor

2024-08-20T09:52:16.0166667+00:00

I got it. I will test again with the code snippets you provided. Thanks for your sharing.
Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 30,666 Reputation points Microsoft Vendor

2024-08-21T09:55:37.5733333+00:00

Do you mean resultImage is empty? It cannot display on the page, right?
Siu Pang Ng 5 Reputation points

2024-08-21T10:42:34.04+00:00

My primary is suspended due to I try to post some code here, I use my second account.

Like this one, the playing video just black out in the screenshot.

2 answers

Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 42,001 Reputation points Microsoft Vendor

2024-08-05T02:22:40.5566667+00:00
Hello,

For screenshots, Maui officially provides an out-of-the-box API as a solution. You can refer to the following documents and sample codes.

Screenshot

public async Task<ImageSource> TakeScreenshotAsync() { if (Screenshot.Default.IsCaptureSupported) { IScreenshotResult screen = await Screenshot.Default.CaptureAsync(); Stream stream = await screen.OpenReadAsync(); return ImageSource.FromStream(() => stream); } return null; }

Best Regards,

Alec Liu.

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Please sign in to rate this answer.
Siu Pang 0 Reputation points

2024-08-09T04:27:26.0666667+00:00

Hi Alec,

I tried the code provided, but it still can't capture the playing video on my webview.

Any other idea? Thank you.

kind regards,

Siu

Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 42,001 Reputation points Microsoft Vendor

2024-08-09T07:52:39.41+00:00

In order to investigate further, could you please provide the following information?

Is your project a .Net iOS or Maui project?

Is your expected behavior to capture only a screenshot of the video in the WebView?

Your prompt reply will be highly appreciated.

Siu Pang 0 Reputation points

2024-08-09T07:55:28.8933333+00:00

It is a MAUI project for iOS platform.

I expect to capture a screenshot of my app which include everything in the webview.

Thank you.

Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 42,001 Reputation points Microsoft Vendor

2024-08-13T02:15:53.2366667+00:00

I tested playing videos on a couple of websites and taking screenshots of the app via the screenshot API, and the videos could be captured as expected.

Does the video in your WebView come with an anti-screenshot feature? Some websites play videos with anti-screenshot and anti-recording to prevent data leakage.

Siu Pang 0 Reputation points

2024-08-13T06:56:27.2333333+00:00

Could you please try these websites: youtube, xbox.com, apple.com?

Would you share me the websites you running your testing on? Are you running your app on emulator or a physical device? Thank you.

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 30,666 Reputation points Microsoft Vendor

2024-08-15T10:06:55.6566667+00:00

I tested again on simulator, but I cannot reproduce the issue (using Screenshot ). I will test the code snippets you provided. Also, what's the iOS version of your device and what's the detailed MAUI version?

Siu Pang 0 Reputation points

2024-08-15T11:47:39.9533333+00:00

Those screenshot methods work fine on emulator, but not on physical device.

My iOS version is 17.5. Thank you.

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 30,666 Reputation points Microsoft Vendor

2024-08-16T09:53:39.1266667+00:00

Yes, I can capture the screenshot. Would you mind sharing the detailed video url so that I can test again?
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Siu Pang 0

Please try this https://www.youtube.com/shorts/5ItO8Uz63_8 with a physical iPAD.

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 30,666 Reputation points Microsoft Vendor

2024-08-19T09:56:47.1566667+00:00

I tested on my iPhone with Yonglun's solution, I can take screenshot and I cannot reproduce your issue. Is the WebView full screen? How did you set the webview? And what's the detailed MAUI version and iOS version?

Siu Pang 0

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TestScreenShotMaui.MainPage">


    <Grid RowDefinitions="100,*,200" ColumnDefinitions="0.5*,0.5*">

        <Label Grid.Column="0" Grid.Row="0" Text="Start developing now" FontSize="Title" Padding="30,10,30,10"/>
        <Button Grid.Column="1" Grid.Row="0" Text="Screenshot" Pressed="Button_Pressed" Command="{Binding CaptureCommand}" CommandParameter="{x:Reference webView}"></Button>
        <WebView x:Name="webView" Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" Source="https://www.google.com">


        </WebView>
        <Image Grid.Row="2" Grid.ColumnSpan="2" x:Name="resultImage"></Image>

    </Grid>

</ContentPage>


namespace TestScreenShotMaui;

public partial class MainPage : ContentPage
{
	int count = 0;

	public MainPage()
	{
		InitializeComponent();
	}

        async void Button_Pressed(System.Object sender, System.EventArgs e)
        {
            //var result = await Screenshot.CaptureAsync();

            //var stream = await result.OpenReadAsync(ScreenshotFormat.Jpeg);
            //resultImage.Source = ImageSource.FromStream(() => stream);

			resultImage.Source = await TakeScreenshotAsync();

        }


        public async Task<ImageSource> TakeScreenshotAsync()
        {
            if (Screenshot.Default.IsCaptureSupported)
            {
                IScreenshotResult screen = await Screenshot.Default.CaptureAsync();

                Stream stream = await screen.OpenReadAsync();

                return ImageSource.FromStream(() => stream);
            }

            return null;
        }
}

Siu Pang 0 Reputation points

2024-08-19T10:06:17.9033333+00:00

iPadOS 17.5.1

MAUI 8.0.61
Siu Pang 0 Reputation points

2024-09-11T08:04:56.0166667+00:00

Hi, any chance you can replicate my issue with a physical device? Thank you.

Share via

How to capture screenshot of a MAUI app with webview and playing video

2 answers

Your answer