Usando a câmera do DM

Report
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

similar documents