Cómo personalizar las opciones de cámara con una aplicación de dispositivo para UWP

En Windows 8.1, las aplicaciones UWP para dispositivos permiten a los fabricantes de dispositivos personalizar el menú desplegable que muestra más opciones de cámara en algunas aplicaciones de cámara. 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. Para obtener más información sobre las aplicaciones de dispositivos para UWP en general, consulta Meet UWP device apps (Conocer aplicaciones de dispositivos para UWP).

La versión de C# de la aplicación de dispositivo para UWP para el ejemplo de cámara usa la página DeviceAppPage.xaml para mostrar la interfaz de usuario de un control flotante personalizado para obtener más opciones de cámara. El ejemplo también aplica efectos de cámara mediante un controlador de cámara MFT (transformación de base multimedia). Para obtener más información sobre esto, consulta Creación de un controlador de cámara MFT.

Más opciones para cámaras

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. No es de pantalla completa, pero se muestra dentro de un control flotante, que es un control para mostrar una interfaz de usuario contextual ligera que se descarta cuando un usuario hace clic o pulsa fuera de él.

Esta experiencia se puede usar para resaltar características diferenciadas para la cámara, como la capacidad de aplicar efectos de vídeo personalizados.

Cuando una aplicación de dispositivo para UWP no está instalada para una cámara, Windows proporciona una experiencia predeterminada de más opciones de cámara. Si Windows detecta que se instala una aplicación de dispositivo para UWP para la cámara y que la aplicación ha optado por la windows.cameraSettings extensión, la aplicación reemplaza la experiencia predeterminada proporcionada por Windows.

Para invocar el control flotante para obtener más opciones de cámara:

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

En esta imagen se muestra el control flotante predeterminado para obtener más opciones de cámara junto a un ejemplo de un control flotante personalizado.

Prerequisites

Antes de comenzar:

1. Configure tu PC de desarrollo. See Getting started for info about downloading the tools and creating a developer account.

2. Asocie la aplicación a la tienda. Consulta Crear una aplicación de dispositivo para UWP para obtener información sobre eso.

3. Cree metadatos de dispositivo para la impresora que la asocie a la aplicación. Consulte Creación de metadatos de dispositivo para obtener más información sobre eso.

4. Compile la interfaz de usuario para la página principal de la aplicación. Todas las aplicaciones de dispositivos para UWP se pueden iniciar desde Inicio, donde se mostrarán en pantalla completa. Utiliza la experiencia de inicio para resaltar tus productos o servicios de una manera que coincida con la imagen de marca y las características específicas de tus dispositivos. No hay restricciones especiales en el tipo de controles de interfaz de usuario que puede usar. Para empezar a trabajar con el diseño de la experiencia de pantalla completa, consulta los principios de diseño de Microsoft Store.

Paso 1: Registrar la extensión

Para que Windows reconozca que la aplicación puede proporcionar un control flotante personalizado para más opciones de cámara, debe registrar la extensión de configuración de la cámara. Esta extensión se declara en un Extension elemento, con un Category atributo establecido en un valor de windows.cameraSettings. En los ejemplos de C# y C++, el Executable atributo se establece DeviceAppForWebcam.exe en y el EntryPoint atributo se establece en DeviceAppForWebcam.App.

You can add the camera settings extension on the Declarations tab of the Manifest Designer in Microsoft Visual Studio. También puede editar manualmente el xml del manifiesto del paquete de la aplicación mediante el Editor XML (texto). 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>

Paso 2: Compilar la interfaz de usuario

Antes de compilar la aplicación, debe trabajar con los diseñadores y el equipo de marketing para diseñar la experiencia del usuario. La experiencia del usuario debe proyectar los aspectos de personalización de marca de su empresa y ayudarle a crear una conexión con los usuarios.

Design guidelines

Es importante revisar las directrices de control flotante de la aplicación para UWP antes de diseñar el control flotante personalizado. Las directrices ayudan a garantizar que el control flotante proporciona una experiencia intuitiva que es coherente con otras aplicaciones para UWP.

Para la página principal de la aplicación, tenga en cuenta que Windows 8.1 puede mostrar varias aplicaciones en varios tamaños en un solo monitor. Consulta las instrucciones siguientes para obtener más información sobre cómo la aplicación puede volver a conectarse correctamente entre tamaños de pantalla, tamaños de ventana y orientaciones.

• Directrices para tamaños de ventana y escalado a pantallas

• Directrices para cambiar el tamaño de las ventanas a diseños altos y estrechos

Flyout dimensions

El control flotante que muestra más opciones de cámara es de 625 píxeles de alto y 340 píxeles de ancho. 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 control flotante personalizado no debe superar los 340 píxeles de ancho.

Suggested effects

• Color effects. Por ejemplo, escala de grises, tono sepia o solarización de toda la imagen.

• Face-tracking effects. Donde se identifica una cara en la imagen y una superposición, como un sombrero o un par de gafas, se agrega encima de ella.

• Scene modes. Estos son modos preestablecidos de exposición y enfoque para diferentes condiciones de iluminación.

Suggested settings

• El control flotante personalizado de la aplicación de dispositivo para UWP puede proporcionar un modificador para habilitar la configuración implementada por hardware, como combinaciones de corrección de colores proporcionadas por el fabricante.

• Implementa propiedades básicas que complementan la otra configuración expuesta por tu aplicación de dispositivo para UWP. Por ejemplo, muchos dispositivos pueden exponer controles para ajustar el brillo, el contraste, el parpadeo, el foco y la exposición, pero es posible que un dispositivo que implemente TrueColor para ajustar automáticamente el brillo y el contraste puede que no necesite proporcionar estos ajustes.

Restrictions

• No abra el control flotante personalizado de la aplicación de dispositivo para UWP desde la aplicación principal (llamando al CameraOptionsUI.Show método ) cuando la aplicación no esté transmitiendo ni capturando.

• No proporcione una vista previa ni tome posesión de la secuencia de vídeo desde dentro del control flotante personalizado de la aplicación de dispositivo para UWP. El control flotante personalizado está diseñado para funcionar como un complemento para otra aplicación que captura el vídeo. La aplicación de captura tiene la propiedad de la secuencia de vídeo. No debe intentar acceder a la secuencia de vídeo mediante api de bajo nivel. Esto puede provocar un comportamiento inesperado, en el que la aplicación de captura pierde el acceso a la secuencia.

• No ajuste la resolución en el control flotante personalizado.

• No intente mostrar elementos emergentes, notificaciones o diálogos fuera del área diseñada para el control flotante personalizado. No se permiten estos tipos de diálogos.

• No inicie la captura de audio o vídeo dentro del control flotante personalizado. El control flotante personalizado está diseñado para ampliar otra aplicación que captura vídeo, en lugar de iniciar la propia captura. Además, la captura de audio o vídeo puede desencadenar un cuadro de diálogo del sistema y los diálogos emergentes no se permiten dentro del control flotante personalizado.

Paso 3: Controlar la activación

Si la aplicación ha declarado la extensión de configuración de la cámara, debe implementar un OnActivated método para controlar el evento de activación de la aplicación. This event is triggered when a UWP app, using the CameraCaptureUI class, calls the CameraOptionsUI.Show method. La activación de la aplicación es cuando la aplicación puede elegir qué página se iniciará a medida que se inicia la aplicación. En el caso de las aplicaciones que han declarado la extensión de configuración de la cámara, Windows pasa el dispositivo de vídeo en los argumentos del evento Activado: 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();
    }
}

Paso 4: Controlar la configuración y los efectos

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. Estos argumentos exponen las propiedades para controlar la cámara:

• The args.VideoDeviceController property provides an object of type Windows.Media.Devices.VideoDeviceController. Este objeto proporciona métodos para ajustar la configuración estándar.

• The args.VideoDeviceExtension property is a pointer to the camera driver MFT. Esta propiedad será null si no se expone ninguna interfaz MFT de controlador. Para obtener más información sobre las MFT del controlador de cámara, consulta Creación de un controlador de cámara MFT.

This example shows a portion of the Initialize method, as it appears in the DeviceAppPage.xaml.cs file. Aquí, se crea el controlador de dispositivo de vídeo (objeto videoDevController) y el controlador de cámara MFT (objeto lcWrapper) y el control flotante se rellena con la configuración actual de la cámara.

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. Para obtener más información sobre las MFT del controlador de cámara, consulta Creación de un controlador de cámara MFT.

Paso 5: Aplicar cambios

Cuando se realizan cambios en los controles del control flotante, el evento Changed del control correspondiente se usa para aplicar los cambios al controlador de dispositivo de vídeo (objeto videoDevController) y al controlador de cámara MFT (objeto 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));
}

Probar la aplicación

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.

Para poder probar la aplicación de dispositivo para UWP, debe estar vinculada a la cámara mediante metadatos del dispositivo.

• Necesita una copia del paquete de metadatos del dispositivo para la impresora, para agregarle la información de la aplicación del dispositivo. Si no tiene metadatos de dispositivo, puede compilarlos mediante el Asistente para creación de metadatos de dispositivo, tal como se describe en el tema Crear metadatos de dispositivo para la aplicación de dispositivo para UWP.

Los pasos siguientes compilan la aplicación e instalan los metadatos del dispositivo.

1. Habilite la firma de prueba.

   1. Inicie el Asistente para creación de metadatos de dispositivo desde %ProgramFiles(x86)%\Windows Kits\8.1\bin\x86 haciendo doble clic enDeviceMetadataWizard.exe

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

2. Reiniciar el equipo

3. Compile la solución abriendo el archivo de solución (.sln). Pulse F7 o vaya a Crear->Crear solución en el menú superior después de cargar el ejemplo.

4. Desconecte y desinstale la impresora. Este paso es necesario para que Windows lea los metadatos del dispositivo actualizado la próxima vez que se detecte el dispositivo.

5. Edite y guarde los metadatos del dispositivo. Para conectar la aplicación al dispositivo, debe asociarla con su equipo.

   Note

   Si aún no has creado los metadatos del dispositivo, consulta Crear metadatos de dispositivo para tu aplicación de dispositivo para UWP.

   1. Si el Asistente para creación de metadatos de dispositivo aún no está abierto, inícielo desde %ProgramFiles(x86)%\Windows Kits\8.1\bin\x86, haciendo doble clic enDeviceMetadataWizard.exe.

   2. Haga clic en Editar metadatos del dispositivo. Esto le permitirá editar el paquete de metadatos del dispositivo existente.

   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. En la página Especificar información de la aplicación de dispositivo para UWP , escriba la información de la aplicación de Microsoft Store en el cuadro aplicación de dispositivo para UWP . Haz clic en Importar archivo de manifiesto de aplicación para UWP para escribir automáticamente el nombre del paquete, el nombre del publicador y el identificador de la aplicación para UWP.

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

   6. En la página Revisar el paquete de metadatos del dispositivo , asegúrese de que toda la configuración es correcta y active la casilla Copiar el paquete de metadatos del dispositivo en el almacén de metadatos del equipo local . Then click Save.

6. Vuelva a conectar el dispositivo para que Windows lea los metadatos del dispositivo actualizados cuando el dispositivo esté conectado.

   • Si tiene una cámara externa, simplemente conecte la cámara.

   • Si tiene una cámara interna, actualice el equipo en la carpeta Dispositivos e impresoras. Use el Administrador de dispositivos para buscar cambios de hardware. Windows debe leer los metadatos actualizados cuando se detecta el dispositivo.

Prueba de los ejemplos

Para probar la experiencia de opciones de cámara, descargue primero estos ejemplos:

• Ejemplo de aplicación de dispositivo para UWP para cámara
• Ejemplo de interfaz de usuario de captura de cámara
• Ejemplo de MFT del controlador

A continuación, siga las instrucciones de prueba de ejemplo proporcionadas en la página de ejemplo driver MFT .