Comment personnaliser les options de la caméra avec une application UWP pour périphérique
Dans Windows 8.1, les applications UWP pour périphériques permettent aux fabricants d’appareils de personnaliser le menu volant qui affiche davantage d’options de caméra dans certaines applications de caméra. Cette rubrique présente la fenêtre contextuelle Plus d’options affichée par l’API CameraCaptureUI et montre comment la version C# de l’exemple d’application UWP pour caméra remplace la fenêtre contextuelle par défaut par une fenêtre contextuelle personnalisée. Pour en savoir plus sur les applications d’appareils UWP en général, veuillez consulter la rubrique Découverte des applications d’appareils UWP.
Remarque
Dans Windows 8.1, l’application caméra intégrée n’affiche pas de bouton Plus d’options et ne peut donc pas afficher une application UWP pour périphérique pour afficher plus d’options de caméra. Cependant, la classe CameraCaptureUI, disponible pour toutes les applications UWP, dispose d’un bouton Plus d’options et peut afficher des applications UWP pour périphérique à partir de celui-ci.
La version C# de l’exemple d’application UWP pour caméra utilise la page DeviceAppPage.xaml pour présenter l’interface utilisateur d’une fenêtre contextuelle personnalisée pour plus d’options de caméra. L’exemple applique également des effets de caméra en utilisant un MFT (media foundation transform) de pilote de caméra. Pour plus d’informations à ce sujet, veuillez consulter la rubrique Création d’un MFT de pilote de caméra.
Remarque
Les exemples de code présentés dans cette rubrique sont basés sur la version C# de l’exemple d’application UWP pour caméra. Cet exemple est également disponible en JavaScript et C++. Téléchargez les exemples pour voir les dernières versions du code.
Plus d’options pour les caméras
L’expérience de plus d’options de caméra est la fonctionnalité qu’une application UWP pour périphérique fournit lorsqu’une autre application, une application UWP, capture ou prévisualise une vidéo à partir de la caméra en utilisant l’API CameraCaptureUI. Elle est accessible via le lien Plus d’options dans la fenêtre d’options de la caméra. Elle n’est pas en plein écran, mais s’affiche dans une fenêtre contextuelle, qui est un contrôle permettant d’afficher une interface utilisateur légère et contextuelle qui est fermée lorsque l’utilisateur clique ou appuie en dehors de celle-ci.
Cette expérience peut être utilisée pour mettre en valeur les fonctionnalités différenciées de votre caméra, telles que la possibilité d’appliquer des effets vidéo personnalisés.
Lorsqu’une application UWP pour périphérique n’est pas installée pour une caméra, Windows fournit une expérience par défaut de plus d’options de caméra. Si Windows détecte qu’une application UWP pour périphérique est installée pour votre caméra, et que l’application a choisi l’extension windows.cameraSettings, votre application remplace l’expérience par défaut fournie par Windows.
Pour invoquer la fenêtre contextuelle pour plus d’options de caméra :
Ouvrez une application UWP qui utilise l’API CameraCaptureUI (par exemple, l’exemple de CameraCaptureUI).
Appuyez sur le bouton Options dans l’interface utilisateur.
Cela ouvre une fenêtre contextuelle Options de la caméra qui affiche des options de base pour définir la résolution et la stabilisation vidéo.
Sur la fenêtre contextuelle Options de la caméra, appuyez sur Plus d’options.
La fenêtre contextuelle Plus d’options s’ouvre.
La fenêtre contextuelle par défaut apparaît lorsqu’aucune application UWP pour périphérique n’est installée pour la caméra.
Une fenêtre contextuelle personnalisée apparaît lorsqu’une application UWP pour périphérique est installée pour la caméra.
Cette image montre la fenêtre contextuelle par défaut pour plus d’options de caméra à côté d’un exemple de fenêtre contextuelle personnalisée.
Prérequis
Avant de commencer :
Préparez votre PC de développement. Veuillez consulter la section Bien démarrer pour obtenir des informations sur le téléchargement des outils et la création d’un compte développeur.
Associez votre application au magasin. Consultez la section Créer une application UWP pour périphérique pour obtenir des informations à ce sujet.
Créez des métadonnées de périphérique pour votre imprimante qui l’associent à votre application. Veuillez consulter la section Créer des métadonnées de périphérique pour plus d’informations à ce sujet.
Construisez l’interface utilisateur pour la page principale de votre application. Toutes les applications UWP pour périphériques peuvent être lancées à partir de Start, où elles seront affichées en plein écran. Utilisez l’expérience Start pour mettre en valeur votre produit ou services d’une manière qui correspond à la marque spécifique et aux caractéristiques de vos appareils. Il n’y a pas de restrictions spéciales sur le type de contrôles UI qu’elle peut utiliser. Pour bien démarrer avec la conception de l’expérience plein écran, consultez les principes de conception de Microsoft Store.
Étape 1 : Enregistrer l’extension
Pour que Windows reconnaisse que l’application peut fournir une fenêtre contextuelle personnalisée pour plus d’options de caméra, elle doit enregistrer l’extension des paramètres de la caméra. Cette extension est déclarée dans un élément Extension, avec un attribut Category défini sur une valeur de windows.cameraSettings. Dans les exemples C# et C++, l’attribut Executable est défini sur DeviceAppForWebcam.exe et l’attribut EntryPoint est défini sur DeviceAppForWebcam.App.
Vous pouvez ajouter l’extension des paramètres de la caméra sur l’onglet Déclarations de l’éditeur de manifeste dans Microsoft Visual Studio. Vous pouvez également modifier manuellement le manifeste du package d’application XML, en utilisant l’éditeur XML (Texte). Faites un clic droit sur le fichier Package.appxmanifest dans L’Explorateur de solutions pour accéder aux options de modification.
Cet exemple montre l’extension des paramètres de la caméra dans l’élément Extension, tel qu’il apparaît dans le fichier de manifeste du package d’application, Package.appxmanifest.
<?xml version="1.0" encoding="utf-8"?>
<Package xmlns="http://schemas.microsoft.com/appx/2010/manifest">
<Identity Name="Microsoft.SDKSamples.DeviceAppForWebcam.CPP" Publisher="CN=Microsoft Corporation, O=Microsoft Corporation, L=Redmond, S=Washington, C=US" Version="1.0.0.0" />
<Properties>
<DisplayName>DeviceAppForWebcam CPP sample</DisplayName>
<PublisherDisplayName>Microsoft Corporation</PublisherDisplayName>
<Logo>Assets\storeLogo-sdk.png</Logo>
</Properties>
<Prerequisites>
<OSMinVersion>6.3.0</OSMinVersion>
<OSMaxVersionTested>6.3.0</OSMaxVersionTested>
</Prerequisites>
<Resources>
<Resource Language="x-generate" />
</Resources>
<Applications>
<Application Id="DeviceAppForWebcam.App" Executable="$targetnametoken$.exe" EntryPoint="DeviceAppForWebcam.App">
<VisualElements DisplayName="DeviceAppForWebcam CPP sample" Logo="Assets\squareTile-sdk.png" SmallLogo="Assets\smallTile-sdk.png" Description="DeviceAppForWebcam CPP sample" ForegroundText="light" BackgroundColor="#00b2f0">
<DefaultTile ShortName="DeviceApp CPP" ShowName="allLogos" />
<SplashScreen Image="Assets\splash-sdk.png" BackgroundColor="#00b2f0" />
</VisualElements>
<Extensions>
<Extension Category="windows.cameraSettings" Executable="DeviceAppForWebcam.exe" EntryPoint="DeviceAppForWebcam.App" />
</Extensions>
</Application>
</Applications>
</Package>
Étape 2 : Développez l’interface utilisateur
Avant de construire votre application, vous devriez travailler avec vos designers et votre équipe marketing pour concevoir l’expérience utilisateur. L’expérience utilisateur devrait projeter les aspects de branding de votre entreprise et vous aider à établir une connexion avec vos utilisateurs.
Recommandations en matière de conception
Il est important de consulter les directives pour les fenêtres contextuelles des applications UWP avant de concevoir votre fenêtre contextuelle personnalisée. Les directives aident à garantir que votre fenêtre contextuelle offre une expérience intuitive qui est cohérente avec d’autres applications UWP.
Pour la page principale de votre application, gardez à l’esprit que Windows 8.1 peut afficher plusieurs applications dans différentes tailles sur un seul écran. Consultez les directives suivantes pour en savoir plus sur la manière dont votre application peut s’adapter de manière transparente entre les tailles d’écran, les tailles de fenêtre et les orientations.
Directives pour les tailles de fenêtre et l’adaptation à l’écran
Directives pour le redimensionnement des fenêtres pour des mises en page hautes et étroites
Dimensions de la fenêtre contextuelle
La fenêtre contextuelle qui affiche plus d’options de caméra mesure 625 pixels de haut et 340 pixels de large. La zone contenant le texte Plus d’options en haut est fournie par Windows et mesure environ 65 pixels de haut, laissant 560 pixels pour la zone visible de la fenêtre contextuelle personnalisée. Une fenêtre contextuelle personnalisée ne doit pas dépasser 340 pixels de large.
Remarque
Si votre fenêtre contextuelle personnalisée mesure plus de 560 pixels de haut, l’utilisateur peut faire glisser ou faire défiler pour afficher les parties de la fenêtre contextuelle qui se trouvent au-dessus ou en dessous de la zone visible.
Effets suggérés
Effets de couleur. Par exemple, noir et blanc, sépia, ou solarisation de l’image entière.
Effets de suivi des visages. Lorsqu’un visage est identifié dans l’image et qu’une superposition, telle qu’un chapeau ou une paire de lunettes, est ajoutée dessus.
Modes de scène. Il s’agit de modes d’exposition et de mise au point prédéfinis pour différentes conditions d’éclairage.
Paramètres suggérés
La fenêtre contextuelle personnalisée de votre application UWP pour périphérique peut fournir un commutateur pour activer les paramètres implémentés matériellement, tels que les schémas de correction des couleurs fournis par le fabricant.
Implémentez des propriétés de base qui complètent les autres paramètres exposés par votre application UWP pour pour périphérique. Par exemple, de nombreux périphériques peuvent exposer des contrôles pour ajuster la luminosité, le contraste, le scintillement, la mise au point et l’exposition, mais un périphérique qui implémente TrueColor pour ajuster automatiquement la luminosité et le contraste peut ne pas avoir besoin de fournir ces paramètres.
Restrictions
N’ouvrez pas la fenêtre contextuelle personnalisée de votre application UWP pour pour périphérique à partir de votre application principale (en appelant la méthode
CameraOptionsUI.Show) lorsque l’application ne diffuse pas ou ne capture pas.Ne fournissez pas de prévisualisation ni ne prenez possession du flux vidéo à partir de l’intérieur de la fenêtre contextuelle personnalisée de votre application UWP pour pour périphérique. La fenêtre contextuelle personnalisée est destinée à fonctionner en complément d’une autre application qui capture la vidéo. L’application de capture détient la propriété du flux vidéo. Vous ne devriez pas essayer d’accéder au flux vidéo en utilisant des API de bas niveau. Cela peut entraîner un comportement inattendu, où l’application de capture perd l’accès au flux.
Ne modifiez pas la résolution dans la fenêtre contextuelle personnalisée.
N’essayez pas d’afficher des pop-ups, des notifications ou des dialogues en dehors de la zone prévue pour la fenêtre contextuelle personnalisée. Ces types de dialogues ne sont pas autorisés.
Ne lancez pas de capture audio ou vidéo à l’intérieur de la fenêtre contextuelle personnalisée. Celle-ci est destinée à étendre une autre application qui capture de la vidéo, plutôt qu’à initier la capture elle-même. De plus, la capture audio ou vidéo peut déclencher une boîte de dialogue système, et les dialogues contextuels ne sont pas autorisés à l’intérieur de la fenêtre contextuelle personnalisée.
Étape 3 : Gérer l’activation
Si votre application a déclaré l’extension des paramètres de la caméra, elle doit implémenter une méthode OnActivated pour gérer l’événement Activation de l’application. Cet événement est déclenché lorsqu’une application UWP, en utilisant la classe CameraCaptureUI, appelle la méthode CameraOptionsUI.Show. L’activation de l’application est le moment où votre application peut choisir quelle page sera lancée au démarrage de l’application. Pour les applications qui ont déclaré l’extension des paramètres de la caméra, Windows transmet le pour périphériques vidéo dans les arguments de l’événement Activé : Windows.ApplicationModel.Activation.IActivatedEventArgs.
Une application UWP pour pour périphérique peut déterminer que l’activation est destinée aux paramètres de la caméra (que quelqu’un vient de sélectionner Plus d’options sur la boîte de dialogue Options de la caméra) lorsque la propriété kind de l’argument de l’événement est égale à Windows.ApplicationModel.Activation.ActivationKind.CameraSettings.
Cet exemple montre le gestionnaire d’événements d’activation dans la méthode OnActivated, tel qu’il apparaît dans le fichier App.xaml.cs. Les arguments de l’événement sont ensuite convertis en Windows.ApplicationModel.Activation.CameraSettingsActivatedEventArgs et envoyés à la méthode Initialize de la fenêtre contextuelle personnalisée (DeviceAppPage.xaml.cs).
protected override void OnActivated(IActivatedEventArgs args)
{
if (args.Kind == ActivationKind.CameraSettings)
{
base.OnActivated(args);
DeviceAppPage page = new DeviceAppPage();
Window.Current.Content = page;
page.Initialize((CameraSettingsActivatedEventArgs)args);
Window.Current.Activate();
}
}
Étape 4 : Contrôler les paramètres et les effets
Lorsque la méthode Initialize de la fenêtre contextuelle personnalisée (DeviceAppPage.xaml.cs) est appelée, le périphérique vidéo est transmis à la fenêtre contextuelle à travers les arguments de l’événement. Ces arguments exposent des propriétés pour contrôler la caméra :
La propriété args.VideoDeviceController fournit un objet de type Windows.Media.Devices.VideoDeviceController. Cet objet fournit des méthodes pour ajuster les paramètres standard.
La propriété args.VideoDeviceExtension est un pointeur vers le MFT du pilote de la caméra. Cette propriété sera nulle si aucune interface Driver MFT n’est exposée. Pour plus d’informations sur les MFT de pilote de caméra, veuillez consulter la rubrique Création d’un MFT de pilote de caméra.
Cet exemple montre une partie de la méthode Initialize, telle qu’elle apparaît dans le fichier DeviceAppPage.xaml.cs. Ici, le contrôleur du périphérique vidéo (objet videoDevController) et le MFT du pilote de la caméra (objet lcWrapper) sont créés et la fenêtre contextuelle est remplie avec les paramètres de caméra actuels.
public void Initialize(CameraSettingsActivatedEventArgs args)
{
videoDevController = (VideoDeviceController)args.VideoDeviceController;
if (args.VideoDeviceExtension != null)
{
lcWrapper = new WinRTComponent();
lcWrapper.Initialize(args.VideoDeviceExtension);
}
bool bAuto = false;
double value = 0.0;
if (videoDevController.Brightness.Capabilities.Step != 0)
{
slBrt.Minimum = videoDevController.Brightness.Capabilities.Min;
slBrt.Maximum = videoDevController.Brightness.Capabilities.Max;
slBrt.StepFrequency = videoDevController.Brightness.Capabilities.Step;
videoDevController.Brightness.TryGetValue(out value);
slBrt.Value = value;
}
else
{
slBrt.IsEnabled = false;
}
if (videoDevController.Brightness.Capabilities.AutoModeSupported)
{
videoDevController.Brightness.TryGetAuto(out bAuto);
tsBrtAuto.IsOn = bAuto;
}
else
{
tsBrtAuto.IsOn = false;
tsBrtAuto.IsEnabled = false;
}
if (videoDevController.Contrast.Capabilities.Step != 0)
{
slCrt.Minimum = videoDevController.Contrast.Capabilities.Min;
slCrt.Maximum = videoDevController.Contrast.Capabilities.Max;
slCrt.StepFrequency = videoDevController.Contrast.Capabilities.Step;
videoDevController.Contrast.TryGetValue(out value);
slCrt.Value = value;
}
else
{
slCrt.IsEnabled = false;
}
// . . .
// . . .
// . . .
Le MFT du pilote de la caméra est présenté dans l’exemple MFT du pilote. Pour plus d’informations sur les MFT de pilote de caméra, veuillez consulter la rubrique Création d’un MFT de pilote de caméra.
Étape 5 : Appliquer les changements
Lorsque des modifications sont apportées aux contrôles sur la fenêtre contextuelle, l’événement Changed du contrôle correspondant est utilisé pour appliquer les modifications au contrôleur du périphérique vidéo (objet videoDevController) et au MFT du pilote de la caméra (objet lcWrapper).
Cet exemple montre les méthodes Changed qui appliquent les modifications au contrôleur du périphérique vidéo et au MFT du pilote de la caméra, telles qu’elles apparaissent dans le fichier DeviceAppPage.xaml.cs.
protected void OnBrtAutoToggleChanged(object sender, RoutedEventArgs e)
{
videoDevController.Brightness.TrySetAuto(tsBrtAuto.IsOn);
slBrt.IsEnabled = !tsBrtAuto.IsOn;
}
protected void OnBrtSliderValueChanged(object sender, RoutedEventArgs e)
{
videoDevController.Brightness.TrySetValue(slBrt.Value);
}
protected void OnCrtAutoToggleChanged(object sender, RoutedEventArgs e)
{
videoDevController.Contrast.TrySetAuto(tsCrtAuto.IsOn);
slCrt.IsEnabled = !tsCrtAuto.IsOn;
}
protected void OnCrtSliderValueChanged(object sender, RoutedEventArgs e)
{
videoDevController.Contrast.TrySetValue(slCrt.Value);
}
protected void OnFocusAutoToggleChanged(object sender, RoutedEventArgs e)
{
videoDevController.Focus.TrySetAuto(tsFocusAuto.IsOn);
slFocus.IsEnabled = !tsFocusAuto.IsOn;
}
protected void OnFocusSliderValueChanged(object sender, RoutedEventArgs e)
{
videoDevController.Focus.TrySetValue(slFocus.Value);
}
protected void OnExpAutoToggleChanged(object sender, RoutedEventArgs e)
{
videoDevController.Exposure.TrySetAuto(tsExpAuto.IsOn);
slExp.IsEnabled = !tsExpAuto.IsOn;
}
protected void OnExpSliderValueChanged(object sender, RoutedEventArgs e)
{
videoDevController.Exposure.TrySetValue(slExp.Value);
}
protected void OnEffectEnabledToggleChanged(object sender, RoutedEventArgs e)
{
if (tsEffectEnabled.IsOn)
{
lcWrapper.Enable();
}
else
{
lcWrapper.Disable();
}
slEffect.IsEnabled = tsEffectEnabled.IsOn;
}
protected void OnEffectSliderValueChanged(object sender, RoutedEventArgs e)
{
lcWrapper.UpdateDsp(Convert.ToInt32(slEffect.Value));
}
Tester votre application
Cette section décrit comment installer une application UWP pour périphérique qui fournit une fenêtre contextuelle personnalisée pour Plus d’options d’une caméra, comme le montre l’exemple Application de périphérique UWP pour caméra.
Avant de pouvoir tester votre application UWP pour périphérique, elle doit être liée à votre caméra en utilisant les métadonnées du périphérique.
- Vous avez besoin d’une copie du package de métadonnées de périphérique pour votre imprimante, pour y ajouter les informations de l’application de périphérique. Si vous n’avez pas de métadonnées de périphérique, vous pouvez les construire en utilisant l’Assistant de création de métadonnées de périphérique comme décrit dans le sujet Créer des métadonnées de périphérique pour votre application UWP pour périphérique.
Remarque
Pour utiliser l’Assistant de création de métadonnées de périphérique, vous devez installer Microsoft Visual Studio Professional, Microsoft Visual Studio Ultimate, ou le SDK autonome pour Windows 8.1, avant de compléter la procédure de cette rubrique. L’installation de Microsoft Visual Studio Express pour Windows installe une version du SDK qui n’inclut pas l’assistant.
Les étapes suivantes construisent votre application et installent les métadonnées de périphérique.
Activez la signature de test.
Lancez l’Assistant de création de métadonnées de périphérique depuis %ProgramFiles(x86)%\Windows Kits\8.1\bin\x86, en double-cliquant sur DeviceMetadataWizard.exe
Depuis le menu Outils, sélectionnez Activer la signature de test.
Redémarrez l’ordinateur
Construisez la solution en ouvrant le fichier de solution (.sln). Appuyez sur F7 ou allez dans Construire->Construire la solution depuis le menu supérieur après que l’exemple ait été chargé.
Déconnectez et désinstallez l’imprimante. Cette étape est nécessaire pour que Windows lise les métadonnées de périphérique mises à jour la prochaine fois que le périphérique est détecté.
Éditez et sauvegardez les métadonnées de périphérique. Pour lier l’application de périphérique à votre périphérique, vous devez associer l’application de périphérique à votre périphérique.
Remarque
Si vous n’avez pas encore créé vos métadonnées de périphérique, consultez Créer des métadonnées de périphérique pour votre application UWP pour périphérique.
Si l’Assistant de création de métadonnées de périphérique n’est pas encore ouvert, lancez-le depuis %ProgramFiles(x86)%\Windows Kits\8.1\bin\x86, en double-cliquant sur DeviceMetadataWizard.exe.
Cliquez sur Éditer les métadonnées de périphérique. Cela vous permettra d’éditer votre package de métadonnées de périphérique existant.
Dans la boîte de dialogue Ouvrir, localisez le package de métadonnées de périphérique associé à votre application UWP pour périphérique. (Il a une extension de fichier devicemetadata-ms).
Sur la page Spécifier les informations de l’application UWP pour périphérique, saisissez les informations de l’application Microsoft Store dans la boîte Application UWP pour périphérique. Cliquez sur Importer le fichier manifeste de l’application UWP pour entrer automatiquement le Nom du package, le Nom de l’éditeur, et l’ID de l’application UWP.
Lorsque vous avez terminé, cliquez sur Suivant jusqu’à ce que vous arriviez à la page Terminer.
Sur la page Revoir le package de métadonnées de périphérique, assurez-vous que tous les paramètres sont corrects et sélectionnez la case à cocher Copier le package de métadonnées de périphérique dans le magasin de métadonnées sur l’ordinateur local. Ensuite, cliquez sur Enregistrer.
Reconnectez votre périphérique pour que Windows lise les métadonnées du périphérique mises à jour lorsque le périphérique est connecté.
Si vous avez une caméra externe, connectez simplement la caméra.
Si vous avez une caméra interne, actualisez le PC dans le dossier Périphériques et Imprimantes. Utilisez le Gestionnaire de périphériques pour rechercher les modifications matérielles. Windows devrait lire les métadonnées mises à jour lorsque le périphérique est détecté.
Remarque
Pour des informations sur l’installation d’un MFT de pilote de caméra, consultez la section Test dans Création d’un MFT de pilote de caméra.
Test des exemples
Pour tester l’expérience des options de caméra, commencez par télécharger ces exemples :
Ensuite, suivez les instructions de test des exemples fournies sur la page de l’exemple de MFT de pilote.