@almirfilho
@caio_gondim
@loopinfinito
HTML5Sensitivo
Seubrowser+LSD
Acessoa
dispositivos
APIsdoAlém
APIsdoAlém
Acelerômetro
APIsdoAlém
Acelerômetro
Geolocalização
APIsdoAlém
Acelerômetro
Geolocalização
Câmera
APIsdoAlém
Acelerômetro
Geolocalização
Câmera
Microfone
@caio_gondim
@almirfilho
@loopinfinito
loopinfinito.com.br
APIsdoAlém
Acelerômetro
Geolocalização
Câmera
Microfone
Acelerômetro
Orientação
&
Aceleração
Sistemade
Coordenadas
y
Sistemade
Coordenadas
y
x
Sistemade
Coordenadas
z
y
x
Sistemade
Coordenadas
Rotação
z
y
x
Rotação
alpha
z
y
x
Rotação
z
y
x
beta
Rotação
z
y
x
gamma
API
API
DeviceOrientationEvent
DeviceMotionEvent
Orientação
DeviceOrientationEvent
Obtéma
Rotaçãodoseixos
zyx
Obtéma
Rotaçãodoseixos
zyx
gammabeta alpha
Obtéma
Rotaçãodoseixos
emgraus
gammabeta alpha
z
alpha = 0º
z
alpha = 25º
x
beta = 0º
x
beta = 30º
y
gamma = 0º
y
gamma = 45º
JavaScript
porfavor!
if( window.DeviceOrientationEvent != undefined ){
// suporte garantido =)
}
Testeosuporte
window.addEventListener( ‘deviceorientation’,
function( eventData ){
// faça acontecer
}
)
Trateoevento
eventData = {
alpha: 0.01042012, // graus
beta: 11.34221344, // graus
gamma: 27.102012102, // graus
absolute: true,
... //...
Aceleração
DeviceMotionEvent
Obtémdados
sobremovimentos
físicosemcadaeixo
Obtémdados
sobremovimentos
físicosemcadaeixo
zyx
zyx
emm/s²
if( window.DeviceMotionEvent != undefined ){
// suporte garantido =)
}
Testeosuporte
window.addEventListener( ‘devicemotion’,
function( eventData ){
// faça acontecer
}
)
Trateoevento
eventData = {
interval: 200, // milisegundos
acceleration: {
x: 0.1534532, // metro/s²
y: 3.9876581, // metro/s²
z: 1.0092...
DEMO
almirfilho.github.com/cilada
SuporteDesktop
SuporteDesktop
7 6
(parcial)(parcial)
SuporteMobile
SuporteMobile
184.2
3.012 10
15
Geolocalização
Acelerômetro
APIsdoAlém
Câmera
Microfone
Geolocalização
Posiçãoemrelaçãoa
superfíciedoplaneta
serviçosdemapas
redessociais
aplicaçõese-gov
Quemusa?
Localização=Contexto
Localização=Contexto
Maiorrelevância
Busca
&
Recomendação
maiseficazes
Obtendoa
Geolocalização
DesktopxMóvel
Desktop
Posição
Localização
fixa
aproximada
Móvel
Posição
Localização
variável
maisexata
API
API
navigator.geolocation
if( navigator.geolocation != undefined ){
// suporte garantido =)
}
Testeosuporte
// requisitando geolocalização
navigator.geolocation.getCurrentPosition( showMap )
// setando o callback
function showMap(...
Dadosde.getCurrentPosition
position = {
timestamp: 307770135, // DOMTimeStamp
	 coords: {
	 	 accuracy: 12, // metros
	 	 ...
DEMO
almirfilho.github.com/fulltheface
SuporteDesktop
SuporteDesktop
5 3.5
9
5
10.6
SuporteMobile
SuporteMobile
183.2
2.111 7
15
Geolocalização
Acelerômetro
APIsdoAlém
Câmera
Microfone
Câmera
WebRTC
WebRTC
Real-Time
Communications
API
API
Stream
Media Capture
API
Stream
Stream
input
<video>
MediaStream
MediaStream
Track
video
MediaStream
Track
audio
PeerConection
API
Media Capture
// sem prefixos dos vendors
if ( navigator.getUserMedia ){
// câmera, ação!
}
Testeosuporte
navigator.getUserMedia(
{ video: true },
sucessoCallback,
falhaCallback
)
Permissão
function sucessoCallback(stream) {
var video = document.getElementsByTagName(‘video’)[0]
video.autoplay = true
video.src =...
Mixcom
<canvas>
Mixcom
WebGL
DEMO
caiogondim.github.com/webpix
SuporteDesktop
SuporteDesktop
21
12.0
SuporteMobile
SuporteMobile
Câmera
Geolocalização
Acelerômetro
APIsdoAlém
Microfone
Microfone
API
API
Web Speech
Media Capture
Web Speech
Reconhecimento
&Síntese
devoz
Reconhecimento
devoz
Síntesedevoz
if ( document.createElement( ‘input’ ).webkitSpeech != undefined )
{
// suporte garantido =)
}
Testeosuporte
<input type=”text” x-webkit-speech />
MarcaçãoHTML
{ }
document
.getElementsByTagName( ‘input’ )[0]
.addEventListener( ‘webkitspeechchange’,
function( eventData ){
// sua mágica...
eventData = {
results: [
{
confidence: 0.61285305,
utterance: ‘praia’
},
...
],
... // propriedades de Event
}
Dadosde
web...
DEMO
caiogondim.github.com/hal
SuporteDesktop
SuporteDesktop
22*
Capturade
Áudio
Media Capture
Baixo
Nível
Baixa
Latência
Guitarra
Micexterno
...
// sem prefixos dos vendors
if ( navigator.getUserMedia ){
// we got it!
}
Testeosuporte
navigator.getUserMedia(
{ audio: true },
sucessoCallback,
falhaCallback
)
Permissão
Mixcom
WebAudio
function sucessoCallback( stream ) {
var context = new webkitAudioContext()
var mediaStreamSource = context
.createMediaSt...
DEMO
SuporteDesktop
SuporteDesktop
216
SuporteMobile
SuporteMobile
6
Câmera
Geolocalização
Acelerômetro
APIsdoAlém
Microfone
?
@loopinfinito
@almirfilho
@caio_gondim
Obrigado!
Estetrabalhoélicenciadopela
CreativeCommons
http://creativecommons.org.br/as-licencas/
HTML5 Sensitivo: Seu browser no plano astral
HTML5 Sensitivo: Seu browser no plano astral
HTML5 Sensitivo: Seu browser no plano astral
HTML5 Sensitivo: Seu browser no plano astral
HTML5 Sensitivo: Seu browser no plano astral
HTML5 Sensitivo: Seu browser no plano astral
HTML5 Sensitivo: Seu browser no plano astral
HTML5 Sensitivo: Seu browser no plano astral
Próximos SlideShares
Carregando em…5
×

HTML5 Sensitivo: Seu browser no plano astral

316 visualizações

Publicada em

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.

Publicada em: Software
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
316
No SlideShare
0
A partir de incorporações
0
Número de incorporações
4
Ações
Compartilhamentos
0
Downloads
8
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

HTML5 Sensitivo: Seu browser no plano astral

  1. 1. @almirfilho @caio_gondim @loopinfinito
  2. 2. HTML5Sensitivo Seubrowser+LSD
  3. 3. Acessoa dispositivos
  4. 4. APIsdoAlém
  5. 5. APIsdoAlém Acelerômetro
  6. 6. APIsdoAlém Acelerômetro Geolocalização
  7. 7. APIsdoAlém Acelerômetro Geolocalização Câmera
  8. 8. APIsdoAlém Acelerômetro Geolocalização Câmera Microfone
  9. 9. @caio_gondim @almirfilho
  10. 10. @loopinfinito
  11. 11. loopinfinito.com.br
  12. 12. APIsdoAlém Acelerômetro Geolocalização Câmera Microfone
  13. 13. Acelerômetro
  14. 14. Orientação & Aceleração
  15. 15. Sistemade Coordenadas
  16. 16. y Sistemade Coordenadas
  17. 17. y x Sistemade Coordenadas
  18. 18. z y x Sistemade Coordenadas
  19. 19. Rotação z y x
  20. 20. Rotação alpha z y x
  21. 21. Rotação z y x beta
  22. 22. Rotação z y x gamma
  23. 23. API
  24. 24. API DeviceOrientationEvent DeviceMotionEvent
  25. 25. Orientação DeviceOrientationEvent
  26. 26. Obtéma Rotaçãodoseixos
  27. 27. zyx Obtéma Rotaçãodoseixos
  28. 28. zyx gammabeta alpha Obtéma Rotaçãodoseixos
  29. 29. emgraus gammabeta alpha
  30. 30. z alpha = 0º
  31. 31. z alpha = 25º
  32. 32. x beta = 0º
  33. 33. x beta = 30º
  34. 34. y gamma = 0º
  35. 35. y gamma = 45º
  36. 36. JavaScript porfavor!
  37. 37. if( window.DeviceOrientationEvent != undefined ){ // suporte garantido =) } Testeosuporte
  38. 38. window.addEventListener( ‘deviceorientation’, function( eventData ){ // faça acontecer } ) Trateoevento
  39. 39. eventData = { alpha: 0.01042012, // graus beta: 11.34221344, // graus gamma: 27.102012102, // graus absolute: true, ... // propriedades de Event } Dadosde deviceorientation
  40. 40. Aceleração DeviceMotionEvent
  41. 41. Obtémdados sobremovimentos físicosemcadaeixo
  42. 42. Obtémdados sobremovimentos físicosemcadaeixo zyx
  43. 43. zyx emm/s²
  44. 44. if( window.DeviceMotionEvent != undefined ){ // suporte garantido =) } Testeosuporte
  45. 45. window.addEventListener( ‘devicemotion’, function( eventData ){ // faça acontecer } ) Trateoevento
  46. 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 } Dadosdedevicemotion
  47. 47. DEMO
  48. 48. almirfilho.github.com/cilada
  49. 49. SuporteDesktop
  50. 50. SuporteDesktop 7 6 (parcial)(parcial)
  51. 51. SuporteMobile
  52. 52. SuporteMobile 184.2 3.012 10 15
  53. 53. Geolocalização Acelerômetro APIsdoAlém Câmera Microfone
  54. 54. Geolocalização
  55. 55. Posiçãoemrelaçãoa superfíciedoplaneta
  56. 56. serviçosdemapas redessociais aplicaçõese-gov Quemusa?
  57. 57. Localização=Contexto
  58. 58. Localização=Contexto Maiorrelevância
  59. 59. Busca & Recomendação maiseficazes
  60. 60. Obtendoa Geolocalização DesktopxMóvel
  61. 61. Desktop Posição Localização fixa aproximada
  62. 62. Móvel Posição Localização variável maisexata
  63. 63. API
  64. 64. API navigator.geolocation
  65. 65. if( navigator.geolocation != undefined ){ // suporte garantido =) } Testeosuporte
  66. 66. // requisitando geolocalização navigator.geolocation.getCurrentPosition( showMap ) // setando o callback function showMap( position ){ // só alegria } Definaocallback
  67. 67. Dadosde.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. 68. DEMO
  69. 69. almirfilho.github.com/fulltheface
  70. 70. SuporteDesktop
  71. 71. SuporteDesktop 5 3.5 9 5 10.6
  72. 72. SuporteMobile
  73. 73. SuporteMobile 183.2 2.111 7 15
  74. 74. Geolocalização Acelerômetro APIsdoAlém Câmera Microfone
  75. 75. Câmera
  76. 76. WebRTC
  77. 77. WebRTC Real-Time Communications
  78. 78. API
  79. 79. API Stream Media Capture
  80. 80. API Stream
  81. 81. Stream input <video> MediaStream MediaStream Track video MediaStream Track audio PeerConection
  82. 82. API Media Capture
  83. 83. // sem prefixos dos vendors if ( navigator.getUserMedia ){ // câmera, ação! } Testeosuporte
  84. 84. navigator.getUserMedia( { video: true }, sucessoCallback, falhaCallback ) Permissão
  85. 85. function sucessoCallback(stream) { var video = document.getElementsByTagName(‘video’)[0] video.autoplay = true video.src = window.webkitURL.createObjectURL(stream) } Linkandono <video>
  86. 86. Mixcom <canvas>
  87. 87. Mixcom WebGL
  88. 88. DEMO
  89. 89. caiogondim.github.com/webpix
  90. 90. SuporteDesktop
  91. 91. SuporteDesktop 21 12.0
  92. 92. SuporteMobile
  93. 93. SuporteMobile
  94. 94. Câmera Geolocalização Acelerômetro APIsdoAlém Microfone
  95. 95. Microfone
  96. 96. API
  97. 97. API Web Speech Media Capture
  98. 98. Web Speech Reconhecimento &Síntese devoz
  99. 99. Reconhecimento devoz
  100. 100. Síntesedevoz
  101. 101. if ( document.createElement( ‘input’ ).webkitSpeech != undefined ) { // suporte garantido =) } Testeosuporte
  102. 102. <input type=”text” x-webkit-speech /> MarcaçãoHTML
  103. 103. { }
  104. 104. document .getElementsByTagName( ‘input’ )[0] .addEventListener( ‘webkitspeechchange’, function( eventData ){ // sua mágica } ) Evento
  105. 105. eventData = { results: [ { confidence: 0.61285305, utterance: ‘praia’ }, ... ], ... // propriedades de Event } Dadosde webkitspeechange
  106. 106. DEMO
  107. 107. caiogondim.github.com/hal
  108. 108. SuporteDesktop
  109. 109. SuporteDesktop 22*
  110. 110. Capturade Áudio Media Capture
  111. 111. Baixo Nível
  112. 112. Baixa Latência
  113. 113. Guitarra Micexterno ...
  114. 114. // sem prefixos dos vendors if ( navigator.getUserMedia ){ // we got it! } Testeosuporte
  115. 115. navigator.getUserMedia( { audio: true }, sucessoCallback, falhaCallback ) Permissão
  116. 116. Mixcom WebAudio
  117. 117. function sucessoCallback( stream ) { var context = new webkitAudioContext() var mediaStreamSource = context .createMediaStreamSource( stream ) mediaStreamSource.connect( filter1 ) ... filter1.connect( context.destination ) } Callback
  118. 118. DEMO
  119. 119. SuporteDesktop
  120. 120. SuporteDesktop 216
  121. 121. SuporteMobile
  122. 122. SuporteMobile 6
  123. 123. Câmera Geolocalização Acelerômetro APIsdoAlém Microfone
  124. 124. ?
  125. 125. @loopinfinito @almirfilho @caio_gondim
  126. 126. Obrigado!
  127. 127. Estetrabalhoélicenciadopela CreativeCommons http://creativecommons.org.br/as-licencas/

×