1. O documento descreve como capturar mídia como áudio, imagens e vídeo usando a API PhoneGap no dispositivo móvel. 2. É explicado como iniciar a gravação de áudio e vídeo ou tirar fotos usando as aplicações nativas do dispositivo. 3. Os resultados da captura são retornados como objetos MediaFile contendo propriedades sobre os arquivos de mídia.

1. Projetando
Mobile
PhoneGAP
-­‐
Parte
2
!
By
Igor
Portela

2. 04/04/14 ‹#›
Quem sou eu?
• Especialista em Mobilidade e Sistemas Embarcados –
Estácio de Sá
• Certificado LPIC1 (Linux Professional Institute Certified),
• CLA (Novell Certified Linux Administrator),
• Novell Datacenter Technical Specialist.
• CEO e fundador da Wake Up Digital.
• Palestrante IEEE e Google I/O Extend
• Curador do Startup Genome João Pessoa
• Organizador de dois Startups Weekends

3. Sumário
MEDIA
CAPTURE
CAMERA
CONTACTS
EVENTS
NOTIFICATIONS
ACCELEROMETER
!

4. 04/04/14 ‹#›
MEDIA
CAPTURE
navigator.device.capture
!
PROVER
ACESSO
PARA
CAPTURAR
!
AUDIO
IMAGE
VIDEO
!
DIRETAMENTE
DO
DISPOSITIVO
!

5. MEDIA
CAPTURE
navigator.device.capture
!
!
!
!
!
!
!
!
!
Todos
contém
um
array
do
objeto
ConfigurationData

6. CONFIGURATION
DATA
É
USADO
PARA
DESCREVER
O
MEDIA
CAPTURE
MODES
SUPORTADO
PELO
DISPOSITIVO
!
PROPRIEDADES
!
1.
TYPE:
STRING
!
É
representado
em
minúsculo
no
tipo
de
mídia
!
-­‐
video/3gpp
-­‐
audio/amr
-­‐
video/quicktime
-­‐
audio/war
-­‐
image/jpeg

7. CONFIGURATION
DATA
2.
HEIGHT:
integer
A
altura
da
imagem
ou
vídeo
em
pixels
!
3.
WIDTH:
integer
A
largura
da
imagem
ou
vídeo
em
pixels
!
No
caso
de
audio,
é
colocado
o
valor
0
para
esses
atributos.

8. EXEMPLO

9. CAPTURING
AUDIO
É
chamado
no
objeto
capture
!
!
!
!
!
!
!
Comece
a
gravar
o
audio
em
uma
aplicação
e
retorne
a
informação
sobre
o
arquivo
de
áudio
capturado.
!

10. !10
CAPTURING
AUDIO
Começa
com
uma
operação
assíncrona
para
capturar
chamadas
de
áudio
!
Usa
o
aplicativo
de
gravação
de
áudio
padrão
do
dispositivo
!
A
operação
permite
que
o
usuário
do
dispositivo
grave
múltiplos
áudios

11. CAPTURING
AUDIO
Quando
a
operação
de
captura
é
finalizada,
chama-­‐
se
o
CaptureCB,
callback
com
um
array
de
objetos
MediaFile
!
Se
a
operação
for
terminada
pelo
usuário
ante
do
audio
ser
capturado
por
completo,
o
CaptureErrorCB
vai
ser
chamado

12. CAPTURE
AUDIO
OPTIONS
Propriedades:
!
Limit
(Não
suportada
no
IOS
=>
apenas
uma
gravação
por
vez)
!
O
máximo
que
o
usuário
pode
gravar
em
apenas
uma
operação
!
Duration
(Não
suportada
no
Android
=>
ilimitado)
A
máxima
duração
do
áudio,
em
segundos.

13. EXEMPLO
AUDIO

14. CAPTURANDO
IMAGENS
É
chamado
no
objeto
capture
!
Inicia
a
aplicação
da
câmera
e
retorna
a
informação
sobre
a
imagem
capturada.
!

15. Começa
com
uma
operação
assíncrona
para
capturar
imagens
!
Usa
a
aplicação
de
câmera
do
dispositivo
!
A
operação
permite
que
o
usuário
do
dispositivo
grave
múltiplas
images
em
uma
única
sessão.
CAPTURANDO
IMAGENS

16. CAPTURANDO
IMAGENS
Quando
a
operação
de
captura
é
finalizada,
chama-­‐
se
o
CaptureCB,
callback
com
um
array
de
objetos
MediaFile
!
Se
a
operação
for
terminada
pelo
usuário
ante
do
audio
ser
capturado
por
completo,
o
CaptureErrorCB
vai
ser
chamado

17. Propriedades:
!
Limit
(Não
suportada
no
IOS
=>
apenas
uma
gravação
por
vez)
!
O
máximo
que
o
usuário
pode
gravar
em
apenas
uma
operação
!
CAPTURANDO
IMAGENS

18. EXEMPLO
DE
IMAGEM

19. GRAVANDO
VÍDEOS
É
chamado
no
objeto
Capture
!
Inicia
a
aplicação
da
gravar
vídeo
e
retorna
a
informação
sobre
o
vídeo
capturado.

20. Começa
com
uma
operação
assíncrona
para
gravar
vídeos
!
Usa
a
aplicação
de
gravação
de
vídeos
!
A
operação
permite
que
o
usuário
do
dispositivo
grave
múltiplos
vídeos
em
uma
única
sessão.
GRAVANDO
VÍDEOS

21. Quando
a
operação
de
captura
é
finalizada,
chama-­‐
se
o
CaptureCB,
callback
com
um
array
de
objetos
MediaFile
!
Se
a
operação
for
terminada
pelo
usuário
ante
do
audio
ser
capturado
por
completo,
o
CaptureErrorCB
vai
ser
chamado
GRAVANDO
VÍDEOS

22. GRAVANDO
VÍDEOS
Propriedades:
!
Limit
(Não
suportada
no
IOS
=>
apenas
um
vídeo
por
vez)
!
O
máximo
de
vídeos
que
o
usuário
pode
gravar
em
apenas
uma
operação.
!
Duration
-­‐
ilimitado
no
Android
e
IOS

23. EXEMPLO
-­‐
GRAVANDO
VÍDEOS

24. MediaFile
encapsula
propriedades
dos
arquivos
de
mídia
capturados
!
Propriedades
MEDIA
FILE

25. Sumário
MEDIA
CAPTURE
CAMERA
CONTACTS
EVENTS
NOTIFICATIONS
ACCELEROMETER

26. API
dedicada
para
capturar
imagens
da
aplicação
padrão
da
câmera
do
dispositivo
CAMERA
Tire
a
foto
a
câmera
ou
utilize
uma
foto
do
album
do
dispositivo

27. O
resultado
da
chamada
getPicture()
pode
ser:
!
-­‐ uma
string
base64
encoded
-­‐ a
URI
do
arquivo
da
imagem
!
É
recomendado
usar
a
URI,
pois
o
base64
pode
causar
problemas
na
utilização
da
memória
em
alguns
dispositivos
CAMERA

28. getPicture()
pode
ser
chamada
com
as
seguintes
opções
OPÇÕES
DA
CÂMERA

29. quality
(integer)
Qualidade
da
imagem
salva
Range[0,100]
!
destinationType(integer)
OPÇÕES
DA
CÂMERA

30. 04/04/14 ‹#›
sourceType
(integer)
allowEdit
(boolean)
Permite
uma
simples
edição
da
imagem
antes
da
seleção
OPÇÕES
DA
CÂMERA

31. 04/04/14 ‹#›
encodingType
(integer)
targetWidth,
targetHeight
(integer)
Largura
e
altura
em
pixels
OPÇÕES
DA
CÂMERA

32. mediaType
(integer)
correctOrientation
(boolean)
Rotacionar
a
imagem
para
a
orientação
correta
do
dispositivo
durante
a
captura
OPÇÕES
DA
CÂMERA

33. saveToPhotoAlbum
(boolean)
Salvar
a
imagem
para
o
album
de
fotos
no
dispositivo
após
a
captura
popoverOptions
(Object)
Apenas
no
iPad
OPÇÕES
DA
CÂMERA

34. 04/04/14 ‹#›
cameraDirection
(integer)
Escolher
se
a
imagem
será
da
câmera
da
frente
ou
de
trás
do
dispositivo
OPÇÕES
DA
CÂMERA

35. EXEMPLO
DA
CÂMERA

36. Sumário
MEDIA
CAPTURE
CAMERA
CONTACTS
EVENTS
NOTIFICATIONS
ACCELEROMETER

37. navigator.contacts
CONTATO
Objeto
global
que
prover
acesso
para
os
contatos
do
dispositivo
!
Você
pode
chamar
dois
métodos
no
navigator.contacts
!
-­‐ contacts.create
-­‐ contacts.find

38. CRIANDO
CONTATO
navigator.contacts.create(properties)
É
uma
função
síncrona
que
retorna
um
novo
objeto
Contato
!
Para
persistir
o
Contato
objeto
para
o
dispositivo,
você
tem
que
chamar
o
método
Contacts.save

39. OBJETO
CONTATO
O
parâmetro
properties
é
um
mapa
de
propriedades
do
novo
objeto
Contato
navigator.contacts.create(properties)

40. 04/04/14 ‹#›
CRIANDO
CONTATO
navigator.contacts.create(properties)
Um
contato
pode
ser
criado,
editado
ou
removido
do
banco
de
dados
de
contato
do
dispositivo
!
O
método
contacts.find
é
usado
para
consultar
um
ou
mais
Contatos
do
banco
de
dados
de
contato
do
dispositivo

41. As
propriedades
que
um
contato
pode
ter:
PROPRIEDADES
DO
CONTATO

42. MÉTODOS
DO
CONTATO
Clone()
!
!
Remove(win,
fail)
!
!
Save(win,
fail)

43. EXEMPLO
DO
CONTATO

44. Encontrando
CONTATOS
Função
assíncrona
que
retorna
um
Array
de
Contatos

45. 04/04/14 ‹#›
contactFields(String)
!
contactSuccess(win,
fail)
!
contactError[optional]
!
contactFindOptions[Optional]
CONTATOS
-­‐
Parâmetros
do
FIND

46. Especifique
os
campos
que
você
quer
incluir
CONTATOS
-­‐
Campos

47. CONTATOS
-­‐
Opções
do
FIND
Filtrar
resultados
filter(String)
-­‐
default
-­‐
''
!
multiple(Boolean)
-­‐
default:
false

48. Exemplo
-­‐
CONTATOS
-­‐
FIND
Como
funciona?

49. CONTATOS
-­‐
ERRO
Sempre
vai
acontecer
um
erro
quando?

50. Sumário
MEDIA
CAPTURE
CAMERA
CONTACTS
EVENTS
NOTIFICATIONS
ACCELEROMETER

51. EVENTOS
Uma
evento
é
uma
ação
que
pode
ser
detectada
pelo
código
JS
!
onclick
ontouchstart
onLoad
…

52. EVENTOSEVENTOS
Para
usar
um
elemento,
você
vai
querer
um
event
listener

53. EVENTOS
-­‐
MAIN
CORDOVA

54. EVENTOS
-­‐
DEVICEREADY
É
o
evento
mais
importante
da
app
Cordova.
!
Cordova
consistem
em
duas
bases
de
códigos:
-­‐ Nativo
-­‐ JS
!
Significa
que:
-­‐
O
DOM
foi
carregado
-­‐
A
API
nativa
cordova
também
foi
carregada.

55. CICLO
DE
VIDA
DE
EVENTOS
NO
APP
Baseado
em
dois
eventos
principais:
!
pause
!
resume

56. EVENTOS
DE
CONEXÃO
Baseado
em
dois
eventos
principais:
!
online
!
offline

57. CONEXÃO
Objeto:
navigator.network.connection

58. EVENTOS
DE
BATERIA
!58
Três
eventos
principais
!
batterycritical
!
batterylow
!
batterystatus

59. !59
EVENTOS
DE
BATERIA
Três
eventos
principais
!
level(Integer)
!
isPlugged(Boolean)
!
!

60. Eventos
de
butões
no
Android
!60
backbutton
!
menubutton
!
searchbutton

61. !61
Sumário
MEDIA
CAPTURE
CAMERA
CONTACTS
EVENTS
NOTIFICATIONS
ACCELEROMETER

62. NOTIFICATIONS
!62
Prover
feedback
para
o
usuário
!
Alert
Confirm
Prompt
Beep
Vibrate

63. ALERT
!63
!
!
Mostre
uma
mensagem
personalizada:
!

64. CONFIRM
!64
Parecido
com
o
alert,
para
personalizar

65. PROMPT
!65
Parecido
com
o
confirm,
para
personalizar

66. BEEP
!66
Som
de
BEEP
times:
o
número
de
vezes
que
repete
o
beep

67. Vibração
Vibra
o
dispositivo
milliseconds:
duração

68. MEDIA
CAPTURE
CAMERA
CONTACTS
EVENTS
NOTIFICATIONS
ACCELEROMETER
Sumário

69. Acelerômetro
!69
Captura
o
movimento
do
aparelho
nas
três
dimensões,
x,y
e
z

70. getCurrentAcceleration
!70
win
!
fail

71. !71
watchAcceleration
win
!
fail
!
options

72. !72
clearAcceleration

73. Exemplo
-­‐
Acelerômetro
!73

74. Snake
Detection
!74

75. FIM