Usando a câmera do DM
Download
Report
Transcript Usando a câmera do DM
PROGRAMAÇÃO PARA DISPOSITIVOS
MÓVEIS
- USANDO A CÂMERA
Prof. Angelo Augusto Frozza, M.Sc.
http://about.me/TilFrozza
ROTEIRO
Introdução
API de Câmera do PhoneGap
Atividade prática
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
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*)
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.
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).
API DE CÂMERA DO PHONEGAP
Capturar fotos
Camera.getPicture(onCaptureSuccess,
onCaptureError, [cameraOptions])
Parâmetros
(*):
(*) OBSERVAÇÃO:
As configurações dependem do suporte fornecido por
cada DM.
onCaptureSucess – função callback que fornece a imagem
onCapureError – função callback que fornece uma mensagem de erro
Caso o DM não suporte determinada configuração, ela
cameraOptions – parâmetros
opcionais
para customizar a
será
ignorada.
configuração da câmera (quality, destinationType,
sourceType, allowEdit, encondingType, targetWidth, targetHeight,
mediaType, correctOrientation, saveToPhotoAlbum, popoverOptions).
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.
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.
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
a)
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).
ATIVIDADE PRÁTICA
b)
Seguir um dos tutoriais indicados
Exemplo de API de Câmera do PhoneGap*
http://software.intel.com/pt-br/articles/phonegap-camera-api-capture-a-photousing-a-device-camera-and-edit-zoom-and-crop-the
PhoneGap – API Reference – Camera
http://docs.phonegap.com/en/2.7.0/cordova_camera_camera.md.html#Camera
ATIVIDADE PRÁTICA
Criar uma aplicação própria
c)
Por exemplo:
O espelho
Salvar e visualizar fotos de imóveis
App apenas para acessar a câmera (sem fim específico)
REFERÊNCIAS PARA CONSULTA
Exemplo de API de Câmera do PhoneGap*
http://software.intel.com/pt-br/articles/phonegap-camera-api-capture-aphoto-using-a-device-camera-and-edit-zoom-and-crop-the
PhoneGap – API Reference – Camera
http://docs.phonegap.com/en/2.7.0/cordova_camera_camera.md.html#
Camera
Como rodar programas do Android no Windows
http://www.tecmundo.com.br/android/14479-como-rodar-programas-doandroid-no-windows.htm
REFERÊNCIAS PARA CONSULTA
Guia: Emulando Android no Windows (2.3/3.0/4.0/4.2)
http://wavegamer.wordpress.com/2013/01/07/guia-de-configuracaoemulando-android-2-33-04-04-2-no-windows/
Aprenda a rodar o emulador do Android no Windows
http://www.superdownloads.com.br/materias/aprenda-rodar-emuladordo-android-no-windows.html
MobiWiki
http://pt-br.mobi.wikia.com/wiki/MobiWiki
REFERÊNCIAS PARA CONSULTA
Instalando PhoneGap com Eclipse IDE: preparando o
ambiente para programação Android no Windows
http://www.fredericomarinho.com/instalando-phonegap-com-eclipseide-preparando-o-ambiente-para-programacao-android/
Getting started with PhoneGap in Eclipse for Android
http://www.adobe.com/devnet/html5/articles/getting-started-withphonegap-in-eclipse-for-android.html
Apache Cordova
http://cordova.apache.org
REFERÊNCIA DO PROFESSOR
Exemplo Aula011-Camerab
https://github.com/aafrozza/aula011-Camerab/tree/master