Como personalizar as opções da câmera com um aplicativo de dispositivo UWP

No Windows 8.1, os aplicativos de dispositivo UWP permitem que os fabricantes de dispositivos personalizem o submenu que exibe mais opções de câmera em alguns aplicativos de câmera. 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 saber mais sobre os aplicativos de dispositivo UWP em geral, consulte Meet UWP device apps.

A versão em C# do exemplo de aplicativo de dispositivo UWP para câmera usa a página DeviceAppPage.xaml para demonstrar a interface do usuário de um flyout personalizado para obter mais opções de câmera. O exemplo também aplica efeitos de câmera usando um driver de câmera MFT (media foundation transform). Para obter mais informações sobre isso, consulte Criando uma MFT de driver de câmera.

Mais opções 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. Não está em ecrã completo, mas é exibido dentro de um flyout, que é um controlo para exibir uma interface de utilizador leve e contextual que é fechada quando o utilizador clica ou toca fora dele.

Essa experiência pode ser usada para destacar recursos diferenciados para sua câmera, como a capacidade de aplicar efeitos de vídeo personalizados.

Quando um aplicativo de dispositivo UWP não é instalado para uma câmera, o Windows fornece uma experiência padrão de mais opções de câmera. Se o Windows detetar que uma aplicação de dispositivo UWP está instalada para a sua câmara e que a aplicação optou pela participação na windows.cameraSettings extensão, a sua aplicação substituirá a experiência padrão fornecida pelo Windows.

Para invocar o submenu para obter mais opções de câmera:

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

Esta imagem mostra o submenu padrão para mais opções de câmera ao lado de um exemplo de um submenu personalizado.

Prerequisites

Antes de começar:

1. Configure o seu PC de desenvolvimento. See Getting started for info about downloading the tools and creating a developer account.

2. Associe seu aplicativo à loja. Consulte Criar um aplicativo de dispositivo UWP para obter informações sobre isso.

3. Crie metadados de dispositivo para sua impressora que os associem ao seu aplicativo. Consulte Criar metadados de dispositivo para obter mais informações sobre isso.

4. Crie a interface do usuário para a página principal do seu aplicativo. Todos os aplicativos de dispositivo UWP podem ser iniciados na tela inicial, onde serão exibidos em tela cheia. Utilize a experiência Iniciar para destacar o seu produto ou serviços de uma forma que corresponda à marca e às funcionalidades específicas dos seus dispositivos. Não há restrições especiais sobre o tipo de controles de interface do usuário que ele pode usar. Para começar com o design da experiência de tela inteira, consulte os princípios de design da Microsoft Store .

Passo 1: Registar a extensão

Para que o Windows reconheça que o aplicativo pode fornecer um submenu personalizado para mais opções de câmera, ele deve registrar a extensão de configurações da câmera. Essa extensão é declarada em um Extension elemento , com um Category atributo definido como um valor de windows.cameraSettings. Nos exemplos de C# e C++, o Executable atributo é definido como DeviceAppForWebcam.exe e o EntryPoint atributo é definido como DeviceAppForWebcam.App.

You can add the camera settings extension on the Declarations tab of the Manifest Designer in Microsoft Visual Studio. Você também pode editar o XML do manifesto do pacote do aplicativo manualmente, usando o Editor de 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>

Etapa 2: Criar a interface do usuário

Antes de criar seu aplicativo, você deve trabalhar com seus designers e sua equipe de marketing para projetar a experiência do usuário. A experiência do usuário deve projetar os aspetos de marca da sua empresa e ajudá-lo a construir uma conexão com seus usuários.

Design guidelines

É importante revisar as diretrizes do submenu do aplicativo UWP antes de criar seu submenu personalizado. As diretrizes ajudam a garantir que seu flyout ofereça uma experiência intuitiva consistente com outros aplicativos UWP.

Para a página principal do seu aplicativo, lembre-se de que o Windows 8.1 pode exibir vários aplicativos em vários tamanhos em um único monitor. Consulte as diretrizes a seguir para saber mais sobre como seu aplicativo pode refluir normalmente entre tamanhos de tela, tamanhos de janela e orientações.

• Diretrizes para tamanhos de janelas e dimensionamento para telas

• Diretrizes para redimensionar janelas para layouts altos e estreitos

Flyout dimensions

O submenu que exibe mais opções de câmera tem 625 pixels de altura e 340 pixels de largura. 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. Um menu ou painel deslizante personalizado não deve exceder 340 pixels de largura.

Suggested effects

• Color effects. Por exemplo, escala de cinza, tom sépia ou solarização de toda a imagem.

• Face-tracking effects. Quando um rosto é identificado na imagem e uma sobreposição, como um chapéu ou um par de óculos, é adicionada em cima dele.

• Scene modes. Estes são modos de exposição e foco predefinidos para diferentes condições de iluminação.

Suggested settings

• O submenu personalizado do aplicativo de dispositivo UWP pode fornecer uma opção para habilitar configurações implementadas por hardware, como esquemas de correção de cores fornecidos pelo fabricante.

• Implemente propriedades básicas que complementem as outras configurações expostas pelo seu aplicativo de dispositivo UWP. Por exemplo, muitos dispositivos podem expor controles para ajustar brilho, contraste, cintilação, foco e exposição, mas um dispositivo que implementa TrueColor para ajustar automaticamente o brilho e o contraste pode não precisar fornecer essas configurações.

Restrictions

• Não abra o flyout personalizado da aplicação de dispositivo UWP a partir da aplicação principal (chamando CameraOptionsUI.Show) quando a aplicação não estiver a transmitir ou a capturar.

• Não forneça uma visualização ou se aproprie do fluxo de vídeo de dentro do menu flutuante personalizado do aplicativo de dispositivo UWP. O submenu personalizado destina-se a funcionar como um complemento para outra aplicação que captura vídeo. O aplicativo de captura tem a propriedade do fluxo de vídeo. Você não deve tentar acessar o fluxo de vídeo usando APIs de baixo nível. Isso pode causar um comportamento inesperado, no qual o aplicativo de captura perde o acesso ao fluxo.

• Não ajuste a resolução na janela suspensa personalizada.

• Não tente exibir pop-ups, notificações ou caixas de diálogo fora da área destinada ao submenu personalizado. Esses tipos de diálogos não são permitidos.

• Não inicie a captura de áudio ou vídeo dentro do flyout personalizado. O menu flutuante personalizado destina-se a estender outra aplicação que está capturando vídeo, em vez de iniciar a captura em si. Além disso, a captura de áudio ou vídeo pode acionar uma caixa de diálogo do sistema e caixas de diálogo emergentes não são permitidas dentro do flyout personalizado.

Etapa 3: Gerir a ativação

Se seu aplicativo declarou a extensão de configurações da câmera, ele deve implementar um OnActivated método para manipular o evento de ativação do aplicativo. This event is triggered when a UWP app, using the CameraCaptureUI class, calls the CameraOptionsUI.Show method. A ativação do aplicativo é quando seu aplicativo pode escolher qual página será iniciada quando o aplicativo for iniciado. Para aplicativos que declararam a extensão de configurações da câmera, o Windows passa o dispositivo de vídeo nos argumentos de evento Ativado: 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();
    }
}

Etapa 4: Controlar configurações e efeitos

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. Estes argumentos expõem as propriedades para controlar a câmara:

• The args.VideoDeviceController property provides an object of type Windows.Media.Devices.VideoDeviceController. Este objeto fornece métodos para ajustar as configurações padrão.

• The args.VideoDeviceExtension property is a pointer to the camera driver MFT. Esta propriedade será nula se nenhuma interface MFT do driver for exposta. Para mais informações sobre MFTs de câmera de driver, consulte Criando uma MFT de câmera de driver.

This example shows a portion of the Initialize method, as it appears in the DeviceAppPage.xaml.cs file. Aqui, o controlador de dispositivo de vídeo (objeto videoDevController) e o driver de câmera MFT (objeto lcWrapper) são criados, e o menu deslizante é preenchido com as configurações atuais da câmera.

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 mais informações sobre MFTs de câmera de driver, consulte Criando uma MFT de câmera de driver.

Etapa 5: Aplicar alterações

Quando são feitas alterações nos controles no submenu, o evento Changed do controle correspondente é usado para aplicar as alterações ao controlador do dispositivo de vídeo (objeto videoDevController) e ao driver da câmera 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));
}

Testando seu aplicativo

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.

Antes de testar seu aplicativo de dispositivo UWP, ele deve ser vinculado à sua câmera usando metadados do dispositivo.

• Você precisa de uma cópia do pacote de metadados do dispositivo para sua impressora para adicionar as informações do aplicativo do dispositivo a ela. Se você não tiver metadados de dispositivo, poderá criá-los usando o Assistente para Criação de Metadados de Dispositivo conforme descrito no tópico Criar metadados de dispositivo para seu aplicativo de dispositivo UWP.

As etapas a seguir criam seu aplicativo e instalam os metadados do dispositivo.

1. Habilite a assinatura de teste.

   1. Inicie o Assistente para Criação de Metadados de Dispositivo a partir do %ProgramFiles(x86)%\Windows Kits\8.1\bin\x86, clicando duas vezes em DeviceMetadataWizard.exe

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

2. Reinicie o computador

3. Crie a solução abrindo o arquivo de solução (.sln). Pressione F7 ou vá para Build ->Build Solution no menu superior após o carregamento do exemplo.

4. Desconecte e desinstale a impressora. Esta etapa é necessária para que o Windows leia os metadados atualizados do dispositivo na próxima vez que o dispositivo for detetado.

5. Edite e salve metadados do dispositivo. Para vincular o aplicativo de dispositivo ao seu dispositivo, você deve associá-lo ao seu dispositivo.

   Note

   Se você ainda não criou os metadados do dispositivo, consulte Criar metadados de dispositivo para seu aplicativo de dispositivo UWP.

   1. Se o Assistente para Criação de Metadados de Dispositivo ainda não estiver aberto, inicie-o a partir do %ProgramFiles(x86)%\Windows Kits\8.1\bin\x86, clicando duas vezes em DeviceMetadataWizard.exe.

   2. Clique em para Editar Metadados do Dispositivo. Isso permitirá que você edite o pacote de metadados do 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. Na página Especificar informações do aplicativo de dispositivo UWP, insira as informações do aplicativo da Microsoft Store na caixa do aplicativo de dispositivo UWP. Clique em Importar ficheiro de manifesto da aplicação UWP para inserir automaticamente o Nome do pacote, o Nome do editore o ID da aplicação UWP.

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

   6. Na página Revisar o pacote de metadados do dispositivo, verifique que todas as configurações estão corretas e selecione a caixa de seleção Copiar o pacote de metadados do dispositivo para o armazenamento de metadados no computador local. Then click Save.

6. Reconecte seu dispositivo para que o Windows leia os metadados atualizados do dispositivo quando o dispositivo estiver conectado.

   • Se você tiver uma câmera externa, basta conectá-la.

   • Se tiver uma câmara interna, atualize o PC na pasta Dispositivos e Impressoras. Use o Gerenciador de Dispositivos para verificar se há alterações de hardware. O Windows deve ler os metadados atualizados quando o dispositivo for detetado.

Testando as amostras

Para testar a experiência de opções da câmera, primeiro baixe estes exemplos:

• Aplicação de dispositivo UWP para exemplo de câmera
• Exemplo de interface do usuário de captura de câmera
• Exemplo de driver MFT

Em seguida, siga as instruções de teste de exemplo fornecidas na página Exemplo de MFT do driver .