HTML5 Sensitivo

212b8b6589f7e98dae14e6517101f427?s=47 Caio Gondim
November 01, 2012
250

HTML5 Sensitivo

212b8b6589f7e98dae14e6517101f427?s=128

Caio Gondim

November 01, 2012
Tweet

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!