Enregistrement d’écran dans .NET MAUI

Apprenons à utiliser le plugin ScreenRecording créé par Gerald Versluis dans une application .NET MAUI (disponible pour Android, iOS et macOS).

Les exigences peuvent varier considérablement lorsque vous travaillez avec différentes applications. Certains peuvent utiliser des fonctionnalités conventionnelles telles que la prise de photos ou la prise en charge des modes clair et sombre, tandis que d’autres peuvent nécessiter des fonctionnalités moins courantes telles que l’enregistrement d’écran d’application.

Heureusement, la mise en œuvre de l’enregistrement d’écran est assez simple. Dans cet article, je vais vous montrer comment le faire pour vos applications .NET MAUI, en vous fournissant ces connaissances lorsque vous en avez besoin. 🚀

L’explication sera divisée selon les points suivants :

🔹 Qu’est-ce que le Plugin.Maui.ScreenRecording
🔹 Configuration initiale et intégration de la plateforme
🔹 Comment l’utiliser
🔹 Démo de l’application

Qu’est-ce que Plugin.Maui.ScreenRecording ?

C’est un brancher créé par Gérald Versluis. Il permet l’enregistrement d’écran à partir des applications .NET MAUI et est disponible pour Android, iOS et macOS.

🔧 Configuration initiale

Pour démarrer la mise en œuvre, vous devez suivre les étapes ci-dessous :

➖ Ajoutez le package NuGet.

Commencez par ouvrir le gestionnaire de packages NuGet dans votre Visual Studio et recherchez le Plugin.Maui.ScreenRecording. Au moment de la rédaction de cet article, ce package NuGet est dans une version d’aperçu. Pour y accéder, cochez l’option « Inclure les avant-premières ».

➖ Accédez à votre fichier MauiProgram.cs.

Dans le CréerMauiApp méthode, trouvez la ligne .UseMauiApp<App>(). Juste en dessous, insérez le .UseScreenRecording() méthode d’extension, comme je vous le montre ci-dessous :

var builder = MauiApp.CreateBuilder();
builder
.UseMauiApp<App>()
.UseScreenRecording() // Line added
.ConfigureFonts(fonts =>
{
	fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
	fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
});

⚠ N’oubliez pas d’ajouter l’utilisation Plugin.Maui.ScreenRecording; au sommet de la classe.

Intégration de la plateforme

Continuons en ajoutant quelques paramètres de plateforme. Suivez les instructions ci-dessous :

Sur Android

Aller à Plateforme ➖ Android ➖ AndroidManifes.cs ➖ Clic droit ➖ Ouvrir avec ➖ Code source éditeur et ajoutez l’autorisation suivante :

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.FOREGROUND_SERVICE" />

<!-- This one is only needed when targeting API 34 and up -->
<uses-permission android:name="android.permission.FOREGROUND_SERVICE_MEDIA_PROJECTION" /

Vous devez également ajouter le service spécifié ci-dessous. Assurez-vous qu’il est placé dans le <application> Mots clés.

<application>
    <service android:name="Plugin.Maui.ScreenRecording.ScreenRecordingImplementation.ScreenRecordingService" android:exported="false" android:foregroundServiceType="mediaProjection" />
</application>

Sur iOS/MacOS

Si vous souhaitez sauvegarder des enregistrements dans les applications Photo, vous devez appliquer le Confidentialité – Autorisation d’utilisation des ajouts à la bibliothèque de photos.

Pour ce faire, accédez à Plateforme ➖ iOS /MacCatalyst ➖ info.plistet ajoutez le NSPhotoLibraryAddUsageDescription autorisation. Après l’avoir ajouté, vous devriez voir quelque chose de similaire à l’image suivante :

🚧 les fenêtres n’est pas (encore) pris en charge.

Comment utiliser l’enregistrement d’écran ? 🤔

Sur la page où vous souhaitez enregistrer l’écran, ajoutez une variable et accédez à l’instance statique du ScreenRecording objet comme suit :

readonly IScreenRecording screenRecording;

this.screenRecording = ScreenRecording.Default;

Méthodes disponibles

Le screenRecording variable vous permettra d’accéder aux méthodes suivantes :

➖ Commencer l’enregistrement: Cette méthode vous permet de lancer l’enregistrement d’écran. Il peut éventuellement recevoir un ScreenRecordingOptions paramètre, qui interagit avec les propriétés suivantes :

• Activer le microphone : Reçoit un booléen comme valeur. Obtient ou définit s’il faut également enregistrer l’entrée du microphone. La valeur par défaut est fausse.
• Titre du contenu de la notification : Reçoit une chaîne comme valeur. Obtient ou définit le titre du contenu de la notification. La valeur par défaut est « Enregistrement d’écran en cours… ».
• Texte du contenu de la notification : Reçoit une chaîne comme valeur. Obtient ou définit le texte du contenu de la notification. La valeur par défaut est « Un enregistrement d’écran est actuellement en cours, soyez prudent avec toute information sensible. »
• Sauvegarder dans la gallerie: Reçoit un booléen comme valeur. Obtient ou définit s’il faut rendre cet enregistrement disponible dans les applications de galerie de l’appareil. La valeur par défaut est fausse.
• Enregistrer le chemin: Reçoit une chaîne comme valeur. Obtient ou définit le chemin d’accès dans lequel enregistrer l’enregistrement. La valeur par défaut est le dossier temporaire de l’appareil avec un fichier horodaté, par exemple screenrecording_20230101_133700.mp4.

Exemple de code :

ScreenRecordingOptions options = new()
{
    EnableMicrophone = true,
    NotificationContentTitle = “Hey! You screen is benign recorded”,
    NotificationContentText = “Please keep you screen exactly on the screen that you want to record.”,
    SaveToGallery = true,
    SavePath = Path.Combine(Path.GetTempPath(), "myRecording.mp4"),
};

screenRecording.StartRecording(options);

➖ Arrête d’enregistrer: Arrête l’enregistrement et enregistre le fichier vidéo dans la galerie de l’appareil. Pour l’utiliser, il vous suffit d’ajouter la ligne suivante :

ScreenRecordingFile screenResult = await screenRecording.StopRecording();

Propriétés disponibles

➖ Est l’enregistrement : Renvoie un booléen comme valeur, indique si l’enregistrement d’écran est en cours ou non.

if (!screenRecording.IsRecording)
{
    await DisplayAlert("Not recording", "You are not recording the screen.", "OK");
}

➖ Prise en charge: Renvoie un booléen comme valeur. Obtient si l’enregistrement d’écran est pris en charge ou non sur cet appareil.

if (!screenRecording.IsSupported)
{
    await DisplayAlert("Not supported", "Screen recorder is not supported", "OK");
    return;
}

Créer une démo d’application

Voyons maintenant cela en pratique avec un exemple. Pour mieux guider votre exploration des utilisations de l’enregistreur d’écran, nous illustrerons avec un exemple étape par étape. Celui-ci est référencé sur la chaîne YouTube de Gerald Versluis.

Étape 1 : Définition de l’interface utilisateur

Notre écran comportera cinq éléments :

• UN boîte vidéo pour jouer la vidéo enregistrée
• Un passage à contrôle si le micro est enregistré
• Un autre changement pour déterminer si nous serons enregistrer la vidéo (rappelez-vous que dans notre configuration initiale j’ai mentionné que ce n’était que pour iOS/macOS)
• Enfin, deux boutons pour départ et arrêt l’enregistrement d’écran

Maintenant, ajoutons chacun de ces éléments au code :

Boîte vidéo pour lire la vidéo enregistrée

En prime, nous utiliserons une ressource précieuse de la boîte à outils communautaire .NET MAUI : l’élément multimédia. Bien que ce ne soit pas l’objet principal de l’article, nous fournirons de brèves instructions pour sa mise en œuvre dans votre projet, vous permettant de construire l’exemple du début à la fin.

➖ D’abord ajoutez le package NuGet CommunityToolkit.Maui.MediaElement.

➖ Deuxièmeau-dessus de la ligne où vous ajoutez le .UseScreenRecording() méthode d’extension, insérez ce qui suit : .UseMauiCommunityToolkitMediaElement().

➖ Troisièmedans votre XAML, ajoutez l’espace de noms suivant :

xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"

➖ Quatrièmeenfin, vous pouvez ajouter l’élément à votre interface utilisateur comme suit :

<toolkit:MediaElement x:Name="videoRecorded" WidthRequest="400" HeightRequest="300"></toolkit:MediaElement>

Et c’est tout. Pour plus d’informations sur MediaElement, vous pouvez voir ceci vidéo.

Commutateurs pour contrôler le microphone et enregistrer la vidéo

<Grid RowDefinitions="Auto,Auto" 
    ColumnDefinitions="Auto,*" 
    RowSpacing="20" 
    ColumnSpacing="10">

    <Switch Grid.Row="0" Grid.Column="0" x:Name="recordMicrophone"/> 
    <Label Grid.Row="0" Grid.Column="1" Text="Record microphone" VerticalTextAlignment="Center"/>
    
    <Switch Grid.Row="1" Grid.Column="0" x:Name="saveToGallery" /> 
    <Label Grid.Row="1" Grid.Column="1" Text="Save to iOS/macOS Gallery" VerticalTextAlignment="Center"/>

</Grid>

Boutons de démarrage et d’arrêt de l’enregistrement

<Button x:Name="btnStart" Text="Start Recording" Clicked="btnStart_Clicked"/>

<Button x:Name="btnStop" Text="Stop Recording" Clicked="btnStop_Clicked"/>

À ce stade, vous devriez obtenir un résultat semblable à celui-ci :

Étape 2 : enregistrement de l’interface avec injection de dépendances

Revenez au fichier Mauiprogram.cs et ajoutez la ligne suivante juste avant l’instruction return :

builder.Services.AddTransient<MainPage>();

Étape 3 : Accédez au MainPage.xaml.cs

Maintenant qu’il est enregistré pour l’injection de dépendances, vous pouvez l’injecter dans la page principale. C’est aussi une bonne occasion d’expérimenter les boutons Start et Stop en manipulant les IsEnabled propriété.

readonly IScreenRecording screenRecording;

public MainPage(IScreenRecording screenRecording)
{
    InitializeComponent();
    this.screenRecording = screenRecording;
    btnStart.IsEnabled = true;
    btnStop.IsEnabled = false;
}

⚠️ Une autre option est que vous pouvez utiliser une implémentation statique using ScreenRecording.Default.

Étape 4 : Ajout de l’événement du bouton Démarrer

Pour ce bouton, nous nous assurons d’abord que l’enregistrement est possible, puis nous activons les boutons correspondants et enfin lançons l’enregistrement d’écran.

async void btnStart_Clicked(System.Object sender, System.EventArgs e)
{
    if (!screenRecording.IsSupported)
    {
	    await DisplayAlert("Not supported", "Screen recorder is not supported.", "OK");
	    return;
    }

    btnStart.IsEnabled = false;
    btnStop.IsEnabled = true;
    
    screenRecording.StartRecording(new()
    {
	    EnableMicrophone = recordMicrophone.IsToggled,
	    SaveToGallery = saveToGallery.IsToggled,
    });
}

Étape 5 : Ajout de l’événement du bouton d’arrêt

Dans cet événement final, nous veillerons à arrêter l’enregistrement, à générer le fichier et à l’afficher dans la boîte vidéo précédemment ajoutée.

async void btnStop_Clicked(System.Object sender, System.EventArgs e)
{
    ScreenRecordingFile screenResult = await screenRecording.StopRecording();

    if (screenResult != null)
    {
	    FileInfo file = new FileInfo(screenResult.FullPath); 
	    await Shell.Current.DisplayAlert("File created", $"path: {screenResult.FullPath}", "OK");
	    videoBox.Source = screenResult.FullPath;
    }
    else
    {
	    await Shell.Current.DisplayAlert("No Screen Recording","", "OK");
    }
    
    btnStart.IsEnabled = true;
    btnStop.IsEnabled = false;
    
}

Super! 🎊 C’est fini ! Maintenant, laissez-moi vous montrer la démo en direct que nous avons créée !

🚫 Limites

• Sur Android vous pouvez naviguer sur tout l’écran de votre téléphone et tout ce que vous faites sera enregistré, même si vous quittez l’application.
• Sur iOS seul ce qui est affiché sur l’écran de votre application .NET MAUI sera enregistré.

Conclusion

C’est tout! J’espère qu’à partir de maintenant vous pourrez implémenter l’enregistrement d’écran dans vos applications .NET MAUI ! À la prochaine! 💚💕

Les références

Cet article est basé sur la documentation de l’auteur du plugin :