I'm using the Camera.MAUI library in my .NET MAUI application to show a camera preview with some overlay elements (timer and record button). However, I'm facing two issues:

Layout Expansion & Resolution:

When I expand the layout (using a Grid with FillAndExpand settings), the camera preview resolution seems to degrade, it becomes blurry. I need the preview to expand to fill the available space without losing its native resolution.

Recording Behavior:

When I click the record button, the preview suddenly fixes itself (the blur goes away) but the camera view zooms in even more, which is not the desired behavior.

Here is my current XAML code for the layout:

<ContentPage xmlns=";
             xmlns:x=";
             xmlns:cv="clr-namespace:Camera.MAUI;assembly=Camera.MAUI">
    <Grid Grid.Row="2">
        <cv:CameraView x:Name="cameraView"         
                       HorizontalOptions="FillAndExpand"
                       VerticalOptions="FillAndExpand"/>
        <Label x:Name="timerLabel"
               Text="00:00"
               HorizontalOptions="Start"
               VerticalOptions="Start"
               Margin="10"
               FontSize="20"
               TextColor="Red"
               IsVisible="False" />
        <Button x:Name="controlButton"
                Text="Start Recording"
                VerticalOptions="End"
                HorizontalOptions="Center"
                Clicked="OnCaptureClicked"/>
    </Grid>
</ContentPage>

Here is the function called when the camera is loaded:

public CameraPage()
{
    InitializeComponent();
    cameraView.CamerasLoaded += CameraView_CamerasLoaded;
}

private void CameraView_CamerasLoaded(object sender, EventArgs e)
{
    if (cameraView.NumCamerasDetected > 0)
    {
        if (cameraView.NumMicrophonesDetected > 0)
            cameraView.Microphone = cameraView.Microphones.First();
            cameraView.Camera = cameraView.Cameras.First();
            MainThread.BeginInvokeOnMainThread(async () =>
            {
                if (await cameraView.StartCameraAsync() == CameraResult.Success)
                {
                    controlButton.Text = "Start Recording";
                }
            });
    }
}

However, when I use these settings:

<cv:CameraView x:Name="cameraView" WidthRequest="300" HeightRequest="200"/>

The camera works perfectly, no blur or zoom, but the preview container is way too small. How can I expand the camera preview container without destroying the resolution?

I'm using the Camera.MAUI library in my .NET MAUI application to show a camera preview with some overlay elements (timer and record button). However, I'm facing two issues:

Layout Expansion & Resolution:

When I expand the layout (using a Grid with FillAndExpand settings), the camera preview resolution seems to degrade, it becomes blurry. I need the preview to expand to fill the available space without losing its native resolution.

Recording Behavior:

When I click the record button, the preview suddenly fixes itself (the blur goes away) but the camera view zooms in even more, which is not the desired behavior.

Here is my current XAML code for the layout:

<ContentPage xmlns="http://schemas.microsoft/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft/winfx/2009/xaml"
             xmlns:cv="clr-namespace:Camera.MAUI;assembly=Camera.MAUI">
    <Grid Grid.Row="2">
        <cv:CameraView x:Name="cameraView"         
                       HorizontalOptions="FillAndExpand"
                       VerticalOptions="FillAndExpand"/>
        <Label x:Name="timerLabel"
               Text="00:00"
               HorizontalOptions="Start"
               VerticalOptions="Start"
               Margin="10"
               FontSize="20"
               TextColor="Red"
               IsVisible="False" />
        <Button x:Name="controlButton"
                Text="Start Recording"
                VerticalOptions="End"
                HorizontalOptions="Center"
                Clicked="OnCaptureClicked"/>
    </Grid>
</ContentPage>

Here is the function called when the camera is loaded:

public CameraPage()
{
    InitializeComponent();
    cameraView.CamerasLoaded += CameraView_CamerasLoaded;
}

private void CameraView_CamerasLoaded(object sender, EventArgs e)
{
    if (cameraView.NumCamerasDetected > 0)
    {
        if (cameraView.NumMicrophonesDetected > 0)
            cameraView.Microphone = cameraView.Microphones.First();
            cameraView.Camera = cameraView.Cameras.First();
            MainThread.BeginInvokeOnMainThread(async () =>
            {
                if (await cameraView.StartCameraAsync() == CameraResult.Success)
                {
                    controlButton.Text = "Start Recording";
                }
            });
    }
}

However, when I use these settings:

<cv:CameraView x:Name="cameraView" WidthRequest="300" HeightRequest="200"/>

The camera works perfectly, no blur or zoom, but the preview container is way too small. How can I expand the camera preview container without destroying the resolution?

• android
• maui
• android-camera
• maui-community-toolkit

Share Improve this question Follow edited Mar 11 at 10:07 Arjun-S96 asked Mar 6 at 15:53 Arjun-S96Arjun-S96 522 bronze badges 1

• cv:CameraView sounds like a reference to hjam40 Camera.MAUI, which is NOT maui-community-toolkit CameraView. Which one are you using? Please add to question the line that defines cv. Is it this: xmlns:cv="clr-namespace:Camera.MAUI;assembly=Camera.MAUI"? – ToolmakerSteve Commented Mar 8 at 23:19

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

According to your description, there will be no blurring problem when setting a fixed width and height for CameraView. Therefore, you can use the following method to set the width and height to expand the size of CameraView to the boundary.

private void CameraView_CamerasLoaded(object sender, EventArgs e)
{
    cameraView.WidthRequest = DeviceDisplay.Current.MainDisplayInfo.Width / DeviceDisplay.Current.MainDisplayInfo.Density;
    cameraView.HeightRequest = DeviceDisplay.Current.MainDisplayInfo.Height / DeviceDisplay.Current.MainDisplayInfo.Density;
    ...
}