Anpassen von Kameraoptionen mit einer UWP-Geräte-App

In Windows 8.1 können UWP-Geräte-Apps von Geräteherstellern das Flyout anpassen, das weitere Kameraoptionen in einigen Kamera-Apps anzeigt. 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. Weitere Informationen zu UWP-Geräte-Apps im Allgemeinen finden Sie unter "Treffen von UWP-Geräte-Apps".

Die C#-Version der UWP-Geräte-App für Kamerabeispiel verwendet die DeviceAppPage.xaml-Seite , um die Benutzeroberfläche eines benutzerdefinierten Flyouts für weitere Kameraoptionen zu veranschaulichen. Im Beispiel werden auch Kameraeffekte mit einem Kameratreiber MFT (Media Foundation Transform) angewendet. Weitere Informationen hierzu finden Sie unter Erstellen eines Kameratreibers MFT.

Weitere Optionen für Kameras

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. Es ist nicht vollbildig, sondern wird in einem Flyout angezeigt, bei dem es sich um ein Steuerelement zum Anzeigen einer einfachen kontextbezogenen Benutzeroberfläche handelt, die geschlossen wird, wenn ein Benutzer darauf klickt oder darauf tippt.

Diese Oberfläche kann verwendet werden, um differenzierte Features für Ihre Kamera hervorzuheben, z. B. die Möglichkeit, benutzerdefinierte Videoeffekte anzuwenden.

Wenn eine UWP-Geräte-App für eine Kamera nicht installiert ist, bietet Windows eine standardmäßige Mehr-Kameraoptionen-Erfahrung. Wenn Windows erkennt, dass eine UWP-Geräte-App für Ihre Kamera installiert ist und die App sich für die windows.cameraSettings Erweiterung entschieden hat, ersetzt Ihre App die von Windows bereitgestellte Standardoberfläche.

So rufen Sie das Flyout für weitere Kameraoptionen auf:

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

Diese Abbildung zeigt das Standard-Flyout für weitere Kameraoptionen neben einem Beispiel für ein benutzerdefiniertes Flyout.

Prerequisites

Bevor Sie beginnen:

1. Richten Sie Ihren Entwicklungs-PC ein. See Getting started for info about downloading the tools and creating a developer account.

2. Ordnen Sie Ihre App dem Store zu. Informationen hierzu finden Sie unter Erstellen einer UWP-Geräte-App .

3. Erstellen Sie Gerätemetadaten für Ihren Drucker, der sie Ihrer App zuordnet. Weitere Informationen hierzu finden Sie unter Erstellen von Gerätemetadaten .

4. Erstellen Sie die Benutzeroberfläche für die Hauptseite Ihrer App. Alle UWP-Geräte-Apps können von "Start" gestartet werden, wo sie im Vollbildmodus angezeigt werden. Verwenden Sie die Startoberfläche, um Ihr Produkt oder Ihre Dienste auf eine Weise hervorzuheben, die den spezifischen Branding- und Features Ihrer Geräte entspricht. Es gibt keine besonderen Einschränkungen für den Typ der UI-Steuerelemente, die sie verwenden können. Informationen zu den ersten Schritten mit dem Design der Vollbildoberfläche finden Sie in den Microsoft Store-Designprinzipien.

Schritt 1: Registrieren der Erweiterung

Damit Windows erkennen kann, dass die App ein benutzerdefiniertes Flyout für weitere Kameraoptionen bereitstellen kann, muss sie die Erweiterung der Kameraeinstellungen registrieren. Diese Erweiterung wird in einem Extension Element deklariert, wobei ein Category Attribut auf einen Wert von windows.cameraSettingsfestgelegt ist. In den C#- und C++-Beispielen wird das Executable Attribut festgelegt DeviceAppForWebcam.exe , und das EntryPoint Attribut wird auf DeviceAppForWebcam.App.

You can add the camera settings extension on the Declarations tab of the Manifest Designer in Microsoft Visual Studio. Sie können das XML-Manifest des App-Paketmanifests auch manuell bearbeiten, indem Sie den XML-Editor (Text) verwenden. 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>

Schritt 2: Erstellen der Benutzeroberfläche

Bevor Sie Ihre App erstellen, sollten Sie mit Ihren Designern und Ihrem Marketingteam zusammenarbeiten, um die Benutzererfahrung zu entwerfen. Die Benutzeroberfläche sollte die Brandingaspekte Ihres Unternehmens projizieren und Ihnen dabei helfen, eine Verbindung mit Ihren Benutzern herzustellen.

Design guidelines

Es ist wichtig, die Richtlinien für das UWP-App-Flyout zu überprüfen, bevor Sie Ihr benutzerdefiniertes Flyout entwerfen. Die Richtlinien tragen dazu bei, dass Ihr Flyout eine intuitive Benutzeroberfläche bietet, die mit anderen UWP-Apps konsistent ist.

Beachten Sie für die Hauptseite Ihrer App, dass Windows 8.1 mehrere Apps in verschiedenen Größen auf einem einzigen Monitor anzeigen kann. Weitere Informationen dazu, wie Ihre App zwischen Bildschirmgrößen, Fenstergrößen und Ausrichtungen ordnungsgemäß umbrechen kann, finden Sie in den folgenden Richtlinien.

• Richtlinien für Fenstergrößen und Skalierung auf Bildschirme

• Richtlinien zum Ändern der Fenstergröße in hohe und schmale Layouts

Flyout dimensions

Das Flyout, das weitere Kameraoptionen anzeigt, beträgt 625 Pixel hoch und 340 Pixel breit. 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. Ein benutzerdefiniertes Flyout sollte 340 Pixel breite nicht überschreiten.

Suggested effects

• Color effects. Beispielsweise Graustufen, Sepiaton oder Solarisieren des gesamten Bilds.

• Face-tracking effects. Wenn ein Gesicht im Bild identifiziert wird und eine Überlagerung, z. B. eine Brille oder ein Paar Brille, darüber hinzugefügt wird.

• Scene modes. Hierbei handelt es sich um voreingestellte Belichtungs- und Fokusmodi für unterschiedliche Beleuchtungsbedingungen.

Suggested settings

• Das benutzerdefinierte Flyout Ihrer UWP-Geräte-App kann einen Schalter bereitstellen, um Hardware implementierte Einstellungen zu aktivieren, z. B. vom Hersteller bereitgestellte Farbkorrekturschemas.

• Implementieren Sie grundlegende Eigenschaften, die die anderen Einstellungen ergänzen, die von Ihrer UWP-Geräte-App verfügbar gemacht werden. Beispielsweise können viele Geräte Steuerelemente zum Anpassen von Helligkeit, Kontrast, Flackern, Fokus und Belichtung verfügbar machen, aber ein Gerät, das TrueColor implementiert, um die Helligkeit und den Kontrast automatisch anzupassen, muss diese Einstellungen möglicherweise nicht angeben.

Restrictions

• Öffnen Sie das benutzerdefinierte Flyout Ihrer UWP-Geräte-App nicht über die Haupt-App (durch Aufrufen der CameraOptionsUI.Show Methode), wenn die App nicht gestreamt oder erfasst wird.

• Stellen Sie keine Vorschau bereit oder übernehmen Sie anderweitig den Besitz des Videostreams aus dem benutzerdefinierten Flyout Ihrer UWP-Geräte-App. Das benutzerdefinierte Flyout soll als Begleitfunktion für eine andere App dienen, die Videos erfasst. Die Aufnahme-App besitzt den Besitz des Videostreams. Sie sollten nicht versuchen, mithilfe von APIs auf niedriger Ebene auf den Videodatenstrom zuzugreifen. Dies kann zu unerwartetem Verhalten führen, bei dem die Aufnahme-App den Zugriff auf den Datenstrom verliert.

• Passen Sie die Auflösung im benutzerdefinierten Flyout nicht an.

• Versuchen Sie nicht, Popups, Benachrichtigungen oder Dialogfelder außerhalb des Für das benutzerdefinierten Flyout vorgesehenen Bereichs anzuzeigen. Diese Arten von Dialogfeldern sind nicht zulässig.

• Initiieren Sie keine Audio- oder Videoaufnahme innerhalb des benutzerdefinierten Flyouts. Das benutzerdefinierte Flyout soll eine andere App erweitern, die Videoaufnahmen erfasst, anstatt die Aufnahme selbst zu initiieren. Darüber hinaus kann das Aufzeichnen von Audio oder Video ein Systemdialogfeld auslösen, und Popupdialoge sind innerhalb des benutzerdefinierten Flyouts nicht zulässig.

Schritt 3: Durchführen der Aktivierung

Wenn Ihre App die Erweiterung der Kameraeinstellungen deklariert hat, muss sie eine OnActivated Methode zum Behandeln des App-Aktivierungsereignisses implementieren. This event is triggered when a UWP app, using the CameraCaptureUI class, calls the CameraOptionsUI.Show method. Die App-Aktivierung erfolgt, wenn Ihre App auswählen kann, welche Seite beim Starten der App gestartet wird. Für Apps, die die Erweiterung der Kameraeinstellungen deklariert haben, übergibt Windows das Videogerät in den Argumenten "Activated": "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();
    }
}

Schritt 4: Steuern von Einstellungen und Effekten

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. Diese Argumente machen Eigenschaften zum Steuern der Kamera verfügbar:

• The args.VideoDeviceController property provides an object of type Windows.Media.Devices.VideoDeviceController. Dieses Objekt stellt Methoden zum Anpassen von Standardeinstellungen bereit.

• The args.VideoDeviceExtension property is a pointer to the camera driver MFT. Diese Eigenschaft ist null, wenn keine Treiber-MFT-Schnittstellen verfügbar gemacht werden. Weitere Informationen zu MFTs für Kameratreiber finden Sie unter Erstellen eines Kameratreibers MFT.

This example shows a portion of the Initialize method, as it appears in the DeviceAppPage.xaml.cs file. Hier werden der Videogerätecontroller (videoDevController-Objekt) und der Kameratreiber MFT (lcWrapper-Objekt) erstellt, und das Flyout wird mit den aktuellen Kameraeinstellungen gefüllt.

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. Weitere Informationen zu MFTs für Kameratreiber finden Sie unter Erstellen eines Kameratreibers MFT.

Schritt 5: Anwenden von Änderungen

Wenn Änderungen an den Steuerelementen im Flyout vorgenommen werden, wird das Changed-Ereignis des entsprechenden Steuerelements verwendet, um die Änderungen auf den Videogerätecontroller (videoDevController-Objekt) und den Kameratreiber MFT (lcWrapper-Objekt) anzuwenden.

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));
}

Testen Ihrer App

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.

Bevor Sie Ihre UWP-Geräte-App testen können, muss sie mithilfe von Gerätemetadaten mit Ihrer Kamera verknüpft werden.

• Sie benötigen eine Kopie des Gerätemetadatenpakets für Ihren Drucker, um die Geräte-App-Informationen hinzuzufügen. Wenn Sie nicht über Gerätemetadaten verfügen, können Sie sie mit dem Assistenten für die Erstellung von Gerätemetadaten erstellen, wie im Thema "Erstellen von Gerätemetadaten für Ihre UWP-Geräte-App" beschrieben.

Die folgenden Schritte erstellen Ihre App und installieren die Gerätemetadaten.

1. Aktivieren Sie die Testsignatur.

   1. Starten Sie den Assistenten für die Erstellung von Gerätemetadaten aus %ProgramFiles(x86)%\Windows Kits\8.1\bin\x86, indem Sie auf DeviceMetadataWizard.exe doppelklicken.

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

2. Neustarten des Computers

3. Erstellen Sie die Lösung, indem Sie die Lösungsdatei (.sln) öffnen. Drücken Sie F7 oder gehen Sie im oberen Menü zu Build->Build Solution, nachdem das Beispiel geladen wurde.

4. Trennen Sie den Drucker und deinstallieren Sie ihn. Dieser Schritt ist erforderlich, damit Windows die aktualisierten Gerätemetadaten beim nächsten Erkennen des Geräts liest.

5. Bearbeiten und Speichern von Gerätemetadaten Um die Geräte-App mit Ihrem Gerät zu verknüpfen, müssen Sie die Geräte-App Ihrem Gerät zuordnen.

   Note

   Wenn Sie Ihre Gerätemetadaten noch nicht erstellt haben, lesen Sie " Erstellen von Gerätemetadaten für Ihre UWP-Geräte-App".

   1. Wenn der Assistent für die Erstellung von Gerätemetadaten noch nicht geöffnet ist, starten Sie ihn von %ProgramFiles(x86)%\Windows Kits\8.1\bin\x86, indem Sie auf DeviceMetadataWizard.exedoppelklicken.

   2. Klicken Sie auf "Gerätemetadaten bearbeiten". Dadurch können Sie Ihr vorhandenes Gerätemetadatenpaket bearbeiten.

   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. Geben Sie auf der Seite " Informationen zur UWP-Geräte-App angeben " die Informationen zur Microsoft Store-App in das Feld "UWP-Geräte-App " ein. Klicken Sie auf "UWP-App-Manifestdatei importieren", um automatisch den Paketnamen, den Herausgebernamen und die UWP-App-ID einzugeben.

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

   6. Vergewissern Sie sich auf der Seite " Überprüfen des Gerätemetadatenpakets ", dass alle Einstellungen korrekt sind, und aktivieren Sie das Kontrollkästchen "Gerätemetadatenpaket in den Metadatenspeicher auf dem lokalen Computer kopieren ". Then click Save.

6. Verbinden Sie Ihr Gerät erneut, damit Windows die aktualisierten Gerätemetadaten liest, wenn das Gerät verbunden ist.

   • Wenn Sie über eine externe Kamera verfügen, schließen Sie einfach die Kamera an.

   • Wenn Sie über eine interne Kamera verfügen, aktualisieren Sie den PC im Ordner "Geräte und Drucker". Verwenden Sie den Geräte-Manager, um nach Hardwareänderungen zu suchen. Windows sollte die aktualisierten Metadaten lesen, wenn das Gerät erkannt wird.

Testen der Beispiele

Um die Kameraoptionen zu testen, laden Sie zuerst die folgenden Beispiele herunter:

• UWP-Geräte-App für Kamerabeispiel
• Beispiel für kameraaufnahme-UI
• MFT-Beispiel für Treiber

Folgen Sie dann den Beispieltestanweisungen auf der Beispielseite "Driver MFT" .