Cómo personalizar las opciones de cámara con una aplicación de dispositivo para UWP
En Windows 8.1, las aplicaciones de dispositivos para UWP permiten a los fabricantes de dispositivos personalizar el control flotante que muestra más opciones de cámara en algunas aplicaciones de cámara. En este tema se presenta el control flotante Más opciones, que muestra la API de CameraCaptureUI y cómo la versión de C# del ejemplo Aplicación de dispositivo para UWP para cámara reemplaza el control flotante predeterminado por un control flotante personalizado. Para obtener más información sobre las aplicaciones de dispositivos para UWP en general, consulte Conocer las aplicaciones de dispositivos para UWP.
Nota:
En Windows 8.1, la aplicación de cámara integrada no muestra un botón de Más opciones y, por tanto, no puede mostrar una aplicación de dispositivo para UWP para mostrar más opciones de cámara. Sin embargo, la clase CameraCaptureUI class, que está disponible para todas las aplicaciones para UWP, tiene un botón de Más opciones y puede mostrar aplicaciones de dispositivos para UWP desde ella.
La versión de C# del ejemplo aplicación de dispositivo para UWP para 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 una MFT (Transformación de Media Foundation) de controlador de cámara. Para obtener más información al respecto, consulte Creación de una MFT de controlador de cámara.
Nota:
Los ejemplos de código que se muestran en este tema se basan en la versión de C# de la aplicación de dispositivo para UWP de cámara de muestra. Este ejemplo también está disponible en JavaScript y C++. Descargue los ejemplos para ver las versiones más recientes del código.
Más opciones para cámaras
La experiencia de más opciones de cámara es la funcionalidad que proporciona una aplicación de dispositivo para UWP cuando otra aplicación, una aplicación para UWP, captura u obtiene una vista previa del vídeo de la cámara mediante la API de CameraCaptureUI. Se puede acceder a ella desde el vínculo Más opciones de la ventana de opciones de Cámara. Aunque no es a pantalla completa, 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 hay instalada una aplicación de dispositivo para UWP para la cámara y que la aplicación ha optado por la extensión windows.cameraSettings, la aplicación reemplaza la experiencia predeterminada proporcionada por Windows.
Para invocar el control flotante para obtener más opciones de cámara:
Abra una aplicación para UWP que use la API de CameraCaptureUI (el ejemplo de CameraCaptureUI, por ejemplo)
Toque el botón Opciones en la interfaz de usuario.
Se abre un control flotante de Opciones de cámara que muestra las opciones básicas para establecer la resolución y la estabilización de vídeo
En el control flotante Opciones de cámara, pulse Más opciones.
Se abre el control flotante Más opciones
El control flotante predeterminado aparece cuando no hay instalada ninguna aplicación de dispositivo para UWP para la cámara.
Aparece un control flotante personalizado cuando hay instalada una aplicación de dispositivo para UWP para la cámara
En esta imagen se muestra el control flotante predeterminado para más opciones de cámara junto a un ejemplo de un control flotante personalizado.
Requisitos previos
Antes de comenzar:
Configure su equipo de desarrollo. Consulte Introducción para obtener información sobre cómo descargar las herramientas y crear una cuenta de desarrollador.
Asocie la aplicación con la tienda. Consulte Creación de una aplicación de dispositivo para UWP para obtener información.
Cree metadatos de dispositivo para la impresora que la asocien con la aplicación. Consulte Creación de metadatos de dispositivo para obtener más información.
Cree 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 a pantalla completa. Use la experiencia de Inicio para resaltar el producto o los servicios de forma que coincida con la personalización de marca y las características específicas de los dispositivos. No hay restricciones especiales en cuanto al tipo de controles de interfaz de usuario que puede usar. Para empezar a trabajar con el diseño de la experiencia a pantalla completa, consulte 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 elemento Extension, con un atributo Category establecido en un valor de windows.cameraSettings. En los ejemplos de C# y C++, el atributo Executable se establece en DeviceAppForWebcam.exe y el atributo EntryPoint se establece en DeviceAppForWebcam.App.
Puede agregar la extensión de configuración de cámara en la pestaña Declaraciones del Diseñador de manifiestos en Microsoft Visual Studio. También puede editar el XML del manifiesto del paquete de la aplicación manualmente mediante el Editor XML (texto). Haga clic con el botón derecho en el archivo Package.appxmanifest, en el Explorador de soluciones, para ver las opciones de edición.
En este ejemplo se muestra la extensión de configuración de la cámara en el elemento Extension, tal como aparece en el archivo de manifiesto del paquete de la aplicación, 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: Crear la interfaz de usuario
Antes de crear 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.
Guías de diseño
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 proporcione una experiencia intuitiva que sea 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. Consulte las siguientes directrices para obtener más información sobre cómo su aplicación puede cambiar de tamaño de pantalla, tamaño de ventana y orientación.
Dimensiones de control flotante
El control flotante que muestra más opciones de cámara es de 625 píxeles de alto y 340 píxeles de ancho. Windows proporciona el área que contiene el texto de Más opciones en la parte superior y tiene aproximadamente 65 píxeles de altura, dejando 560 píxeles para el área visible del control flotante personalizado. Un control flotante personalizado no debe superar los 340 píxeles de ancho.
Nota:
Si el control flotante personalizado tiene más de 560 píxeles de altura, el usuario puede deslizarse o desplazarse para ver partes del control flotante que quedan por encima o por debajo del área visible.
Efectos sugeridos
Efectos de color. Por ejemplo, escala de grises, tono sepia o solarización de toda la imagen.
Efectos de seguimiento facial. Donde se identifica una cara en la imagen y una superposición, como un sombrero o unas gafas, se agrega encima de ella.
Modos de escena. Son modos preestablecidos de exposición y enfoque para diferentes condiciones de iluminación.
Configuración sugerida
El control flotante personalizado de la aplicación de dispositivo para UWP puede proporcionar un conmutador para habilitar la configuración implementada por hardware, como esquemas de corrección de colores proporcionadas por el fabricante.
Implemente propiedades básicas que complementen el resto de valores expuestos por la aplicación de dispositivo para UWP. Por ejemplo, muchos dispositivos pueden exponer controles para ajustar el brillo, el contraste, el parpadeo, el enfoque y la exposición, pero es posible que un dispositivo que implemente TrueColor para ajustar automáticamente el brillo y el contraste que no necesite proporcionar estos ajustes.
Restricciones
No abra el control flotante personalizado de la aplicación de dispositivo para UWP desde la aplicación principal (llamando al método
CameraOptionsUI.Show) cuando la aplicación no esté transmitiendo ni capturando.No proporcione una vista previa ni se apropie de la secuencia de vídeo desde el 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 es la propietaria 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 pierda el acceso a la secuencia.
No ajuste la resolución en el control flotante personalizado.
No intente mostrar elementos emergentes, notificaciones o cuadros de diálogo fuera del área diseñada para el control flotante personalizado. No se permiten estos tipos de cuadros de diálogo.
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 cuadros de diálogo emergentes no se permiten dentro del control flotante personalizado.
Paso 3: Controlar la activación
Si la aplicación tiene declarada la extensión de configuración de la cámara, debe implementar un método OnActivated para controlar el evento de activación de la aplicación. Este evento se desencadena cuando una aplicación para UWP, mediante la clase CameraCaptureUI, llama al método CameraOptionsUI.Show. La activación de la aplicación consiste en que la aplicación puede elegir qué página se lanzará al iniciarse. En el caso de las aplicaciones que tengan declarada la extensión de configuración de la cámara, Windows transfiere el dispositivo de vídeo en los argumentos del evento Activado: Windows.ApplicationModel.Activation.IActivatedEventArgs.
Una aplicación de dispositivo para UWP puede determinar que la activación está pensada para la configuración de la cámara (que alguien acaba de pulsar Más opciones en el cuadro de diálogo Opciones de cámara) cuando la propiedad kind del argumento del evento es igual a Windows.ApplicationModel.Activation.ActivationKind.CameraSettings.
En este ejemplo se muestra el controlador de eventos de activación en el método OnActivated, tal como aparece en el archivo App.xaml.cs. A continuación, los argumentos del evento se proyectan como Windows.ApplicationModel.Activation.CameraSettingsActivatedEventArgs y se envían al método Initialize del control flotante personalizado (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
Cuando se llama al método Initialize del control flotante personalizado (DeviceAppPage.xaml.cs), el dispositivo de vídeo se transfiere al control flotante a través de los argumentos del evento. Estos argumentos exponen las propiedades para controlar la cámara:
La propiedad args.VideoDeviceController proporciona un objeto de tipo Windows.Media.Devices.VideoDeviceController. Este objeto proporciona métodos para ajustar la configuración estándar.
La propiedad args.VideoDeviceExtension es un puntero a la MFT de controlador de cámara. 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, consulte Creación de una MFT de controlador de cámara.
En este ejemplo se muestra una parte del método Initialize, tal como aparece en el archivo DeviceAppPage.xaml.cs. Aquí, se crean el controlador de dispositivo de vídeo (objeto videoDevController) y la MFT de controlador de cámara (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;
}
// . . .
// . . .
// . . .
La MFT de controlador de cámara se muestra en el ejemplo MFT de controlador. Para obtener más información sobre las MFT del controlador de cámara, consulte Creación de una MFT de controlador de cámara.
Paso 5: Aplicar los 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 a la MFT del controlador de la cámara (objeto lcWrapper).
En este ejemplo se muestran los métodos Modificados que aplican cambios al controlador de dispositivo de vídeo y a la MFT del controlador de la cámara, tal como aparecen en el archivo 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));
}
Probar la aplicación
En esta sección se describe cómo instalar una aplicación de dispositivo para UWP que proporcione un control flotante personalizado para Más opciones de una cámara, como se muestra en el ejemplo de Aplicación de dispositivo para UWP para cámara.
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 crearlos mediante el Asistente para creación de metadatos de dispositivo, tal como se describe en el tema Creación de metadatos de dispositivo para la aplicación de dispositivo para UWP.
Nota:
Para usar el Asistente para creación de metadatos de dispositivo, debe instalar Microsoft Visual Studio Professional, Microsoft Visual Studio Ultimate o el SDK independiente para Windows 8.1, antes de completar los pasos de este tema. La instalación de Microsoft Visual Studio Express para Windows instala una versión del SDK que no incluye el asistente.
Los pasos siguientes permiten crear la aplicación e instalar los metadatos del dispositivo.
Habilite la firma de pruebas.
Inicie el Asistente para creación de metadatos de dispositivo desde %ProgramFiles(x86)%\Windows Kits\8.1\bin\x86, haciendo doble clic en DeviceMetadataWizard.exe
En el menú Herramientas, seleccione Habilitar firma de pruebas.
Reinicie el equipo.
Cree 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.
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.
Edite y guarde los metadatos del dispositivo. Para vincular la aplicación de dispositivo al dispositivo, debe asociar la aplicación de dispositivo al dispositivo.
Nota:
Si aún no ha creado los metadatos del dispositivo, consulte Creación de metadatos de dispositivo para la aplicación de dispositivo para UWP.
Si el Asistente para creación de metadatos de dispositivo todavía no está abierto, inícielo desde %ProgramFiles(x86)%\Windows Kits\8.1\bin\x86, haciendo doble clic en DeviceMetadataWizard.exe.
Haga clic en Editar metadatos del dispositivo. Esto le permitirá editar el paquete de metadatos del dispositivo existente.
En el cuadro de diálogo Abrir, busque el paquete de metadatos del dispositivo asociado a la aplicación de dispositivo para UWP. (Tiene una extensión de archivo devicemetadata-ms).
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. Haga clic en Importar archivo de manifiesto de aplicación para UWP para introducir automáticamente el Nombre del paquete, el Nombre del publicador y el Identificador de la aplicación para UWP.
Cuando haya terminado, haga clic en Siguiente hasta llegar a la página Finalizar.
En la página Revisar el paquete de metadatos del dispositivo, asegúrese de que toda la configuración sea correcta y active la casilla Copiar el paquete de metadatos del dispositivo en el almacén de metadatos del equipo local. A continuación, haga clic en Save(Guardar).
Vuelva a conectar el dispositivo para que Windows lea los metadatos del dispositivo actualizados cuando se conecte el dispositivo.
Si tiene una cámara externa, conéctela.
Si tiene una cámara interna, actualice el equipo en la carpeta Dispositivos e impresoras. Use Administrador de dispositivos para buscar cambios de hardware. Windows debería leer los metadatos actualizados al detectar el dispositivo.
Nota:
Para obtener información sobre cómo instalar una MFT de controlador de cámara, consulte la sección Pruebas en Creación de una MFT de controlador de cámara.
Prueba de los ejemplos
Para probar la experiencia de opciones de cámara, descargue primero estos ejemplos:
A continuación, siga las instrucciones de prueba de ejemplo proporcionadas en la página Ejemplo de MFT de controlador.