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.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/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?
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;
...
}