O documento discute o uso de várias APIs do HTML5 para acessar sensores e dispositivos do navegador e do dispositivo móvel, incluindo acelerômetro, geolocalização, câmera, microfone. Fornece exemplos de código para detectar suporte, obter permissão do usuário e lidar com eventos para cada API.

1. @almirfilho
@caio_gondim
@loopinfinito

2. HTML5Sensitivo
Seubrowser+LSD

3. Acessoa
dispositivos

4. APIsdoAlém

5. APIsdoAlém
Acelerômetro

6. APIsdoAlém
Acelerômetro
Geolocalização

7. APIsdoAlém
Acelerômetro
Geolocalização
Câmera

8. APIsdoAlém
Acelerômetro
Geolocalização
Câmera
Microfone

9. @caio_gondim
@almirfilho

10. @loopinfinito

11. loopinfinito.com.br

12. APIsdoAlém
Acelerômetro
Geolocalização
Câmera
Microfone

13. Acelerômetro

14. Orientação
&
Aceleração

15. Sistemade
Coordenadas

16. y
Sistemade
Coordenadas

17. y
x
Sistemade
Coordenadas

18. z
y
x
Sistemade
Coordenadas

19. Rotação
z
y
x

20. Rotação
alpha
z
y
x

21. Rotação
z
y
x
beta

22. Rotação
z
y
x
gamma

23. API

24. API
DeviceOrientationEvent
DeviceMotionEvent

25. Orientação
DeviceOrientationEvent

26. Obtéma
Rotaçãodoseixos

27. zyx
Obtéma
Rotaçãodoseixos

28. zyx
gammabeta alpha
Obtéma
Rotaçãodoseixos

29. emgraus
gammabeta alpha

30. z
alpha = 0º

31. z
alpha = 25º

32. x
beta = 0º

33. x
beta = 30º

34. y
gamma = 0º

35. y
gamma = 45º

36. JavaScript
porfavor!

37. if( window.DeviceOrientationEvent != undefined ){
// suporte garantido =)
}
Testeosuporte

38. window.addEventListener( ‘deviceorientation’,
function( eventData ){
// faça acontecer
}
)
Trateoevento

39. eventData = {
alpha: 0.01042012, // graus
beta: 11.34221344, // graus
gamma: 27.102012102, // graus
absolute: true,
... // propriedades de Event
}
Dadosde
deviceorientation

40. Aceleração
DeviceMotionEvent

41. Obtémdados
sobremovimentos
físicosemcadaeixo

42. Obtémdados
sobremovimentos
físicosemcadaeixo
zyx

43. zyx
emm/s²

44. if( window.DeviceMotionEvent != undefined ){
// suporte garantido =)
}
Testeosuporte

45. window.addEventListener( ‘devicemotion’,
function( eventData ){
// faça acontecer
}
)
Trateoevento

46. eventData = {
interval: 200, // milisegundos
acceleration: {
x: 0.1534532, // metro/s²
y: 3.9876581, // metro/s²
z: 1.0092722 // metro/s²
},
accelerationIncludingGravity: { x, y, z }, // idem
rotationRate: { alpha, beta, gamma } // orientation
... // propriedades de Event
}
Dadosdedevicemotion

47. DEMO

48. almirfilho.github.com/cilada

49. SuporteDesktop

50. SuporteDesktop
7 6
(parcial)(parcial)

51. SuporteMobile

52. SuporteMobile
184.2
3.012 10
15

53. Geolocalização
Acelerômetro
APIsdoAlém
Câmera
Microfone

54. Geolocalização

55. Posiçãoemrelaçãoa
superfíciedoplaneta

56. serviçosdemapas
redessociais
aplicaçõese-gov
Quemusa?

57. Localização=Contexto

58. Localização=Contexto
Maiorrelevância

59. Busca
&
Recomendação
maiseficazes

60. Obtendoa
Geolocalização
DesktopxMóvel

61. Desktop
Posição
Localização
fixa
aproximada

62. Móvel
Posição
Localização
variável
maisexata

63. API

64. API
navigator.geolocation

65. if( navigator.geolocation != undefined ){
// suporte garantido =)
}
Testeosuporte

66. // requisitando geolocalização
navigator.geolocation.getCurrentPosition( showMap )
// setando o callback
function showMap( position ){
// só alegria
}
Definaocallback

67. Dadosde.getCurrentPosition
position = {
timestamp: 307770135, // DOMTimeStamp
coords: {
accuracy: 12, // metros
latitude: -35.29873363499, // graus
longitude: 123.44334887755,// graus
altitude: 400.3, // metros (opcional)
heading: 45.5, // graus (opcional)
speed: 5.4 // m/s (opcional)
}
}

68. DEMO

69. almirfilho.github.com/fulltheface

70. SuporteDesktop

71. SuporteDesktop
5 3.5
9
5
10.6

72. SuporteMobile

73. SuporteMobile
183.2
2.111 7
15

74. Geolocalização
Acelerômetro
APIsdoAlém
Câmera
Microfone

75. Câmera

76. WebRTC

77. WebRTC
Real-Time
Communications

78. API

79. API
Stream
Media Capture

80. API
Stream

81. Stream
input
<video>
MediaStream
MediaStream
Track
video
MediaStream
Track
audio
PeerConection

82. API
Media Capture

83. // sem prefixos dos vendors
if ( navigator.getUserMedia ){
// câmera, ação!
}
Testeosuporte

84. navigator.getUserMedia(
{ video: true },
sucessoCallback,
falhaCallback
)
Permissão

86. function sucessoCallback(stream) {
var video = document.getElementsByTagName(‘video’)[0]
video.autoplay = true
video.src = window.webkitURL.createObjectURL(stream)
}
Linkandono
<video>

87. Mixcom
<canvas>

88. Mixcom
WebGL

89. DEMO

90. caiogondim.github.com/webpix

91. SuporteDesktop

92. SuporteDesktop
21
12.0

93. SuporteMobile

94. SuporteMobile

95. Câmera
Geolocalização
Acelerômetro
APIsdoAlém
Microfone

96. Microfone

97. API

98. API
Web Speech
Media Capture

99. Web Speech
Reconhecimento
&Síntese
devoz

101. Reconhecimento
devoz

103. Síntesedevoz

104. if ( document.createElement( ‘input’ ).webkitSpeech != undefined )
{
// suporte garantido =)
}
Testeosuporte

105. <input type=”text” x-webkit-speech />
MarcaçãoHTML

109. { }

110. document
.getElementsByTagName( ‘input’ )[0]
.addEventListener( ‘webkitspeechchange’,
function( eventData ){
// sua mágica
}
)
Evento

111. eventData = {
results: [
{
confidence: 0.61285305,
utterance: ‘praia’
},
...
],
... // propriedades de Event
}
Dadosde
webkitspeechange

112. DEMO

113. caiogondim.github.com/hal

114. SuporteDesktop

115. SuporteDesktop
22*

116. Capturade
Áudio
Media Capture

117. Baixo
Nível

118. Baixa
Latência

119. Guitarra
Micexterno
...

120. // sem prefixos dos vendors
if ( navigator.getUserMedia ){
// we got it!
}
Testeosuporte

121. navigator.getUserMedia(
{ audio: true },
sucessoCallback,
falhaCallback
)
Permissão

123. Mixcom
WebAudio

124. function sucessoCallback( stream ) {
var context = new webkitAudioContext()
var mediaStreamSource = context
.createMediaStreamSource( stream )
mediaStreamSource.connect( filter1 )
...
filter1.connect( context.destination )
}
Callback

125. DEMO

126. SuporteDesktop

127. SuporteDesktop
216

128. SuporteMobile

129. SuporteMobile
6

130. Câmera
Geolocalização
Acelerômetro
APIsdoAlém
Microfone

132. ?

133. @loopinfinito
@almirfilho
@caio_gondim

134. Obrigado!

135. Estetrabalhoélicenciadopela
CreativeCommons
http://creativecommons.org.br/as-licencas/