Use Camera To Take Photo In Xamarin Forms

To take a picture in Xamarin Forms, you need to use the native platform’s API’s to access the camera. There is nothing built in to Xamarin Forms to handle this, but they are plugins, that make this process incredibly easy. This post, will use the Media Plugin for Xamarin and Windows.

Project Setup

Install the plugin, in your PCL or .NET Standard Library, if applicable, and all your native Xamarin projects that you have.

Install-Package Xam.Plugin.Media

Next, we need to ensure we initialize and provide certain permissions on specific platforms.

In iOS, add this to the info.plist

<key>NSCameraUsageDescription</key>
<string>This app needs access to the camera to take photos.</string>

In Android, add these permissions.

[assembly: UsesFeature("android.hardware.camera", Required = false)]
[assembly: UsesFeature("android.hardware.camera.autofocus", Required = false)]

In UWP, in the package.appxmanifest, check the capability:

Webcam

Note: This plugin can also perform other functions than taking a picture. If you wish to use these functions, please check the readme file that gets automatically opened when you install the plugin, on what additional properties and initialization you will need.

Taking The Photo

Taking a photo is incredibly easy. First lets create a XAML page, with a place to show the photo taken, and a button to launch the camera app.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <Image x:Name="PhotoImage" />
    <Button x:Name="CameraButton" Text="Take Photo" Grid.Row="1" />
</Grid>

Now, lets wire up the button, to launch the camera, through the plugin, and then show it in the image. When you press the button, your app will be backgrounded, while the camera app shows. Once you have taken a picture your app is brought back into the background. Please be aware that your OnResume and other events may be raised, when your app is brought into the foreground again.

public MainPage()
{
    InitializeComponent();

    CameraButton.Clicked += CameraButton_Clicked;
}

private async void CameraButton_Clicked(object sender, EventArgs e)
{
    var photo = await Plugin.Media.CrossMedia.Current.TakePhotoAsync(new Plugin.Media.Abstractions.StoreCameraMediaOptions() { });

    if (photo != null)
        PhotoImage.Source = ImageSource.FromStream(() => { return photo.GetStream(); });
}

You will notice, that you have set many options in the StoreCameraMediaOptions class, including such things as, which camera to use, compression quality and cropping. When the camera app returns, it will contain a MediaFile, that has a stream that you can use. You can also take this stream and turn it into a byte array, if you need to send it somewhere other than your mobile phone.

To view the complete code, please see the sample repository CameraXF.

Microsoft MVP | Xamarin MVP | Xamarin Certified Developer |
Exrin MVVM Framework | Xamarin Forms Developer | Melbourne, Australia
Tagged:Tags:

Leave A Comment?