MAUI app with Azure Face API integration

 Below is a working sample MAUI app with Azure Face API integration that:

• Allows the user to pick or capture an image

• Sends the image to Azure Face API

• Displays detected face attributes (e.g. age, gender, emotion)

---

Prerequisites

1. Azure Face API Setup

Create an Azure Face resource:
https://portal.azure.com > Create a resource > AI + Machine Learning > Face API

Grab:

• Endpoint (e.g., https://<region>.api.cognitive.microsoft.com)

• Subscription key

---

 .NET MAUI Project Setup

1. Create the project

dotnet new maui -n FaceFinderApp
cd FaceFinderApp

---

2. Add NuGet packages

Run:

dotnet add package Plugin.Media
dotnet add package Newtonsoft.Json

---

3. MainPage.xaml (UI)

<VerticalStackLayout Padding="30" Spacing="20">
    <Label Text="Azure Face Detector" FontSize="32" HorizontalOptions="Center" />
    <Image x:Name="FaceImage" HeightRequest="300" Aspect="AspectFit" />
    <Button Text="Pick Image" Clicked="OnPickImageClicked" />
    <Button Text="Detect Faces" Clicked="OnDetectFacesClicked" />
    <Label x:Name="ResultLabel" Text="Results will appear here" />
</VerticalStackLayout>

---

4. MainPage.xaml.cs (Code-behind)

using Microsoft.Maui.Controls;
using Newtonsoft.Json.Linq;
using Plugin.Media;
using Plugin.Media.Abstractions;
using System.Net.Http.Headers;

namespace FaceFinderApp;

public partial class MainPage : ContentPage
{
    private Stream _imageStream;

    // Azure Face API credentials
    private const string subscriptionKey = "YOUR_FACE_API_KEY";
    private const string faceEndpoint = "https://YOUR_REGION.api.cognitive.microsoft.com";

    public MainPage()
    {
        InitializeComponent();
    }

    private async void OnPickImageClicked(object sender, EventArgs e)
    {
        await CrossMedia.Current.Initialize();
        var file = await CrossMedia.Current.PickPhotoAsync();

        if (file != null)
        {
            _imageStream = file.GetStream();
            FaceImage.Source = ImageSource.FromStream(() => file.GetStream());
        }
    }

    private async void OnDetectFacesClicked(object sender, EventArgs e)
    {
        if (_imageStream == null)
        {
            await DisplayAlert("Error", "Please select an image first.", "OK");
            return;
        }

        string requestParameters = "returnFaceId=true&returnFaceAttributes=age,gender,emotion";
        string uri = $"{faceEndpoint}/face/v1.0/detect?{requestParameters}";

        HttpClient client = new HttpClient();
        client.DefaultRequestHeaders.Add("Ocp-Apim-Subscription-Key", subscriptionKey);

        using (var content = new StreamContent(_imageStream))
        {
            content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
            var response = await client.PostAsync(uri, content);
            var responseString = await response.Content.ReadAsStringAsync();

            if (response.IsSuccessStatusCode)
            {
                var faces = JArray.Parse(responseString);
                if (faces.Count == 0)
                {
                    ResultLabel.Text = "No faces detected.";
                }
                else
                {
                    var face = faces[0];
                    var attrs = face["faceAttributes"];
                    var age = attrs["age"];
                    var gender = attrs["gender"];
                    var emotion = GetTopEmotion(attrs["emotion"]);
                    ResultLabel.Text = $"Detected: {gender}, Age: {age}, Emotion: {emotion}";
                }
            }
            else
            {
                ResultLabel.Text = "Error calling Azure Face API.";
            }
        }
    }

    private string GetTopEmotion(JToken emotionToken)
    {
        var emotions = emotionToken.Children<JProperty>().ToDictionary(p => p.Name, p => (double)p.Value);
        return emotions.OrderByDescending(kv => kv.Value).First().Key;
    }
}

---

5. Platform Permissions

Android (Platforms/Android/AndroidManifest.xml)

Add these inside <manifest>:

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />