Xamarin Forms - Usando a Câmera do dispositivo

Neste artigo vou mostrar como usar a câmera do dispostivo usando o Media plugin for Xamarin em aplicações Xamarin Forms usando o Visual Studio 2015 e a linguagem C#.

Podemos facilmente usar os recursos de câmera do dispositivo em aplicações Xamarin Forms usando o plugin Media plugin for Xamarin.

Você pode acessar o código fonte e a documentação neste link : https://github.com/jamesmontemagno/MediaPlugin

Podemos também fazer a instalação do plugin usando o Nuget, quer via console digitando o comando : Install-Package Xam.Plugin.Media -Version 2.6.2, quer usando o gerenciador de pacotes que eu vou mostrar no artigo.

Os requisitos de cada plataforma e exemplos de como usar o plugin estão no link acima.

No exemplo deste artigo vou usar uma view ImageView para exibir a foto capturada pela Câmera e usar dois botões de comando, onde em um vou definir o evento Click para tirar a foto e no outro botão vou definir o código que permite ao usuário selecionar uma imagem para exibir na aplicação.

Recursos usados:

Nota: Baixe e use a versão Community 2015 do VS ela é grátis e é equivalente a versão Professional.

Criando o projeto no Visual Studio 2015 Community

Abra o Visual Studio Community 2015 e clique em New Project;

Selecione Visual C#, o template Cross Plataform e a seguir Blank App (Xamarin.Forms Portable);

Nota :  A opção Portable (Portable Class Library - PCL ) - Inclui todo o código comum em uma biblioteca de vínculo dinâmico (DLL) que pode então ser referenciada a partir de outros projetos;

Informe o nome XF_Camara2 e clique no botão OK;

Ao clicar no botão OK, será criada uma solução contendo 4 projetos. (Dependendo do seu ambiente pode haver alguma variação nos projetos.)

O projeto comum possui a classe App.cs que irá conter o código compartilhado e que vamos usar neste artigo.

Ao final teremos as referências incluídas em todos os projetos da nossa solução.

Selecione o projeto e a seguir clique no menu Project e em Add New Item;

Selecione Cross Platform e o template Forms Xaml Page e informe o nome CameraPage.xaml:

Esta será a página principal da nossa aplicação.

Então vamos abrir o arquivo App.cs e alterar o código conforme abaixo:

using Xamarin.Forms;
namespace XF_Bindable_Spinner
{
    public class App : Application
    {
        public App()
        {
            MainPage = new NavigationPage(new CameraPage());
        }
        protected override void OnStart()
        {
            // Handle when your app starts
        }
        protected override void OnSleep()
        {
            // Handle when your app sleeps
        }
        protected override void OnResume()
        {
            // Handle when your app resumes
        }
    }
}

Definindo o código da página CameraPage

Abra o arquivo CameraPage.xaml e inclua uma view ImageView e duas views Buttons definindo em cada um um evento Clicked a partir do qual iremos tirar a foto e selecionar uma imagem:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XF_Camera2.CameraPage"
             Title="Usar Câmera">

    <StackLayout>
        <Image x:Name="imgFoto"/>
        <Button Text="Tirar Foto" Clicked="Button_Clicked"/>
        <Button x:Name="btnSelecionarImagem" Text="Selecionar uma imagem" Clicked="btnSelecionarImagem_Clicked"/>
    </StackLayout>
   

</ContentPage>

Agora abra o arquivo CameraPage.xaml.cs e defina o código para os eventos de cada um dos Buttons:

using Plugin.Media;
using Plugin.Media.Abstractions;
using System;
using Xamarin.Forms;
namespace XF_Camera2
{
    public partial class CameraPage : ContentPage
    {
        public CameraPage()
        {
            InitializeComponent();
        }
        private async void Button_Clicked(object sender, EventArgs e)
        {
            if (!CrossMedia.Current.IsCameraAvailable || !CrossMedia.Current.IsTakePhotoSupported)
            {
                await DisplayAlert("Nenhuma Câmera", ":( Nenuma Câmera disponível.", "OK");
                return;
            }

            var armazenamento = new StoreCameraMediaOptions()
            {
                SaveToAlbum = true,
                Name = "MinhaFoto.jpg"
            };
            var foto = await CrossMedia.Current.TakePhotoAsync(armazenamento);

             if (foto == null)
                   return;
            imgFoto.Source = ImageSource.FromStream(() =>
            {
                var stream = foto.GetStream();
                foto.Dispose();
                return stream;
            });
        }
        private async void btnSelecionarImagem_Clicked(object sender, EventArgs e)
        {
            if(CrossMedia.Current.IsTakePhotoSupported)
            {
                var imagem = await CrossMedia.Current.PickPhotoAsync();
                if(imagem !=null)
                {
                    imgFoto.Source = ImageSource.FromStream(() =>
                    {
                        var stream = imagem.GetStream();
                        imagem.Dispose();
                        return stream;
                    });
                }
            }
        }
    }
}

Vamos entender o código :

1- Primeiro verificamos se o dispositivo possui uma câmera disponível usando os métodos IsCameraAvailable e IsTakePhotoSupported:

            if (!CrossMedia.Current.IsCameraAvailable || !CrossMedia.Current.IsTakePhotoSupported)
            {
                await DisplayAlert("Nenhuma Câmera", ":( Nenuma Câmera disponível.", "OK");
                return;
            }

2-  A seguir definimos as opções de armazenamento como local e nome da imagem:

            var armazenamento = new StoreCameraMediaOptions()
            {
                SaveToAlbum = true,
                Name = "MinhaFoto.jpg"
            };

3- Finalmente tiramos a foto e verificamos se a foto não é null para obter o resultado e armazenar na propriedade ImageSource da view ImageView:

             var foto = await CrossMedia.Current.TakePhotoAsync(armazenamento);

             if (foto == null)
                   return;
            imgFoto.Source = ImageSource.FromStream(() =>
            {
                var stream = foto.GetStream();
                foto.Dispose();
                return stream;
            });

4- No evento Click do botão - Selecionar Imagem - usamos o método PickPhotoAsycn() para obter uma imagem suporta exibindo-a no ImageView.

private async void btnSelecionarImagem_Clicked(object sender, EventArgs e)
{
    if(CrossMedia.Current.IsTakePhotoSupported)
    {
        var imagem = await CrossMedia.Current.PickPhotoAsync();
        if(imagem !=null)
        {
             imgFoto.Source = ImageSource.FromStream(() =>
             {
                  var stream = imagem.GetStream();
                   imagem.Dispose();
                   return stream;
              });
        }
     }
}

Um último detalhe a ser observado para quem vai fazer o deploy no Android é definir as seguintes permissões no arquivo AssemblyInfo.cs:

[assembly: UsesPermission(Android.Manifest.Permission.Camera)]
[assembly: UsesPermission(Android.Manifest.Permission.ReadExternalStorage)]

Após isso , excutando o projeto e fazendo a emulação no dispostivo físico usando o Vysor iremos obter o seguinte resultado:

Nota: Para saber como usar o seu dispositivo físico usando o Vysor leia este artigo : Veja como emular usando o Vysor - Macoratti

Obs: Eu estou usando um Alcatel PIXI 4 (lembre-se de instalar o driver adb para fazer a ponte entre o Windows e o

Na opção para Selecionar uma imagem, escolhemos o local de onde vamos obter a imagem para exibí-la no ImageView:

Nesta abordagem o deploy do seu aplicativo Xamarin Forms será feito no dispositivo conforme mostra a figura abaixo:

Existem muitos outros recursos que o plugin oferece. Consulte a documentação e incremente a aplicação com mais recursos.

Pegue o projeto aqui :   XF_Camera2.zip (sem as referências)

Respondeu Jesus, e disse-lhes: Ainda que eu testifico de mim mesmo, o meu testemunho é verdadeiro, porque sei de onde vim, e para onde vou; mas vós não sabeis de onde venho, nem para onde vou.
Vós julgais segundo a carne; eu a ninguém julgo.
E, se na verdade julgo, o meu juízo é verdadeiro, porque não sou eu só, mas eu e o Pai que me enviou.
 João 8:14-16

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

Referências:

José Carlos Macoratti