Screenshot with a mediaelement

[Gavlar50]

I have a Maui app which uses the MediaElement component to play a video. When I call the Screenshot.Default.CaptureAsync() method, the resulting screenshot contains all the page elements in the image apart from the video. Instead of the video screengrab I just have a black background. I presume it has something to do with the way the video is rendered and there isn't much I can do about it. Can anyone suggest any other way to achieve a full screenshot? If I use SkiaSharp would that just capture the skia canvas and not anything else that is rendered outside of it in the content page itself? Thoughts?

[rokmeglic71]

I was playing with CoPilot, but I still get white screen on video. It's a start though.

Add this to project:
<PackageReference Include="CommunityToolkit.Maui.MediaElement" Version="6.1.2" />

Add this to MAUI builder:
.UseMauiCommunityToolkitMediaElement()

<VerticalStackLayout Padding="20" Spacing="20">

    <!-- Demo Video -->
    <toolkit:MediaElement x:Name="mediaElement"
                          HeightRequest="200"
                          ShouldAutoPlay="True"
                          ShouldShowPlaybackControls="True"
                          Source="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" />

    <!-- Screenshot Button -->
    <Button Text="Capture Full Screenshot"
            Clicked="OnCaptureScreenshotClicked" />

    <!-- Preview -->
    <Image x:Name="screenshotPreview"
           Aspect="AspectFit"
           HeightRequest="500" />
</VerticalStackLayout>

private async void OnCaptureScreenshotClicked(object sender, EventArgs e)
    {
        try
        {
            // Step 1: Capture UI screenshot
            var screenshot = await Screenshot.Default.CaptureAsync();
            using var originalStream = await screenshot.OpenReadAsync();

            // Copy UI stream to memory
            var uiStream = new MemoryStream();
            await originalStream.CopyToAsync(uiStream);
            uiStream.Position = 0;

            // Step 2: Grab video frame (platform-specific)
            Stream videoFrameRaw = null;
#if ANDROID
            videoFrameRaw = await GetVideoFrameAsync(mediaElement.Source.ToString());
#elif IOS
        videoFrameRaw = await GetVideoFrameAsync(mediaElement.Source.ToString());
#endif

            // Copy video frame to memory
            var videoStream = new MemoryStream();
            await videoFrameRaw.CopyToAsync(videoStream);
            videoStream.Position = 0;

            // Step 3: Merge with SkiaSharp
            var mergedStream = MergeImages(uiStream, videoStream); // ❌ DO NOT use 'using' here

            // Step 4: Display image — keep stream alive
            screenshotPreview.Source = ImageSource.FromStream(() =>
            {
                mergedStream.Position = 0;
                return mergedStream;
            });
        }
        catch (Exception ex)
        {
            await DisplayAlert("Error", ex.Message, "OK");
        }
    }

#if ANDROID
    private static Task<Stream?> GetVideoFrameAsync(string videoUrl)
    {
        return Task.Run(() =>
        {
            try
            {
                var retriever = new Android.Media.MediaMetadataRetriever();
                retriever.SetDataSource("https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4", new Dictionary<string, string>());
                var bitmap = retriever.GetFrameAtTime(150);
                var ms = new MemoryStream();
                bitmap.Compress(Android.Graphics.Bitmap.CompressFormat.Png, 100, ms);
                ms.Position = 0;
                return (Stream)ms;
            }
            catch (Exception ex)
            {
                Console.WriteLine(ex.Message);
            }

            return null;
        });
    }
#endif

#if IOS
    private static Task<Stream> GetVideoFrameAsync(string videoUrl)
    {
        return Task.Run(() =>
        {
            var asset = AVFoundation.AVAsset.FromUrl(new Foundation.NSUrl(videoUrl));
            var generator = new AVFoundation.AVAssetImageGenerator(asset)
            {
                AppliesPreferredTrackTransform = true
            };

            var time = new CoreMedia.CMTime(0, 1);
            var cgImage = generator.CopyCGImageAtTime(time, out var actualTime, out var error);
            var uiImage = UIKit.UIImage.FromImage(cgImage);

            var ms = new MemoryStream();
            uiImage.AsPNG().AsStream().CopyTo(ms);
            ms.Position = 0;
            return (Stream)ms;
        });
    }
#endif

    private static Stream MergeImages(Stream uiScreenshot, Stream videoFrame)
    {
        using var uiBitmap = SKBitmap.Decode(uiScreenshot);
        using var videoBitmap = SKBitmap.Decode(videoFrame);

        using var surface = SKSurface.Create(new SKImageInfo(uiBitmap.Width, uiBitmap.Height));
        var canvas = surface.Canvas;

        // Draw UI first
        canvas.DrawBitmap(uiBitmap, 0, 0);

        // Overlay video frame at MediaElement’s position
        var rect = new SKRect(0, 0, uiBitmap.Width, 200); // adjust height to match MediaElement
        canvas.DrawBitmap(videoBitmap, rect);

        canvas.Flush();

        var ms = new MemoryStream();
        surface.Snapshot().Encode(SKEncodedImageFormat.Png, 100).SaveTo(ms);
        ms.Position = 0;
        return ms;
    }