HTML5 Sensitivo - Seu browser no plano astral

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.

C61a787d4d03535b394d39443fbebc16?s=128

Loop Infinito

October 27, 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. 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

  85. None
  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

  100. None
  101. Reconhecimento de voz

  102. None
  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

  106. None
  107. None
  108. None
  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

  122. None
  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

  131. None
  132. ?

  133. @loopinfinito @almirfilho @caio_gondim

  134. Obrigado!

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