HTML5 Sensitivo

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. Suporte Desktop
49. Suporte Desktop 7 6 (parcial) (parcial)
50. Suporte Mobile
51. Suporte Mobile 18 4.2 3.0 12 10 15
52. Geolocalização Acelerômetro APIs do Além Câmera Microfone
53. Geolocalização
54. Posição em relação a superfície do planeta
55. serviços de mapas redes sociais aplicações e-gov Quem usa?
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 18 3.2 2.1 11 7 15
72. Geolocalização Acelerômetro API’s do Além 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 <video> MediaStream 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. navigator.getUserMedia( { video: true }, sucessoCallback, falhaCallback ) Permissão
84. function sucessoCallback(stream) { var video = document.getElementsByTagName(‘video’)[0] video.autoplay = true video.src = window.webkitURL.createObjectURL(stream) } Linkando no <video>
85. Mix com <canvas>
86. Mix com WebGL
87. DEMO
88. Câmera Geolocalização Acelerômetro APIs do Além Microfone
89. Suporte Desktop
90. Suporte Desktop 21 6
91. Suporte Mobile
92. Suporte Mobile 6
93. Microfone
94. API
95. API Web Speech Media Capture
96. Web Speech Reconhecimento & Síntese de voz
98. Reconhecimento de voz
100. Síntese de voz
101. if ( document.createElement( ‘input’ ).webkitSpeech != undefined ) { // suporte garantido =) } Teste o suporte
102. <input type=”text” x-webkit-speech /> Marcação HTML
106. { }
107. document .getElementsByTagName( ‘input’ )[0] .addEventListener( ‘webkitspeechchange’, function( eventData ){ // sua mágica } ) Evento
108. eventData = { results: [ { confidence: 0.61285305, utterance: ‘praia’ }, ... ], ... // propriedades de Event } Dados de webkitspeechange
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. navigator.getUserMedia( { audio: true }, sucessoCallback, falhaCallback ) Permissão
119. Mix com Web Audio
120. function sucessoCallback( stream ) { var context = new webkitAudioContext() var mediaStreamSource = context .createMediaStreamSource( stream ) mediaStreamSource.connect( filter1 ) ... filter1.connect( context.destination ) } Callback
121. DEMO
122. Suporte Desktop
123. Suporte Desktop 21 6
124. Suporte Mobile
125. Suporte Mobile 6
126. Câmera Geolocalização Acelerômetro APIs do Além Microfone
128. ?
129. @loopinfinito @almirfilho @caio_gondim
130. Obrigado!