O navegador está cada vez mais sensível ao seus arredores. Explorando todos os novos sensores disponíveis no HTML5 – acelerômetro, geolocalização, câmera e microfone – vamos acessar todas as APIs do aqui e do além.

1. @almirfilho
@caio_gondim
@loopinfinito

2. HTML5 Sensitivo
Seu browser + LSD

3. Acesso a
dispositivos

4. APIs do Além

5. APIs do Além
Acelerômetro

6. APIs do Além
Acelerômetro
Geolocalização

7. APIs do Além
Acelerômetro
Geolocalização
Câmera

8. APIs do Além
Acelerômetro
Geolocalização
Câmera
Microfone

9. @caio_gondim
@almirfilho

10. @loopinfinito

11. loopinfinito.com.br

12. APIs do Além
Acelerômetro
Geolocalização
Câmera
Microfone

13. Acelerômetro

14. Orientação
&
Aceleração

15. Sistema de
Coordenadas

16. y
Sistema de
Coordenadas

17. y
x
Sistema de
Coordenadas

18. z y
x
Sistema de
Coordenadas

19. Rotação z y
x

20. Rotação
z y
alpha
x

21. Rotação z y
x
beta

22. Rotação z y
gamma
x

23. API

24. API
DeviceOrientationEvent
DeviceMotionEvent

25. Orientação
DeviceOrientationEvent

26. Obtém a
Rotação dos eixos

27. Obtém a
Rotação dos eixos
x y z

28. Obtém a
Rotação dos eixos
x y z
beta gamma alpha

29. beta gamma alpha
em graus

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
por favor!

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

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

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

40. Aceleração
DeviceMotionEvent

41. Obtém dados
sobre movimentos
físicos em cada eixo

42. Obtém dados
sobre movimentos
físicos em cada eixo
x y z

43. x y z
em m/s²

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

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

46. Dados de devicemotion
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
}

47. DEMO

48. Suporte Desktop

49. Suporte Desktop
7 6
(parcial) (parcial)

50. Suporte Mobile

51. Suporte Mobile
4.2 18
15
12 3.0 10

52. APIs do Além
Acelerômetro
Geolocalização
Câmera
Microfone

53. Geolocalização

54. Posição em relação a
superfície do planeta

55. Quem usa?
serviços de mapas
redes sociais
aplicações e-gov

56. Localização = Contexto

57. Localização = Contexto
Maior relevância

58. Busca
&
Recomendação
mais eficazes

59. Obtendo a
Geolocalização
Desktop x Móvel

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

61. Móvel
Posição
Localização
variável
mais exata

62. API

63. API
navigator.geolocation

64. if( navigator.geolocation != undefined ){
// suporte garantido =)
}
Teste o suporte

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

66. Dados de .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)
}
}

67. DEMO

68. Suporte Desktop

69. Suporte Desktop
5 3.5
9
5
10.6

70. Suporte Mobile

71. Suporte Mobile
3.2 18
15
11 2.1 7

72. API’s do Além
Acelerômetro
Geolocalização
Câmera
Microfone

73. Câmera

74. WebRTC

75. WebRTC
Real-Time
Communications

76. API

77. API
Stream
Media Capture

78. API
Stream

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

80. API
Media Capture

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

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

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

85. Mix com
<canvas>

86. Mix com
WebGL

87. DEMO

88. APIs do Além
Acelerômetro
Geolocalização
Câmera
Microfone

89. Suporte Desktop

90. Suporte Desktop
6 21

91. Suporte Mobile

92. Suporte Mobile
6

93. Microfone

94. API

95. API
Web Speech
Media Capture

96. Reconhecimento
& Síntese
de voz
Web Speech

98. Reconhecimento
de voz

100. Síntese de voz

101. Teste o suporte
if ( document.createElement( ‘input’ ).webkitSpeech != undefined )
{
// suporte garantido =)
}

102. Marcação HTML
<input type=”text” x-webkit-speech />

106. { }

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

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

109. DEMO

110. Suporte Desktop

111. Suporte Desktop
22*

112. Captura de
Áudio
Media Capture

113. Baixo
Nível

114. Baixa
Latência

115. Guitarra
Mic externo
...

116. // sem prefixos dos vendors
if ( navigator.getUserMedia ){
// we got it!
}
Teste o suporte

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

119. Mix com
Web Audio

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

121. DEMO

122. Suporte Desktop

123. Suporte Desktop
6 21

124. Suporte Mobile

125. Suporte Mobile
6

126. APIs do Além
Acelerômetro
Geolocalização
Câmera
Microfone

128. ?

129. @loopinfinito
@almirfilho
@caio_gondim

130. Obrigado!