Programação para Dispositivos Móveis - Usando a Câmera

Apresentação em tema: "Programação para Dispositivos Móveis - Usando a Câmera"— Transcrição da apresentação:

1 Programação para Dispositivos Móveis - Usando a Câmera
Prof. Angelo Augusto Frozza, M.Sc.

2 Roteiro Introdução API de Câmera do PhoneGap Atividade prática

3 Introdução Para adicionar o suporte a Câmera fotográfica no app HTML 5 híbrido é necessário usar a API específica do PhoneGap. API de Câmera do PhoneGap Recursos possíveis: Tirar fotos com a Câmera Utilizar fotos armazenadas em um álbum de fotos no DM Alterar diversas configurações

4 Introdução O que é necessário para a app: Código HTML 5
JQuery Mobile (3 arquivos) API de Camera do PhoneGap (cordova.x.x.x.js) Para testar: Armazenar o código no GitHub Gerar o app com o PhoneGap Build Testar o app em um DM (ou em um emulador*)

5 API de Câmera do PhoneGap
Capturar fotos Usar o método para capturar fotos ou recuperar uma foto de um álbum do DM Camera.getPicture(onCaptureSuccess, onCaptureError, [cameraOptions]) A imagem é retornada como uma String base64 encoded ou como a URI para um arquivo de imagem.

6 API de Câmera do PhoneGap
Capturar fotos Camera.getPicture(onCaptureSuccess, onCaptureError, [cameraOptions]) Parâmetros (*): onCaptureSucess – função callback que fornece a imagem onCapureError – função callback que fornece uma mensagem de erro cameraOptions – parâmetros opcionais para customizar a configuração da câmera (quality, destinationType, sourceType, allowEdit, encondingType, targetWidth, targetHeight, mediaType, correctOrientation, saveToPhotoAlbum, popoverOptions).

7 API de Câmera do PhoneGap
Capturar fotos Camera.getPicture(onCaptureSuccess, onCaptureError, [cameraOptions]) Parâmetros (*): onCaptureSucess – função callback que fornece a imagem onCapureError – função callback que fornece uma mensagem de erro cameraOptions – parâmetros opcionais para customizar a configuração da câmera (quality, destinationType, sourceType, allowEdit, encondingType, targetWidth, targetHeight, mediaType, correctOrientation, saveToPhotoAlbum, popoverOptions). (*) OBSERVAÇÃO: As configurações dependem do suporte fornecido por cada DM. Caso o DM não suporte determinada configuração, ela será ignorada.

8 API de Câmera do PhoneGap
Capturar fotos Especificamente para iOS, usar o método Camera.cleanup(onSuccess, onError) para remover arquivos temporários criados pela aplicação.

9 API de Câmera do PhoneGap
Capturar fotos Observações: A qualidade de imagem das fotos tiradas com a câmera em DM mais novos é muito boa; As imagens do álbum de fotos não serão alteradas a uma qualidade inferior, mesmo se um parâmetro de qualidade é especificado; Codificar imagens usando Base64 tem causado problemas de memória em alguns DM (iPhone 4, BlackBerry Torch 9800) Portanto, é altamente recomendável utilizar 'Camera.destinationType‘ = FILE_URI.

10 Atividade prática Criar um app HTML 5 que utilize os recursos da Câmera do DM. Para realizar esta atividade você deve: Preparar o ambiente para testes Identificar e instalar um emulador de Android no computador. P.ex.: YouWave - emula de modo bastante preciso todo o universo do Android SDK Android – permite emular todas as versões do Android; BlueStacks - apenas emula aplicativos do Android; WindowsAndroid - transforma o computador em um aparelho Android quase completo; Fazer um pequeno relato sobre os emuladores testados EXTRA: encontrar emulador para outras plataformas (WP, iOS).

11 Atividade prática Seguir um dos tutoriais indicados
Exemplo de API de Câmera do PhoneGap* PhoneGap – API Reference – Camera

12 Atividade prática Criar uma aplicação própria Por exemplo: O espelho
Salvar e visualizar fotos de imóveis App apenas para acessar a câmera (sem fim específico)

13 Referências para consulta
Exemplo de API de Câmera do PhoneGap* photo-using-a-device-camera-and-edit-zoom-and-crop-the PhoneGap – API Reference – Camera Camera Como rodar programas do Android no Windows android-no-windows.htm

14 Referências para consulta
Guia: Emulando Android no Windows (2.3/3.0/4.0/4.2) emulando-android no-windows/ Aprenda a rodar o emulador do Android no Windows do-android-no-windows.html MobiWiki

15 Referências para consulta
Instalando PhoneGap com Eclipse IDE: preparando o ambiente para programação Android no Windows ide-preparando-o-ambiente-para-programacao-android/ Getting started with PhoneGap in Eclipse for Android phonegap-in-eclipse-for-android.html Apache Cordova

16 Referência do professor
Exemplo Aula011-Camerab