Esta página foi útil?
Seus comentários sobre este conteúdo são importantes. Queremos saber sua opinião.
Comentários adicionais?
1500 caracteres restantes
Exportar (0) Imprimir
Expandir Tudo

Windows App - Barra da Aplicação

Por Renato Haddad

Maio, 2013

Dn140268.060DE5057573180CEC6D227C6D3E2207(pt-br,MSDN.10).png

Visão Geral

O namespace Windows.Media.Capture do Windows Runtime’s (WinRT) contém um conjunto de classes para captura de mídias e incorporar as aplicações no estilo Modern UI. Particularmente, a classe CameraCaptureUI facilita muito os recursos de tirar fotos e filmar a partir de uma Webcam. A UI CameraCapture ainda lida com dispositivos que incluem duas câmeras (uma de frente e outra de costas para você) e fornece uma interface UI simples e intuitiva para alternar entre os dois.

Neste laboratório, você vai aprimorar o Cardápio Eletrônico, permitindo aos usuários capturar fotos e vídeos de suas receitas favoritas e compartilhá-los com outras aplicações. Você também irá adicionar uma barra de aplicação que fornece atalhos para esses recursos e aprender a incorporar menus pop-up em comandos da barra de aplicação.

Objetivos

Neste lab você aprenderá:

  • Implementar uma barra de aplicação no estilo Modern UI
  • Adicionar comandos e menus na barra de aplicação
  • Usar o Windows Runtime para tirar fotos
  • Usar o Windows Runtime para capturar vídeos
  • Compartilhar fotos e vídeos através de contratos

Requirementos do Sistema

Você deverá ter os seguintes itens para completar os exercícios:

  • Microsoft Windows 8
  • Microsoft Visual Studio 2012 RC

Configuração

Você deverá seguir estes passos para preparar o seu computador para estes exercícios:

  • Instalar o Microsoft Windows 8
  • Instalar o Microsoft Visual Studio 2012 RC

Exercício 1: Adicionar Barra de Aplicação

Antes de adicionar funcionalidades permitindo aos usuários do Cardápio Eletrônico capturar e compartilhar fotos e vídeos, precisamos modificar a interface do usuário para fornecer acesso a esses recursos. Uma barra de aplicação é a ferramenta perfeita para este trabalho.

Tarefa 1 – Instalar o Callisto

Antes de adicionar uma barra de aplicação, é preciso instalar o pacote do controle Callisto. Calisto é um projeto comunitário liderado por Tim Heuer que contém controles úteis para aplicações de estilo XAML Modern UI, incluindo um controle Menu e um controle de submenu, que vamos usar na próxima tarefa.

  • Abra o projeto do Cardápio Eletrônico no Visual Studio finalizado no laboratório anterior.
  • Abra o link http://visualstudiogallery.msdn.microsoft.com/0526563b-7a48-4b17-a087-a35cea701052 e clique no botão Download para baixar o Callisto.vsix.
  • Execute o Callisto.vsix e siga as instruções na tela para instalar a biblioteca.
Dn140268.note(pt-br,MSDN.10).gifNota:
Se você não tiver acesso a internet pegue o pacote Callisto na pasta Assets\Libraries dos materiais deste exercício.

  • Retorne ao Visual Studio. No Solution Explorer, clique com o botão direito em “References” e selecione Add Reference para adicionar a referência ao projeto Callisto. Você encontrará este projeto abaixo no Windows / Extensions, conforme a Figura 1. Selecione o checkbox do Callisto e clique no botão OK.

Dn140268.BA0C5C83384095735F4FC9688D9FB84E(pt-br,MSDN.10).png

Figura 1 – Instalar o pacote Callisto

Tarefa 2 – Adicionar a Barra de Aplicação na Página de Detalhes

Agora estamos prontos para adicionar uma barra de aplicação para a página de detalhes da receita. Vamos incluir um botão de Brag para capturar fotos e vídeos, e nós vamos usar um menu popup que permite ao usuário escolher entre os dois.

  • Abra a página ItemDetailPage.xaml e adicione os seguintes códigos na seção <Page.Resources>. Como visto anteriormente, o arquivo StandardStyles.xaml contém grande parte do layout da aplicação, no entanto, você pode adicionar um estilo na própria página, como este exemplo. Cabe ressaltar que a chave (Key) do Style chama-se BragAppBarButtonStyle o qual será referenciada em qualquer elemento da página. Já o TargetType informa que este recurso será aplicado somente ao controle do tipo Button. Uma das vantagens do XAML é que você pode definir as propriedades de um estilo e depois herda-lo quando necessário. Neste caso, o atributo BasedOn referencia o recurso AppBarButtonStyle, o qual contém todo o layout a ser aplicado aos botões de toda a aplicação. O texto a ser exibido no menu está definido em Value=”Menu” na propriedade AutomationProperties.Name.
<Style x:Key="BragAppBarButtonStyle" TargetType="Button" BasedOn="{StaticResource AppBarButtonStyle}">
    <Setter Property="AutomationProperties.AutomationId" Value="BragAppBarButton"/>
    <Setter Property="AutomationProperties.Name" Value="Menu"/>
    <Setter Property="Content" Value="&#xE170;"/>
</Style>
  • Agora adicione os seguintes códigos APÓS a seção <Page.Resources> para criar a barra de aplicação. Uma barra de aplicação pode ser criada tanto no topo (Page.TopAppBar) quanto no rodapé (Page.BottomAppBar). O layout é um Grid de duas colunas com 50* de largura cada. A primeira coluna do Grid contém um StackPanel chamado LeftCommands (falaremos muito deste controle) com um botão chamado BragButton. Na segunda coluna do Grid há outro StackPanel chamado RightCommands.
<Page.BottomAppBar>
    <AppBar x:Name="PageAppBar" Padding="10,0,10,0">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="50*"/>
                <ColumnDefinition Width="50*"/>
            </Grid.ColumnDefinitions>
            <StackPanel x:Name="LeftCommands" Orientation="Horizontal" Grid.Column="0" HorizontalAlignment="Left">
                <Button x:Name="BragButton" HorizontalAlignment="Left" Style="{StaticResource BragAppBarButtonStyle}" Click="OnBragButtonClicked" />
            </StackPanel>
            <StackPanel x:Name="RightCommands" Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Right">
            </StackPanel>
        </Grid>
    </AppBar>
</Page.BottomAppBar>
Dn140268.note(pt-br,MSDN.10).gifNota:
O botão ou comando declarado na barra de aplicação tem o visual baseado no recurso BragAppBarButtonStyle declarado na etapa anterior. O arquivo StandardStyles.xaml, que o Visual Studio cria na pasta Common do projeto, contém cerca de 30 diferentes tipos predefinidos de comandos de barra de aplicação. Se você examinar esses estilos, verá que os símbolos no visual dos comandos são especificados usando valores hexadecimais, como xE10F, que são códigos de caracteres no conjunto de caracteres Segoe UI Symbol. Para encontrar ícones legais para os seus próprios comandos, inicie o aplicativo Character Map do Windows 8 (veja a Figura 2), selecione Segoe UI Símbolo na lista de fontes, e vá até o final.

Dn140268.9DFD48889C3A5489B29C7706B2D152BE(pt-br,MSDN.10).png

Figura 2 – Mapa de caracteres para usa-los nos botões

  • Abra o arquivo ItemDetailPage.xaml.cs e adicione o seguinte código na lista de using. Este código faz uma referência à biblioteca de controles Callisto.
using Callisto.Controls;
  • Se você notar no código XAML do botão BragButton adicionado anteriormente na barra de aplicação, notará que há a declaração para o evento Click (Click="OnBragButtonClicked"). Sendo assim, adicione os seguintes códigos no ItemDetailPage.cs, o qual é o evento Click do botão para criar os dois submenus.
private void OnBragButtonClicked(object sender, RoutedEventArgs e)
{
    // Create a menu containing two items
    var menu = new Menu();
    var item1 = new MenuItem { Text = "Foto" };
    item1.Tapped += OnCapturePhoto;
    menu.Items.Add(item1);
    var item2 = new MenuItem { Text = "Video" };
    item2.Tapped += OnCaptureVideo;
    menu.Items.Add(item2);

    // Show the menu in a flyout anchored to the Brag button
    var flyout = new Flyout();
    flyout.Placement = PlacementMode.Top;
    flyout.HorizontalAlignment = HorizontalAlignment.Left;
    flyout.HorizontalContentAlignment = HorizontalAlignment.Left;
    flyout.PlacementTarget = BragButton;
    flyout.Content = menu;
    flyout.IsOpen = true;
}

private void OnCapturePhoto(object sender, TappedRoutedEventArgs e)
{
    DataTransferManager.ShowShareUI();
}

private void OnCaptureVideo(object sender, TappedRoutedEventArgs e)
{
    DataTransferManager.ShowShareUI();
}
Dn140268.note(pt-br,MSDN.10).gifNote:
O método DataTransfer.DataTransferManager.ShowShareUI exibe a interface do usuário compartilhar, que é a mesma interface que aparece quando você seleciona o Compartilhar na barra do Charms.

  • Para um melhor entendimento, veja a explicação detalhada de parte do código anterior.
private void OnBragButtonClicked(object sender, RoutedEventArgs e)
{
    // Cria um objeto do tipo Menu
    var menu = new Menu();
    // Cria um objeto do tipo MenuItem, que é o submenu
    var item1 = new MenuItem { Text = "Foto" };
    // Atribui o handler Tapped ao submenu Foto que dispara o método OnCapturePhoto
    item1.Tapped += OnCapturePhoto;
    menu.Items.Add(item1);
    var item2 = new MenuItem { Text = "Video" };
    // Atribui o handler Tapped ao submenu Video que dispara o método OnCaptureVideo
    item2.Tapped += OnCaptureVideo;
    menu.Items.Add(item2);

    // Define as posições onde o botão será mostrado como popUp (Flyout)
    var flyout = new Flyout();
    flyout.Placement = PlacementMode.Top;
    flyout.HorizontalAlignment = HorizontalAlignment.Left;
    flyout.HorizontalContentAlignment = HorizontalAlignment.Left;
    flyout.PlacementTarget = BragButton;
    flyout.Content = menu;
    flyout.IsOpen = true;
}

Tarefa 3 – Testar o resultado

  • Agora vamos ver a aplicação funcionando com a barra de aplicação em ação.
  • Pressione F5 para rodar a aplicação.
  • Selecione uma receita para ir à página de detalhes da mesma.
  • Para exibir a barra de aplicação, você pode usar o botão direito do mouse, ou as teclas Win + Z, ou em uma tela de toque, arraste o dedo no rodapé da tela a partir da parte de baixo para cima.
  • Conforme a Figura 3, veja que a barra de aplicação exibe o botão Menu. Se você clicar no botão, aparecerá o submenu com as opções de Foto e Video.

Dn140268.594590D955EA1DE56F57C02CED76B7F1(pt-br,MSDN.10).png

Figura 3 – Menu na barra de aplicação

  • Selecione a opção Foto no submenu e veja que aparece o painel de compartilhar, conforme a Figura 4. Isto porque o código atual é o DataTransferManager.ShowShareUI(); e iremos alterá-lo em breve para ativar a Webcam do computador.

Dn140268.3C675230B5AD61A74A953BE533A67EAE(pt-br,MSDN.10).png

Figura 4 – Menu compartilhar

  • Retorne ao Visual Studio e pare a execução.

Exercício 2: Capturar Foto

Agora vamos modificar o código para permitir ao usuário tirar uma foto e compartilhá-la com outras aplicações. O namespace Windows.Media.Capture do Windows Runtime inclui uma classe chamada CameraCaptureUI que fornece uma interface de alto nível para hardware da câmera e faz interface com câmeras tão simples quanto isso poderia ser possível.

Tarefa 1 – Usar o CameraCaptureUI para Capturar a Foto

A classe CameraCaptureUI tem o método CaptureFileAsync que faz trabalho de tirar fotos, então vamos colocá-lo para trabalhar no Cardápio Eletrônico. Vamos modificar o código na página de detalhes da receita para compartilhar a foto capturada e a receita.

  • Abra o arquivo ItemDetailPage.xaml.cs e adicione os seguintes códigos na lista de using no topo do arquivo. O primeiro é responsável pela captura da foto e o segundo irá armazenar a foto.
using Windows.Media.Capture;
using Windows.Storage;
  • Na declaração da classe ItemDetailPage, adicione este código, destacado em amarelo, que será o nome da variável (_photo) que conterá o arquivo. Veja que o tipo é StorageFile, e sugiro que você dê um F12 neste tipo para pesquisar as propriedades e métodos existentes.
public sealed partial class ItemDetailPage : ContosoCookbook.Common.LayoutAwarePage
{
    private StorageFile _photo; // arquivo de foto para compartilhar
  • Localize o método OnCapturePhoto que você adicionou no exercício anterior.
  • Modifique o método de acordo com os seguintes códigos. Certifique-se de adicionar a palavra chave async na assinatura do método. Isto é necessário uma vez que o C# aguarda a palavra chave await no corpo do código.
DE:

private void OnCapturePhoto(object sender, TappedRoutedEventArgs e)
{
    DataTransferManager.ShowShareUI();
}

PARA:

private async void OnCapturePhoto(object sender, TappedRoutedEventArgs e)
{
    var camera = new CameraCaptureUI();
    var file = await camera.CaptureFileAsync(CameraCaptureUIMode.Photo);

    if (file != null)
    {
        _photo = file;
        DataTransferManager.ShowShareUI();
    }
}
  • Para um melhor entendimento do código, veja a explicação detalhada.
// O método é assinado com o ASYNC porque rodará de forma assíncrona. Enquanto a UI roda numa thread, a cpatura da foto roda em outra.
private async void OnCapturePhoto(object sender, TappedRoutedEventArgs e)
{
    // Usa a classe CameraCaptureUI para capturar a foto
    var camera = new CameraCaptureUI();
    // Invoca a captura da foto de forma assíncrona, veja o uso do AWAIT
    // O CameraCaptureMode aceita Photo, PhotoOrVideo ou Video
    var file = await camera.CaptureFileAsync(CameraCaptureUIMode.Photo);
    // Até aqui o programa aguarda que o usuário tire ou não a foto
    // Se a variável file for diferente de nulo, aramazena a foto em _photo
    // e mostra o painel de Compartilhar
    if (file != null)
    {
        _photo = file;
        DataTransferManager.ShowShareUI();
    }
}
  • Ainda neste arquivo (ItemDetailPage.xaml.cs ), substitua todo o código do método OnDataRequested que você adicionou anteriormente. Isto é necessário para compartilhar a receita se a variável _photo for nula, caso contrário é a foto que será compartilhada. Cabe ressaltar que a variável reference acessará o arquivo definido na variável _photo, através do método CreateFromFile. Note ainda, que para compartilhar uma imagem, usamos o SetBitmap com a foto em si.
void OnDataRequested(DataTransferManager sender, DataRequestedEventArgs args)
{
    var request = args.Request;
    var item = (RecipeDataItem)this.flipView.SelectedItem;
    request.Data.Properties.Title = item.Title;

    if (_photo != null)
    {
        request.Data.Properties.Description = "Foto da receita";
        var reference = Windows.Storage.Streams.RandomAccessStreamReference.CreateFromFile(_photo);
        request.Data.Properties.Thumbnail = reference;
        request.Data.SetBitmap(reference);
        _photo = null;
    }
    else
    {
        request.Data.Properties.Description = "Ingredientes e modo de preparo da receita";

        // Share recipe text
        var recipe = "\r\nINGREDIENTES\r\n";
        recipe += String.Join("\r\n", item.Ingredients);
        recipe += ("\r\n\r\nPREPARO\r\n" + item.Directions);
        request.Data.SetText(recipe);

        // Share recipe image
        var reference = RandomAccessStreamReference.CreateFromUri(new Uri(item.ImagePath.AbsoluteUri));
        request.Data.Properties.Thumbnail = reference;
        request.Data.SetBitmap(reference);
    }
}
  • Pressione F5 para executar a aplicação. Selecione uma receita para ver os detalhes.
  • Exiba a barra de aplicação, clique no botão Menu e no submenu clique em Foto. O que acontecerá? De acordo com a Figura 5, será exibida uma mensagem informando que este aplicativo precisa de permissão para usar sua câmera. Ou seja, você pode instanciar no código todas as APIs do Windows Runtime de acesso ao hardware, no entanto, se você não permitir o acesso, de nada valerá.

Dn140268.E74800000F30F3C3CAFCC0F8D7F5E7B1(pt-br,MSDN.10).png

Figura 5 – Acesso a webcam

  • Retorne ao Visual Studio e pare a execução.

Tarefa 2 – Habilitar Acesso a Webcam

As aplicações no estilo Modern UI devem ter permissão para acessar a Webcam. Essa permissão está no arquivo do manifesto do aplicativo, que contém o metadados sobre a aplicação. O próximo passo é editar o arquivo do manifesto do Cardápio Eletrônico para permitir o acesso a Webcam.

  • No Solution Explorer, dê um duplo clique no arquivo Package.appxmanifest para abrí-lo.
  • Selecione a guia Capabilities e clique no checkbox Webcam, conforme a Figure 6.

Dn140268.BDDA0572D027E0C77052CFADCA59DFEC(pt-br,MSDN.10).png

Figura 6 – Permitir acesso a webcam

  • Aproveitando o momento do arquivo de manifesto, nos bastidores este arquivo é uma estrutura XML que será enviado junto com o pacote para loja do Windows. Esta configuração que fizemos para a Webcam está configurada no nó de Capabilities/DeviceCapability. Todas as configurações sobre o pacote está em Package, sobre a aplicação em Application, etc.
<?xml version="1.0" encoding="utf-8"?>
<Package xmlns="http://schemas.microsoft.com/appx/2010/manifest">
  <Identity Name="bfeb0300-7464-4ed5-a6e5-e7c04865cfab" Publisher="CN=Renato" Version="1.0.0.0" />
  <Properties>
    <DisplayName>ContosoCookbook</DisplayName>
    <PublisherDisplayName>Renato</PublisherDisplayName>
    <Logo>Assets\StoreLogo.png</Logo>
  </Properties>
  <Prerequisites>
    <OSMinVersion>6.2.0</OSMinVersion>
    <OSMaxVersionTested>6.2.0</OSMaxVersionTested>
  </Prerequisites>
  <Resources>
    <Resource Language="x-generate" />
  </Resources>
  <Applications>
    <Application Id="App" Executable="$targetnametoken$.exe" EntryPoint="ContosoCookbook.App">
      <VisualElements DisplayName="Cardápio Eletrônico" Logo="Assets\Logo.png" SmallLogo="Assets\SmallLogo.png" Description="Aplicação de Cardápio Eletrônico" ForegroundText="light" BackgroundColor="#464646">
        <DefaultTile ShowName="allLogos" WideLogo="Assets\WideLogo.png" />
        <SplashScreen Image="Assets\SplashScreen.png" />
      </VisualElements>
      <Extensions>
        <Extension Category="windows.search" />
      </Extensions>
    </Application>
  </Applications>
  <Capabilities>
    <Capability Name="internetClient" />
    <DeviceCapability Name="webcam" />
  </Capabilities>
</Package>

Tarefa 3 – Testar o Resultado

Agora que temos tudo configurado sobre a Webcam, vamos testar.

  • Pressione F5 para executar a aplicação e selecione uma receita para ver os detalhes.
  • Mostre a barra de aplicação e selecione o botão Menu. Clique na opção Foto e quando a mensagem para permitir o acesso a Webcam for mostrada, clique em “Permitir”, conforme a Figura 7.

Dn140268.D342BFBC5CECF718EDC96BBC9092B426(pt-br,MSDN.10).png

Figura 7 – Permitir acesso a webcam

  • Quando a interface da Webcam aparecer, clique na tela para capturar a foto. Se for um monitor de toque, apenas toque na tela. Veja um exemplo na Figura 8. Veja ainda que é possível recortar a imagem ou repetir a captura.

Dn140268.3224338DA71F02CC177DD4CEFBE8C67B(pt-br,MSDN.10).png

Figura 8 – Tirando foto


  • Selecione o botão OK no rodapé direito da tela para aceitar a captura da foto.
  • Quando a interface de compartilhar aparecer, selecione a aplicação Share Target Sample App. Veja que os dados da receita e a foto capturada são mostradas.

Dn140268.B4D0504CBBFF6EC931E705FA539C7BDA(pt-br,MSDN.10).png

Figura 9 – Painel de compartilhar já com a aplicação

  • Retorne ao Visual Studio e pare a execução.

Exercício 3: Capturar Vídeo

Os usuários do Cardápio Eeltrônico podem agora tirar fotos e compartilhá-las com outras aplicações. Neste exercício, você vai adicionar suporte para capturar vídeos também. Você mudará o parâmetro passado para CaptureFileAsync para indicar que você deseja capturar vídeo em vez de fotos, e usar a propriedade CameraCaptureUI do VideoSettings para indicar o formato que você deseja capturar.

Tarefa 1 – Usar o CameraCaptureUI para Capturar um Vídeo

O mesmo método CaptureFileAsync para capturar fotos pode ser usado para capturar vídeos também. Vamos modificar o método OnCaptureVideo para realiazar esta tarefa.

  • Abra o arquivo ItemDetailPage.xaml.cs e adicione a seguinte variável (_video) do tipo StorageFile que armazenará o vídeo capturado.
private StorageFile _video; // arquivo de vídeo para compartilhar
  • Localize o método OnCaptureVideo adicionado anteriormente.
  • Altere o método conforme os seguintes códigos. Novamente, certifique-se de incluir a palavra chave ASYNC na assinatura do método. Cabe ressaltar que os formatos aceitos de vídeos até o momento são wmv e mp4. Isto é configurado nem CameraCaptureUIVideoFormat.
DE:

private void OnCaptureVideo(object sender, TappedRoutedEventArgs e)
{
    DataTransferManager.ShowShareUI();
}

PARA:

private async void OnCaptureVideo(object sender, TappedRoutedEventArgs e)
{
    var camera = new CameraCaptureUI();
    camera.VideoSettings.Format = CameraCaptureUIVideoFormat.Wmv;
    var file = await camera.CaptureFileAsync(CameraCaptureUIMode.Video);

    if (file != null)
    {
        _video = file;
        DataTransferManager.ShowShareUI();
    }
}
  • Localize o método OnDataRequested e adicione o seguinte código em amarelo na cláusula else-if para compartilhar o vídeo. Este código do IF verifica se a variável _photo é diferente de nulo, então captura a foto; caso a variável _video seja diferente de nulo, então captura o vídeo; Caso contrário compartilha apenas os textos da receita.
void OnDataRequested(DataTransferManager sender, DataRequestedEventArgs args)
{
    var request = args.Request;
    var item = (RecipeDataItem)this.flipView.SelectedItem;
    request.Data.Properties.Title = item.Title;

    if (_photo != null)
    {
        request.Data.Properties.Description = "Foto da receita";
        var reference = Windows.Storage.Streams.RandomAccessStreamReference.CreateFromFile(_photo);
        request.Data.Properties.Thumbnail = reference;
        request.Data.SetBitmap(reference);
        _photo = null;
    }
    else if (_video != null)
    {
        request.Data.Properties.Description = "Video da receita";
        List<StorageFile> items = new List<StorageFile>();
        items.Add(_video);
        request.Data.SetStorageItems(items);
        _video = null;
    }
    else
    {
        request.Data.Properties.Description = "Ingredientes e modo de preparo da receita";

        // Share recipe text
        var recipe = "\r\nINGREDIENTES\r\n";
        recipe += String.Join("\r\n", item.Ingredients);
        recipe += ("\r\n\r\nPREPARO\r\n" + item.Directions);
        request.Data.SetText(recipe);

        // Share recipe image
        var reference = RandomAccessStreamReference.CreateFromUri(new Uri(item.ImagePath.AbsoluteUri));
        request.Data.Properties.Thumbnail = reference;
        request.Data.SetBitmap(reference);
    }
}
  • Novamente, é preciso configurar o arquivo do manifesto da aplicação. Neste caso é para suportar o uso de microfone para o som, afinal o CameraCaptureUI é a API para capturar som e imagem. Abra o arquivo Package.appxmanifest e na guia Capabilities, selecione o checkbox Microphone, conforme a Figura 10.

Dn140268.FE47DF1D218C461A59156D9DF694F6D5(pt-br,MSDN.10).png

Figura 10 – Configurar o acesso ao microfone

Tarefa 2 – Testar o resultado

Vamos testar os códigos alterados.

  • Pressione F5 para rodar a aplicação e selecione uma receita para visualizar os detalhes.
  • Exiba a barra de aplicação (Win + Z), selecione o botão Menu e no submenu clique em Video.
  • Se for mostrada uma mensagem perguntando se deseja ter acesso a camera e microfone, clique no botão Permitir.
  • Quando a interface de captura de vídeo aparecer, clique na tela para iniciar a captura do vídeo. Se for uma ela de toque, apenas toque na tela.
  • Para interromper a captura do vídeo, toque ou clique novamente na tela. Veja na Figura 11 que é mostrada uma linha de tempo do vídeo capturado. Do lado direito são mostrados três botões, sendo Cortar, OK e Repetir.

Dn140268.6E299CE2692E3D79FCA1B32E496E2C1A(pt-br,MSDN.10).png

Figura 11 – Captura de vídeo

  • Selecione o botão OK abaixo do lado direito da tela para aceitar a captura do vídeo.
  • Quando exibir a tela do compartilhar, selecione a aplicação Share Target Sample App.
  • Confirme que o vídeo capturado foi aceito e compartilhado. Neste caso, o nome do vídeo é video002.wmv, como mostrado na Figura 12.

Dn140268.2D202F53BA7B3BCFA626B2A4CF219670(pt-br,MSDN.10).png

Figura 12 – Vídeo compartilhado

  • Retorne ao Visual Studio e pare a execução.

Resumo

Em algumas plataformas, incluir recursos de captura de fotografia e vídeo em um aplicativo é uma tarefa difícil, exigindo a interface com câmeras no nível do dispositivo. O Windows Runtime faz a captura de mídias extraordinariamente fácil, fornecendo ao núcleo da interface do usuário e a lógica na classe CameraCaptureUI. No Cardápio Eletrônico não fazemos nada com arquivos capturados de imagem e vídeo que não compartilhá-los para fora. No entanto, você pode facilmente usar tipos no namespace Windows.Storage para salvar esses arquivos para o sistema de arquivos e permitir ao usuário criar bibliotecas de fotos e vídeos de receitas.

Você pode não ter notado, mas o sistema operacional fez algo muito legal para você quando selecionou os checkboxes de Webcam e microfone no arquivo do manifesto da aplicação. Se você executar o aplicativo, abra o Charms (Win + C), selecione Configurações / Permissões. Veja que a página de permissões agora contém um botão liga/desliga para o acesso a câmera e microfone. Aplicativos que usam câmeras e microfones são obrigados a permitir que o usuário possa desativar, e você não tem que escrever uma única linha de código para isso.

Dn140268.B477C69837ECDD51A40ED02A1EB28BDA(pt-br,MSDN.10).png

Figura 13 – Ativar Webcam e microfone

Sobre o Autor

Renato Haddad (rehaddad@msn.comwww.renatohaddad.com ) é MVP, MCT, MCPD e MCTS, palestrante em eventos da Microsoft em diversos países, ministra treinamentos focados em produtividade com o VS.NET 2010/2012, ASP.NET 4, ASP.NET MVC, Entity Framework, Reporting Services, Windows Phone e Windows 8. Visite o blog http://weblogs.asp.net/renatohaddad .

Mostrar:
© 2015 Microsoft