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
   

   View Slide

2. HTML5 Sensitivo
   Seu browser + LSD
   

   View Slide

3. Acesso a
   dispositivos
   

   View Slide

4. APIs do Além
   

   View Slide

5. APIs do Além
   Acelerômetro
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

9. @caio_gondim
   @almirfilho
   

   View Slide

10. @loopinfinito
    

    View Slide

11. loopinfinito.com.br
    

    View Slide

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

    View Slide

13. Acelerômetro
    

    View Slide

14. Orientação
    &
    Aceleração
    

    View Slide

15. Sistema de
    Coordenadas
    

    View Slide

16. y
    Sistema de
    Coordenadas
    

    View Slide

17. y
    x
    Sistema de
    Coordenadas
    

    View Slide

18. z
    y
    x
    Sistema de
    Coordenadas
    

    View Slide

19. Rotação
    z
    y
    x
    

    View Slide

20. Rotação
    alpha
    z
    y
    x
    

    View Slide

21. Rotação
    z
    y
    x
    beta
    

    View Slide

22. Rotação
    z
    y
    x
    gamma
    

    View Slide

23. API
    

    View Slide

24. API
    DeviceOrientationEvent
    DeviceMotionEvent
    

    View Slide

25. Orientação
    DeviceOrientationEvent
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

29. em graus
    gamma
    beta alpha
    

    View Slide

30. z
    alpha = 0º
    

    View Slide

31. z
    alpha = 25º
    

    View Slide

32. x
    beta = 0º
    

    View Slide

33. x
    beta = 30º
    

    View Slide

34. y
    gamma = 0º
    

    View Slide

35. y
    gamma = 45º
    

    View Slide

36. JavaScript
    por favor!
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

40. Aceleração
    DeviceMotionEvent
    

    View Slide

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

    View Slide

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

    View Slide

43. z
    y
    x
    em m/s²
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

47. DEMO
    

    View Slide

48. almirfilho.github.com/cilada
    

    View Slide

49. Suporte Desktop
    

    View Slide

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

    View Slide

51. Suporte Mobile
    

    View Slide

52. Suporte Mobile
    18
    4.2
    3.0
    12 10
    15
    

    View Slide

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

    View Slide

54. Geolocalização
    

    View Slide

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

    View Slide

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

    View Slide

57. Localização = Contexto
    

    View Slide

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

    View Slide

59. Busca
    &
    Recomendação
    mais eficazes
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

63. API
    

    View Slide

64. API
    navigator.geolocation
    

    View Slide

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

    View Slide

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

    View Slide

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)
    }
    }
    

    View Slide

68. DEMO
    

    View Slide

69. almirfilho.github.com/fulltheface
    

    View Slide

70. Suporte Desktop
    

    View Slide

71. Suporte Desktop
    5 3.5
    9
    5
    10.6
    

    View Slide

72. Suporte Mobile
    

    View Slide

73. Suporte Mobile
    18
    3.2
    2.1
    11 7
    15
    

    View Slide

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

    View Slide

75. Câmera
    

    View Slide

76. WebRTC
    

    View Slide

77. WebRTC
    Real-Time
    Communications
    

    View Slide

78. API
    

    View Slide

79. API
    Stream
    Media Capture
    

    View Slide

80. API
    Stream
    

    View Slide

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

    View Slide

82. API
    Media Capture
    

    View Slide

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

    View Slide

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

    View Slide

85. View Slide

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

    View Slide

87. Mix com
    
    

    View Slide

88. Mix com
    WebGL
    

    View Slide

89. DEMO
    

    View Slide

90. caiogondim.github.com/webpix
    

    View Slide

91. Suporte Desktop
    

    View Slide

92. Suporte Desktop
    21
    12.0
    

    View Slide

93. Suporte Mobile
    

    View Slide

94. Suporte Mobile
    

    View Slide

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

    View Slide

96. Microfone
    

    View Slide

97. API
    

    View Slide

98. API
    Web Speech
    Media Capture
    

    View Slide

99. Web Speech
    Reconhecimento
    & Síntese
    de voz
    

    View Slide

100. View Slide

101. Reconhecimento
     de voz
     

     View Slide

102. View Slide

103. Síntese de voz
     

     View Slide

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

     View Slide

105. 
     Marcação HTML
     

     View Slide

106. View Slide

107. View Slide

108. View Slide

109. { }
     

     View Slide

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

     View Slide

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

     View Slide

112. DEMO
     

     View Slide

113. caiogondim.github.com/hal
     

     View Slide

114. Suporte Desktop
     

     View Slide

115. Suporte Desktop
     22*
     

     View Slide

116. Captura de
     Áudio
     Media Capture
     

     View Slide

117. Baixo
     Nível
     

     View Slide

118. Baixa
     Latência
     

     View Slide

119. Guitarra
     Mic externo
     ...
     

     View Slide

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

     View Slide

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

     View Slide

122. View Slide

123. Mix com
     Web Audio
     

     View Slide

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

     View Slide

125. DEMO
     

     View Slide

126. Suporte Desktop
     

     View Slide

127. Suporte Desktop
     21
     6
     

     View Slide

128. Suporte Mobile
     

     View Slide

129. Suporte Mobile
     6
     

     View Slide

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

     View Slide

131. View Slide

132. ?
     

     View Slide

133. @loopinfinito
     @almirfilho
     @caio_gondim
     

     View Slide

134. Obrigado!
     

     View Slide

135. Este trabalho é licenciado pela
     Creative Commons
     http://creativecommons.org.br/as-licencas/
     

     View Slide