Comment personnaliser les options de caméra avec une application d’appareil UWP

Dans Windows 8.1, les applications d’appareil UWP permettent aux fabricants d’appareils de personnaliser le menu volant qui affiche davantage d’options de caméra dans certaines applications de caméra. This topic introduces the More options flyout that's displayed by the CameraCaptureUI API, and shows how the C# version of the UWP device app for camera sample replaces the default flyout with a custom flyout. Pour en savoir plus sur les applications d’appareil UWP en général, consultez Meet UWP device apps.

La version C# de l’application d’appareil UWP pour l’exemple d’appareil photo utilise la page DeviceAppPage.xaml pour illustrer l’interface utilisateur d’un menu volant personnalisé pour plus d’options d’appareil photo. L’exemple applique également des effets de caméra à l’aide d’un pilote de caméra MFT (transformation de base multimédia). Pour plus d’informations sur cela, consultez Création d’un pilote de caméra MFT.

Autres options pour les caméras

The more camera options experience is the functionality that a UWP device app provides when another app, a UWP app, captures or previews video from the camera by using the CameraCaptureUI API. It is accessible through the More options link in the Camera options window. Il n’est pas plein écran, mais s’affiche dans un menu volant, qui est un contrôle pour afficher une interface utilisateur légère et contextuelle qui est ignorée lorsqu’un utilisateur clique ou appuie en dehors de celui-ci.

Cette expérience peut être utilisée pour mettre en évidence des fonctionnalités différenciées pour votre caméra, telles que la possibilité d’appliquer des effets vidéo personnalisés.

Lorsqu’une application d’appareil UWP n’est pas installée pour une caméra, Windows offre une expérience par défaut plus d’options d’appareil photo. Si Windows détecte qu’une application d’appareil UWP est installée pour votre appareil photo et que l’application a choisi l’extension windows.cameraSettings , votre application remplace l’expérience par défaut fournie par Windows.

Pour appeler le menu volant pour obtenir d’autres options de caméra :

1. Open a UWP app that uses the CameraCaptureUI API (the CameraCaptureUI sample, for example)

2. Tap the Options button in the UI

3. This opens a Camera options flyout that shows basic options for setting resolution and video stabilization

4. On the Camera options flyout, tap More options

5. The More options flyout opens

   • The default flyout appears when no UWP device app for the camera is installed

   • A custom flyout appears when a UWP device app for the camera is installed

Cette image montre le menu volant par défaut pour plus d’options d’appareil photo en regard d’un exemple de menu volant personnalisé.

Prerequisites

Avant de commencer :

1. Configurez votre PC de développement. See Getting started for info about downloading the tools and creating a developer account.

2. Associez votre application au Windows Store. Pour plus d’informations sur cela, consultez Créer une application d’appareil UWP .

3. Créez des métadonnées d’appareil pour votre imprimante qui l’associe à votre application. Pour en savoir plus, consultez Créer des métadonnées d’appareil .

4. Générez l’interface utilisateur pour la page principale de votre application. Toutes les applications d’appareil UWP peuvent être lancées à partir de l’écran de démarrage, où elles s’affichent en plein écran. Utilisez l’expérience de démarrage pour mettre en évidence vos produits ou services d’une manière qui correspond à la personnalisation et aux fonctionnalités spécifiques de vos appareils. Il n’existe aucune restriction spéciale sur le type de contrôles d’interface utilisateur qu’il peut utiliser. Pour commencer à concevoir l’expérience en plein écran, consultez les principes de conception du Microsoft Store.

Étape 1 : Inscrire l’extension

Pour que Windows reconnaisse que l’application peut fournir un menu volant personnalisé pour plus d’options d’appareil photo, il doit inscrire l’extension des paramètres de l’appareil photo. Cette extension est déclarée dans un Extension élément, avec un Category attribut défini sur une valeur de windows.cameraSettings. Dans les exemples C# et C++, l’attribut Executable est défini DeviceAppForWebcam.exe et l’attribut EntryPoint est défini DeviceAppForWebcam.Appsur .

You can add the camera settings extension on the Declarations tab of the Manifest Designer in Microsoft Visual Studio. Vous pouvez également modifier manuellement le xml du manifeste du package d’application à l’aide de l’éditeur XML (texte). Right-click the Package.appxmanifest file in Solution Explorer for editing options.

This example shows the camera settings extension in the Extension element, as it appears in the app package manifest file, 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 : Générer l’interface utilisateur

Avant de créer votre application, vous devez travailler avec vos concepteurs et votre équipe marketing pour concevoir l’expérience utilisateur. L’expérience utilisateur doit projeter les aspects de personnalisation de votre entreprise et vous aider à créer une connexion avec vos utilisateurs.

Design guidelines

Il est important de passer en revue les instructions de menu volant de l’application UWP avant de concevoir votre menu volant personnalisé. Les instructions permettent de s’assurer que votre menu volant offre une expérience intuitive 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 de différentes tailles sur un seul moniteur. Consultez les instructions suivantes pour en savoir plus sur la façon dont votre application peut reflower correctement entre les tailles d’écran, les tailles de fenêtre et les orientations.

• Recommandations en matière de tailles de fenêtre et de mise à l’échelle vers les écrans

• Recommandations en matière de redimensionnement des fenêtres sur des dispositions hautes et étroites

Flyout dimensions

Le menu volant qui affiche plus d’options d’appareil photo est de 625 pixels haut et de 340 pixels de large. The area containing the More options text at the top is provided by Windows and is approximately 65 pixels high, leaving 560 pixels for the viewable area of the custom flyout. Un menu volant personnalisé ne doit pas dépasser 340 pixels de largeur.

Suggested effects

• Color effects. Par exemple, les nuances de gris, le ton sépia ou la solaireisation de l’image entière.

• Face-tracking effects. Lorsqu’un visage est identifié dans l’image et une superposition, comme un chapeau ou une paire de lunettes, est ajouté au-dessus de celui-ci.

• Scene modes. Il s’agit de modes d’exposition et de focus prédéfinis pour différentes conditions d’éclairage.

Suggested settings

• Le menu volant personnalisé de votre application d’appareil UWP peut fournir un commutateur pour activer les paramètres implémentés par le matériel, tels que les schémas de correction de 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 d’appareil UWP. Par exemple, de nombreux appareils peuvent exposer des contrôles pour ajuster la luminosité, le contraste, le scintillement, le focus et l’exposition, mais un appareil 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 le menu volant personnalisé de votre application d’appareil UWP à partir de votre application principale (en appelant la CameraOptionsUI.Show méthode) lorsque l’application n’est pas diffusée en continu ou capturée.

• Ne fournissez pas d’aperçu ou ne prenez pas possession du flux vidéo à partir du menu volant personnalisé de votre application d’appareil UWP. Le menu volant personnalisé est destiné à fonctionner comme un compagnon d’une autre application qui capture la vidéo. L’application de capture possède la propriété du flux vidéo. Vous ne devez pas essayer d’accéder au flux vidéo à l’aide d’API de bas niveau. Cela peut entraîner un comportement inattendu, dans lequel l’application de capture perd l’accès au flux.

• N’ajustez pas la résolution dans le menu volant personnalisé.

• N’essayez pas d’afficher des fenêtres contextuelles, des notifications ou des dialogues en dehors de la zone destinée au menu volant personnalisé. Ces types de dialogues ne sont pas autorisés.

• Ne lancez pas la capture audio ou vidéo à l’intérieur du menu volant personnalisé. Le menu volant personnalisé est destiné à étendre une autre application qui capture la vidéo, plutôt que de lancer la capture elle-même. En outre, la capture audio ou vidéo peut déclencher une boîte de dialogue système et les boîtes de dialogue contextuelles ne sont pas autorisées à l’intérieur du menu volant personnalisé.

Étape 3 : Gérer l’activation

Si votre application a déclaré l’extension des paramètres de l’appareil photo, elle doit implémenter une OnActivated méthode pour gérer l’événement d’activation de l’application. This event is triggered when a UWP app, using the CameraCaptureUI class, calls the CameraOptionsUI.Show method. L’activation de l’application est lorsque votre application peut choisir la page qui démarre à mesure que l’application démarre. Pour les applications qui ont déclaré l’extension des paramètres de la caméra, Windows transmet l’appareil vidéo dans les arguments d’événement activés : Windows.ApplicationModel.Activation.IActivatedEventArgs.

A UWP device app can determine that the activation is intended for camera settings (that someone just tapped More options on the Camera options dialog) when the event argument's kind property is equal to Windows.ApplicationModel.Activation.ActivationKind.CameraSettings.

This example shows the activation event handler in the OnActivated method, as it appears in the App.xaml.cs file. The event arguments are then cast as Windows.ApplicationModel.Activation.CameraSettingsActivatedEventArgs and sent to the Initialize method of the custom flyout (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

When the Initialize method of the custom flyout (DeviceAppPage.xaml.cs) is called, the video device is passed to the flyout through the event arguments. Ces arguments exposent des propriétés pour contrôler la caméra :

• The args.VideoDeviceController property provides an object of type Windows.Media.Devices.VideoDeviceController. Cet objet fournit des méthodes pour ajuster les paramètres standard.

• The args.VideoDeviceExtension property is a pointer to the camera driver MFT. Cette propriété est null si aucune interface Driver MFT n’est exposée. Pour plus d’informations sur les mfTs du pilote de caméra, consultez Création d’un pilote de caméra MFT.

This example shows a portion of the Initialize method, as it appears in the DeviceAppPage.xaml.cs file. Ici, le contrôleur de périphérique vidéo (objet videoDevController) et le pilote de caméra MFT (objet lcWrapper) sont créés et le menu volant est rempli avec les paramètres actuels de la caméra.

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;
    }
    // . . .
    // . . .
    // . . .

The camera driver MFT is demonstrated in the Driver MFT sample. Pour plus d’informations sur les mfTs du pilote de caméra, consultez Création d’un pilote de caméra MFT.

Étape 5 : Appliquer les modifications

Lorsque des modifications sont apportées aux contrôles du menu volant, l’événement Changed du contrôle correspondant est utilisé pour appliquer les modifications au contrôleur de périphérique vidéo (objet videoDevController) et à l’objet MFT du pilote de caméra (lcWrapper).

This example shows the Changed methods that apply changes to the video device controller and the camera driver MFT, as they appear in the DeviceAppPage.xaml.cs file.

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

This section describes how to install a UWP device app that provides a custom flyout for More options of a camera, as demonstrated in the UWP device app for camera sample.

Avant de pouvoir tester votre application d’appareil UWP, elle doit être liée à votre appareil photo à l’aide des métadonnées de l’appareil.

• Vous avez besoin d’une copie du package de métadonnées d’appareil pour votre imprimante pour y ajouter les informations de l’application d’appareil. Si vous n’avez pas de métadonnées d’appareil, vous pouvez le générer à l’aide de l’Assistant Création de métadonnées d’appareil, comme décrit dans la rubrique Créer des métadonnées d’appareil pour votre application d’appareil UWP.

Les étapes suivantes créent votre application et installent les métadonnées de l’appareil.

1. Activez la signature de test.

   1. Démarrez l’Assistant Création de métadonnées d’appareil à partir de %ProgramFiles(x86)%\Windows Kits\8.1\bin\x86, en double-cliquant sur DeviceMetadataWizard.exe

   2. From the Tools menu, select Enable Test Signing.

2. Redémarrer l’ordinateur

3. Générez la solution en ouvrant le fichier de solution (.sln). Appuyez sur F7 ou accédez à Build-Build> Solution à partir du menu supérieur une fois l’exemple chargé.

4. Déconnectez et désinstallez l’imprimante. Cette étape est requise pour que Windows lise les métadonnées de l’appareil mises à jour la prochaine fois que l’appareil est détecté.

5. Modifiez et enregistrez les métadonnées de l’appareil. Pour lier l’application d’appareil à votre appareil, vous devez associer l’application d’appareil à votre appareil.

   Note

   Si vous n’avez pas encore créé vos métadonnées d’appareil, consultez Créer des métadonnées d’appareil pour votre application d’appareil UWP.

   1. Si l’Assistant Création de métadonnées d’appareil n’est pas encore ouvert, démarrez-le à partir de %ProgramFiles(x86)%\Windows Kits\8.1\bin\x86, en double-cliquant sur DeviceMetadataWizard.exe.

   2. Cliquez sur Modifier les métadonnées de l’appareil. Cela vous permet de modifier votre package de métadonnées d’appareil existant.

   3. In the Open dialog box, locate the device metadata package associated with your UWP device app. (It has a devicemetadata-ms file extension.)

   4. Dans la page Spécifier les informations de l’application d’appareil UWP , entrez les informations d’application du Microsoft Store dans la zone d’application d’appareil UWP . Cliquez sur Importer le fichier manifeste de l’application UWP pour entrer automatiquement le nom du package, le nom du serveur de publication et l’ID d’application UWP.

   5. When you're done, click Next until you get to the Finish page.

   6. Dans la page Vérifier le package de métadonnées de l’appareil , vérifiez que tous les paramètres sont corrects et activez la case à cocher Copier le package de métadonnées de l’appareil dans le magasin de métadonnées sur l’ordinateur local . Then click Save.

6. Reconnectez votre appareil afin que Windows lit les métadonnées de l’appareil mises à jour lorsque l’appareil est connecté.

   • Si vous avez une caméra externe, connectez simplement la caméra.

   • Si vous disposez d’une caméra interne, actualisez le PC dans le dossier Appareils et imprimantes. Utilisez Device Manager pour rechercher les modifications matérielles. Windows doit lire les métadonnées mises à jour lorsque l’appareil est détecté.

Test des exemples

Pour tester l’expérience des options de caméra, commencez par télécharger ces exemples :

• Application d’appareil UWP pour l’exemple de caméra
• Exemple d’interface utilisateur de capture d’appareil photo
• Exemple MFT du pilote

Ensuite, suivez les exemples d’instructions de test fournis sur la page d’exemple Driver MFT .