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

83. None

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

97. None

98. Reconhecimento de voz

99. None

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

103. None
104. None
105. None

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

118. None

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

127. None

128. ?

129. @loopinfinito @almirfilho @caio_gondim

130. Obrigado!