HTML5 Sensitivo - Seu browser no plano astral

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.

Transcript

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 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ém a Rotação dos eixos
27. z y x Obtém a Rotação dos eixos
28. z y x gamma beta alpha Obtém a Rotação dos eixos
29. em graus gamma beta 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 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. eventData = { alpha: 0.01042012, // graus beta: 11.34221344, // graus gamma: 27.102012102, // graus absolute: true, ... // propriedades de Event } Dados de deviceorientation
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 z y x
43. z y x 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. 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 } Dados de devicemotion
47. DEMO
48. almirfilho.github.com/cilada
49. Suporte Desktop
50. Suporte Desktop 7 6 (parcial) (parcial)
51. Suporte Mobile
52. Suporte Mobile 18 4.2 3.0 12 10 15
53. Geolocalização Acelerômetro APIs do Além Câmera Microfone
54. Geolocalização
55. Posição em relação a superfície do planeta
56. serviços de mapas redes sociais aplicações e-gov Quem usa?
57. Localização = Contexto
58. Localização = Contexto Maior relevância
59. Busca & Recomendação mais eficazes
60. Obtendo a Geolocalização Desktop x Móvel
61. Desktop Posição Localização fixa aproximada
62. Móvel Posição Localização variável mais exata
63. API
64. API navigator.geolocation
65. if( navigator.geolocation != undefined ){ // suporte garantido =) } Teste o suporte
66. // requisitando geolocalização navigator.geolocation.getCurrentPosition( showMap ) // setando o callback function showMap( position ){ // só alegria } Defina o callback
67. 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) } }
68. DEMO
69. almirfilho.github.com/fulltheface
70. Suporte Desktop
71. Suporte Desktop 5 3.5 9 5 10.6
72. Suporte Mobile
73. Suporte Mobile 18 3.2 2.1 11 7 15
74. Geolocalização Acelerômetro APIs do Alé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! } Teste o suporte
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) } Linkando no <video>
87. Mix com <canvas>
88. Mix com WebGL
89. DEMO
90. caiogondim.github.com/webpix
91. Suporte Desktop
92. Suporte Desktop 21 12.0
93. Suporte Mobile
94. Suporte Mobile
95. Câmera Geolocalização Acelerômetro APIs do Além Microfone
96. Microfone
97. API
98. API Web Speech Media Capture
99. Web Speech Reconhecimento & Síntese de voz
101. Reconhecimento de voz
103. Síntese de voz
104. if ( document.createElement( ‘input’ ).webkitSpeech != undefined ) { // suporte garantido =) } Teste o suporte
105. <input type=”text” x-webkit-speech /> Marcação HTML
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 } Dados de webkitspeechange
112. DEMO
113. caiogondim.github.com/hal
114. Suporte Desktop
115. Suporte Desktop 22*
116. Captura de Áudio Media Capture
117. Baixo Nível
118. Baixa Latência
119. Guitarra Mic externo ...
120. // sem prefixos dos vendors if ( navigator.getUserMedia ){ // we got it! } Teste o suporte
121. navigator.getUserMedia( { audio: true }, sucessoCallback, falhaCallback ) Permissão
123. Mix com Web Audio
124. function sucessoCallback( stream ) { var context = new webkitAudioContext() var mediaStreamSource = context .createMediaStreamSource( stream ) mediaStreamSource.connect( filter1 ) ... filter1.connect( context.destination ) } Callback
125. DEMO
126. Suporte Desktop
127. Suporte Desktop 21 6
128. Suporte Mobile
129. Suporte Mobile 6
130. Câmera Geolocalização Acelerômetro APIs do Além Microfone
132. ?
133. @loopinfinito @almirfilho @caio_gondim
134. Obrigado!
135. Este trabalho é licenciado pela Creative Commons http://creativecommons.org.br/as-licencas/