Premiers pas avec le sélecteur de médias dans .NET MAUI

Donnez à vos utilisateurs les moyens de télécharger des photos et des vidéos sur votre application iOS ou Android avec le sélecteur de médias dans .NET MAUI.

De nos jours, il est courant de permettre aux utilisateurs de télécharger des photos ou des vidéos sur vos applications. Par exemple, les applications bancaires permettent aux utilisateurs de télécharger des documents essentiels à traiter, leur évitant ainsi de se rendre dans un bureau physique. Offrir ce type d’expérience à vos applications ajoute beaucoup de valeur à l’expérience utilisateur. Dans cet article, nous allons vous montrer comment implémenter Media Picker avec .NET MAUI de manière simple.

Conditions préalables

Tout d’abord, vous devrez ajouter quelques paramètres de plate-forme.

Sur Android

Pour vous assurer que votre application fonctionne correctement sur différentes versions d’Android, vous devez implémenter certaines autorisations générales ainsi que des autorisations spécifiques à la version.

Vous avez deux façons de procéder :

1. Autorisations basées sur l’assemblage

Aller à Plateforme > Android > AndroidApplication.cs et définissez les autorisations suivantes :

• Vous avez besoin CAMERA comme autorisation générale.

[assembly: UsesPermission(Android.Manifest.Permission.Camera)]

• Si votre application cible Android 12 ou une version antérieure, ajoutez le READ_EXTERNAL_STORAGE et WRITE_EXTERNAL_STORAGE autorisations.

[assembly: UsesPermission(Android.Manifest.Permission.ReadExternalStorage, MaxSdkVersion = 32)]

[assembly: UsesPermission(Android.Manifest.Permission.WriteExternalStorage, MaxSdkVersion = 32)]

• Si votre application cible Android 13 ou version ultérieure, ajoutez le READ_MEDIA_IMAGES, READ_MEDIA_VIDEO et READ_MEDIA_AUDIO autorisations.

[assembly: UsesPermission(Android.Manifest.Permission.ReadMediaAudio)]

[assembly: UsesPermission(Android.Manifest.Permission.ReadMediaImages)]

[assembly: UsesPermission(Android.Manifest.Permission.ReadMediaVideo)]

• De plus, vous pouvez inclure les propriétés suivantes pour filtrer les appareils sans caméra. Si nécessaire, réglez-les sur FAUX pour les rendre facultatifs.

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

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

2. Mise à jour du manifeste Android

Aller à Plateforme > Android > Android Manifest.cs et définissez les autorisations suivantes :

<uses-permission android:name="android.permission.CAMERA" />
    
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" android:maxSdkVersion="32" />
    
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" android:maxSdkVersion="32" />
    
<!-- Required only if your app needs to access images or photos that other apps created -->
    
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
    
<!-- Required only if your app needs to access videos that other apps created -->
    
<uses-permission android:name="android.permission.READ_MEDIA_VIDEO" />
    
<!-- Required only if your app needs to access audio files that other apps created -->
    
<uses-permission android:name="android.permission.READ_MEDIA_AUDIO" />

⚠ Notez que ces autorisations respectent les mêmes conditions expliquées dans le premier formulaire, selon la version d’Android.

• Si votre projet cible Android 11 (R API 30) ou version ultérieure, ajoutez les nœuds de requête/d’intention suivants dans le nœud de manifeste pour mettre à jour les requêtes de manifeste qui utilisent les exigences de visibilité du package Android :

<queries>
  <intent>
    <action android:name="android.media.action.IMAGE_CAPTURE" />
  </intent>
</queries>

Sur iOS

Sur iOS/Mac Catalyst, accédez à Plateforme > iOS ou MacCatalyst > Info.plist et définissez les autorisations suivantes :

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

<key>NSMicrophoneUsageDescription</key>
<string>This app needs access to microphone for taking videos.</string>

<key>NSPhotoLibraryAddUsageDescription</key>
<string>This app needs access to the photo gallery for picking photos and videos.</string>

<key>NSPhotoLibraryUsageDescription</key>
<string>This app needs access to photos gallery for picking photos and videos.</string>

✍️ Pour demander des autorisations, il est essentiel de considérer la description attachée à chacune. Ces descriptions seront présentées à l’utilisateur lors du processus de demande.

🚧 Pour Windows, vous n’avez besoin d’aucune configuration supplémentaire.

Les capacités de Media Picker sont rendues possibles par le Interface IMediaPicker, qui permet aux utilisateurs de capturer ou de sélectionner des photos et des vidéos sur leurs appareils. L’espace de noms Microsoft.Maui.Media contient l’implémentation par défaut de l’interface IMediaPicker, à laquelle vous pouvez accéder via la propriété MediaPicker.Default.

IMediaPicker inclut un ensemble de méthodes qui renvoient un FileResult. Ceux-ci incluent les éléments suivants :

📷 Pour les photos

• PickPhotoAsync: Permet aux utilisateurs d’ouvrir le navigateur multimédia et de sélectionner une photo parmi les options disponibles.
• CapturePhotoAsync: Responsable de l’ouverture de l’appareil photo pour prendre une photo.

🎥 Pour les vidéos

• PickVideoAsync: Permet aux utilisateurs d’ouvrir le navigateur multimédia pour sélectionner une vidéo.
• CaptureVideoAsync: Responsable de l’ouverture de la caméra pour prendre une vidéo.

⚠ Pour garantir que les vérifications d’autorisation et les demandes sont gérées automatiquement par .NET MAUI, toutes les méthodes doivent être appelées sur le thread de l’interface utilisateur.

📝 En optiontoutes les méthodes mentionnées ci-dessus reçoivent un MediaPickerOptions paramètre qui permet d’ajouter un titre à la boîte de dialogue à afficher. Notez que cela ne fonctionne que sur certains systèmes d’exploitation.

Maintenant, codons

Il est temps de traduire en code tout ce que vous avez appris jusqu’à présent. Le graphique suivant montre la structure que vous utiliserez pour organiser chaque détail du code.

⭐ Implémentons maintenant le code qui vous permet d’ouvrir le Media Picker. Cet exemple utilise le PickPhotoAsync() méthode.

Travailler avec XAML

Créons un bouton et ajoutons un contrôle d’image pour afficher la photo sélectionnée.

<VerticalStackLayout Spacing="25" Padding="30,0" VerticalOptions="Center">
     
  <Image x:Name="myImage" 
  BackgroundColor="Gray"
  WidthRequest="300"
  HeightRequest="300"
  HorizontalOptions="Center" />
	     
  <Button
  Text="Pick a picture"
  Clicked="TakePhoto"
  HorizontalOptions="Center" />
     
</VerticalStackLayout>

Création de la méthode

Créons une méthode asynchrone appelée TakePhoto pour cet exemple. Le code suivant permet à l’utilisateur d’appuyer sur un bouton et de sélectionner une photo dans une boîte de dialogue. Vous y parviendrez avec le PickPhotoAsync méthode.

✍️ Notez que tout cela sera enregistré dans le Photo variable, qui est une FileResult. Plus tard, vous utiliserez cette variable pour obtenir des informations sur l’image sélectionnée (que vous pourrez voir à l’étape suivante).

private async void TakePhoto(object sender, EventArgs e)
{
  FileResult photo = await MediaPicker.Default.PickPhotoAsync(new MediaPickerOptions
  {
    Title = "Select your photo"
  });
                  
  
                   
}

Veuillez garder à l’esprit que l’ajout du titre avec MediaPickerOptions n’est pas obligatoire.

Afficher l’image

Comme mentionné précédemment, la variable photo permet d’accéder à des informations telles que le nom du fichier ou le chemin complet, entre autres détails. Cet exemple utilise le OpenReadAsync méthode pour récupérer l’image.

Dans le code de la section précédente du blog, où il est indiqué // Here, add the code that is being explained in the next stepinsérez le code suivant :

if (photo != null)
{
  var stream = await photo.OpenReadAsync();
  myImage.Source = ImageSource.FromStream(() => stream);
}

Et c’est tout! 😍 Voyons le résultat !

Vous souhaitez prendre une nouvelle photo au lieu d’en sélectionner une existante ? Ajoutez le code présenté ci-dessous. Cet exemple utilise le CapturePhotoAsync méthode pour capturer la photo.

private async void TakePhoto(object sender, EventArgs e)
{
     
FileResult photo = await MediaPicker.Default.CapturePhotoAsync();
     
  if (photo != null)
  {
    
    using Stream sourceStream = await photo.OpenReadAsync();
		     
    
    string localFilePath = Path.Combine(FileSystem.CacheDirectory, photo.FileName);
	     
  await sourceStream.CopyToAsync(File.OpenWrite(localFilePath));
	     
  }
}

Conclusion

J’espère que cet article sur l’utilisation de Media Picker pour permettre à vos utilisateurs de télécharger des photos et des vidéos sur votre application vous a été utile ! Je vous encourage à mettre en œuvre ces conseils dans votre prochain projet. 💚💕

Cet article était basé sur Documentation officielle de Microsoft.

À la prochaine! 💁‍♀️

Utilisez une bibliothèque de composants synchronisée avec la cadence de publication de .NET MAUI. Interface utilisateur Telerik pour .NET MAUI est livré avec un essai gratuit de 30 jours.