Dela via

Anpassa kameraalternativ med en UWP-enhetsapp

Important

Enhetsmetadata är inaktuella och tas bort i en framtida version av Windows. Information om hur du ersätter den här funktionen finns i Containermetadata för drivrutinspaket.

I Windows 8.1 låter UWP-enhetsappar enhetstillverkare anpassa den utfällbara menyn som visar fler kameraalternativ i vissa kameraappar. 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. Mer information om UWP-enhetsappar i allmänhet finns i Meet UWP device apps.

Note

In Windows 8.1, the built-in camera app does not display a More options button and therefore can't display a UWP device app to show more camera options. However, the CameraCaptureUI class, that's available to all UWP apps, does have a More options button and can display UWP device apps from it.

C#-versionen av UWP-enhetsappen för kameraexempel använder sidan DeviceAppPage.xaml för att demonstrera användargränssnittet för en anpassad utfällbara meny för fler kameraalternativ. Exemplet tillämpar även kameraeffekter med hjälp av en kameradrivrutin MFT (media foundation transform). Mer information om detta finns i Skapa en kameradrivrutin MFT.

Note

Kodexemplen som visas i det här avsnittet baseras på C#-versionen av UWP-enhetsappen för kameraexempel . Det här exemplet är också tillgängligt i JavaScript och C++. Ladda ned exemplen för att se de senaste versionerna av koden.

Fler alternativ för kameror

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. Det är inte helskärmsläge, men visas i en utfälld skärm, vilket är en kontroll för att visa ett enkelt, kontextuellt användargränssnitt som stängs när en användare klickar eller trycker utanför det.

Den här upplevelsen kan användas för att markera olika funktioner för kameran, till exempel möjligheten att använda anpassade videoeffekter.

När en UWP-enhetsapp inte är installerad för en kamera ger Windows en standardupplevelse med fler kameraalternativ. Om Windows upptäcker att en UWP-enhetsapp windows.cameraSettings är installerad för kameran och att appen har valt tillägget ersätter appen standardupplevelsen som tillhandahålls av Windows.

Så här anropar du den utfällbara menyn för fler kameraalternativ:

  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

Sida vid sida-bilder av den utfällbara standardbilden för fler kameraalternativ och en anpassad utfällbara meny.

Den här bilden visar den utfällbara standardutfällningen för fler kameraalternativ bredvid ett exempel på en anpassad utfällbar meny.

Prerequisites

Innan du börjar:

  1. Konfigurera din utvecklingsdator. See Getting started for info about downloading the tools and creating a developer account.

  2. Associera din app med butiken. Mer information om det finns i Skapa en UWP-enhetsapp.

  3. Skapa enhetsmetadata för skrivaren som associerar den med din app. Mer information finns i Skapa enhetsmetadata.

  4. Skapa användargränssnittet för appens huvudsida. Alla UWP-enhetsappar kan startas från Start, där de visas i helskärmsläge. Använd Start-upplevelsen för att markera din produkt eller dina tjänster på ett sätt som matchar de specifika varumärkesanpassningarna och funktionerna på dina enheter. Det finns inga särskilda begränsningar för vilken typ av användargränssnittskontroller som kan användas. Information om hur du kommer igång med utformningen av helskärmsmiljön finns i Designprinciper för Microsoft Store.

Steg 1: Registrera tillägget

För att Windows ska kunna känna igen att appen kan tillhandahålla en anpassad utfällbara meny för fler kameraalternativ måste den registrera tillägget för kamerainställningar. Det här tillägget deklareras i ett Extension element med ett Category attribut inställt på värdet windows.cameraSettings. I C#- och C++-exemplen Executable är attributet inställt på DeviceAppForWebcam.exe och EntryPoint attributet är inställt på DeviceAppForWebcam.App.

You can add the camera settings extension on the Declarations tab of the Manifest Designer in Microsoft Visual Studio. Du kan också redigera XML-manifestet för apppaketet manuellt med hjälp av XML-redigeraren (text). 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>

Steg 2: Skapa användargränssnittet

Innan du skapar din app bör du samarbeta med dina designers och marknadsföringsteamet för att utforma användarupplevelsen. Användarupplevelsen bör projicera varumärkesaspekterna för ditt företag och hjälpa dig att skapa en anslutning med dina användare.

Design guidelines

Det är viktigt att granska riktlinjer för UWP-appars flyout-menyer innan du utformar din anpassade flyout-meny. Riktlinjerna hjälper till att säkerställa att flyouten ger en intuitiv upplevelse som är konsekvent med andra UWP-appar.

På huvudsidan i din app bör du tänka på att Windows 8.1 kan visa flera appar i olika storlekar på en enda bildskärm. Se följande riktlinjer för att lära dig mer om hur din app kan flöda om korrekt mellan skärmstorlekar, fönsterstorlekar och orienteringar.

Flyout dimensions

Den utfällbara menyn som visar fler kameraalternativ är 625 bildpunkter hög och 340 bildpunkter bred. 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. En anpassad utfällbara meny får inte överstiga 340 bildpunkter i bredd.

utfällbara dimensioner för fler kameraalternativ.

Note

Om den anpassade utfällbara menyn är längre än 560 bildpunkter kan användaren dra eller rulla för att visa delar av den utfällbara menyn som ligger ovanför eller under det visningsbara området.

Suggested effects

  • Color effects. Till exempel gråskala, sepiaton eller solarisering av hela bilden.

  • Face-tracking effects. När ett ansikte identifieras på bilden och ett överlägg, till exempel en hatt eller ett par glasögon, läggs till ovanpå det.

  • Scene modes. Dessa är förinställda exponerings- och fokuslägen för olika ljusförhållanden.

Suggested settings

  • Din UWP-enhetsapps anpassade utfällbara meny kan ge en växel för att aktivera maskinvarutilldefiniska inställningar, till exempel färgkorrigeringsscheman som tillhandahålls av tillverkaren.

  • Implementera grundläggande egenskaper som kompletterar de andra inställningar som exponeras av UWP-enhetsappen. Många enheter kan till exempel exponera kontroller för att justera ljusstyrka, kontrast, flimmer, fokus och exponering, men en enhet som implementerar TrueColor för att automatiskt justera ljusstyrkan och kontrasten kanske inte behöver ange dessa inställningar.

Restrictions

  • Öppna inte UWP-enhetsappens anpassade utfällbara objekt från huvudappen CameraOptionsUI.Show (genom att anropa metoden) när appen inte strömmas eller fångas upp.

  • Ange ingen förhandsversion eller ta på annat sätt över ägarskapet för videoströmmen inifrån UWP-enhetsappens anpassade utfällbara meny. Den anpassade utfällbara menyn är avsedd att fungera som en följeslagare till en annan app som samlar in video. Inspelningsappen har ägarskap för videoströmmen. Du bör inte försöka komma åt videoströmmen med hjälp av API:er på låg nivå. Detta kan orsaka oväntat beteende, där avbildningsappen förlorar åtkomsten till dataströmmen.

  • Justera inte upplösningen i den anpassade utfällbara menyn.

  • Försök inte visa popup-fönster, meddelanden eller dialogrutor utanför det område som är avsett för den anpassade utfällbara menyn. Dessa typer av dialogrutor är inte tillåtna.

  • Initiera inte ljud- eller videoinspelning i den anpassade utfällbara menyn. Den anpassade utfällbara menyn är avsedd att utöka en annan app som samlar in video i stället för att initiera själva avbildningen. Dessutom kan inspelning av ljud eller video utlösa en systemdialogruta, och popup-dialogrutor tillåts inte i den anpassade utfällbara menyn.

Steg 3: Hantera aktivering

Om appen har deklarerat tillägget för kamerainställningar måste den implementera en OnActivated metod för att hantera appens aktiveringshändelse. This event is triggered when a UWP app, using the CameraCaptureUI class, calls the CameraOptionsUI.Show method. Appaktivering är när din app kan välja vilken sida som ska startas när appen startas. För appar som har deklarerat tillägget för kamerainställningar skickar Windows videoenheten i argumenten Aktiverad händelse: 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();
    }
}

Steg 4: Kontrollera inställningar och effekter

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. Dessa argument exponerar egenskaper för att styra kameran:

  • The args.VideoDeviceController property provides an object of type Windows.Media.Devices.VideoDeviceController. Det här objektet innehåller metoder för att justera standardinställningarna.

  • The args.VideoDeviceExtension property is a pointer to the camera driver MFT. Den här egenskapen är null om inga Driver MFT-gränssnitt exponeras. Mer information om MFT för kameradrivrutiner finns i Skapa en kameradrivrutin MFT.

This example shows a portion of the Initialize method, as it appears in the DeviceAppPage.xaml.cs file. Här skapas videoenhetsstyrenheten (videoDevController-objektet) och kameradrivrutinen MFT (lcWrapper-objekt) och den utfällbara menyn fylls med de aktuella kamerainställningarna.

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. Mer information om MFT för kameradrivrutiner finns i Skapa en kameradrivrutin MFT.

Steg 5: Tillämpa ändringar

När ändringar görs i kontrollerna i den utfällbara menyn används händelsen Ändrad för motsvarande kontroll för att tillämpa ändringarna på videoenhetsstyrenheten (videoDevController-objektet) och kameradrivrutinenS MFT (lcWrapper-objekt).

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

Testa din 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.

Innan du kan testa UWP-enhetsappen måste den länkas till kameran med enhetsmetadata.

  • Du behöver en kopia av enhetens metadatapaket för skrivaren för att lägga till information om enhetsappen i den. Om du inte har enhetsmetadata kan du skapa dem med hjälp av guiden Redigera enhetsmetadata enligt beskrivningen i avsnittet Skapa enhetsmetadata för UWP-enhetsappen.

Note

Om du vill använda guiden enhetsmetadataredigeringmåste du installera Microsoft Visual Studio Professional, Microsoft Visual Studio Ultimate eller fristående SDK för Windows 8.1innan du slutför stegen i det här avsnittet. När du installerar Microsoft Visual Studio Express för Windows installeras en version av SDK:t som inte innehåller guiden.

Följande steg skapar din app och installerar enhetens metadata.

  1. Aktivera testsignering.

    1. Starta redigeringsguiden för enhetsmetadata från %ProgramFiles(x86)%\Windows Kits\8.1\bin\x86 genom att dubbelklicka på DeviceMetadataWizard.exe

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

  2. Starta om datorn

  3. Skapa lösningen genom att öppna lösningsfilen (.sln). Tryck på F7 eller gå till Build->Build Solution från menyn högst upp när exemplet har laddats in.

  4. Koppla från och avinstallera skrivaren. Det här steget krävs så att Windows läser de uppdaterade enhetsmetadata nästa gång enheten identifieras.

  5. Redigera och spara enhetsmetadata. Om du vill länka enhetsappen till enheten måste du associera enhetsappen med din enhet.

    Note

    Om du inte har skapat enhetsmetadata ännu kan du läsa Skapa enhetsmetadata för UWP-enhetsappen.

    1. Om guiden För redigering av enhetsmetadata inte är öppen ännu startar du den från %ProgramFiles(x86)%\Windows Kits\8.1\bin\x86 genom att dubbelklicka på DeviceMetadataWizard.exe.

    2. Klicka på Redigera enhetsmetadata. På så sätt kan du redigera ditt befintliga enhetsmetadatapaket.

    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. På sidan Ange UWP-enhetsinformation anger du microsoft Store-appinformationen i rutan UWP-enhetsapp. Klicka på Importera UWP-appmanifestfilen för att automatiskt ange Paketnamn, Publisher-namnoch UWP-app-ID.

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

    6. På sidan Granska enhetens metadatapaket kontrollerar du att alla inställningar är korrekta och markerar kryssrutan Kopiera enhetens metadatapaket till metadatalagret på den lokala datorn. Then click Save.

  6. Återanslut enheten så att Windows läser de uppdaterade enhetsmetadata när enheten är ansluten.

    • Om du har en extern kamera ansluter du bara kameran.

    • Om du har en intern kamera uppdaterar du datorn i mappen Enheter och skrivare. Använd Enhetshanteraren för att söka efter maskinvaruändringar. Windows bör läsa de uppdaterade metadata när enheten identifieras.

Note

Information om hur du installerar en kameradrivrutin MFT finns i avsnittet Testning i Skapa en kameradrivrutin MFT.

Testa exemplen

Om du vill testa kameraalternativen laddar du först ned följande exempel:

Följ sedan exempeltestanvisningarna på exempelsidan för Driver MFT .

  • Last updated on