Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
HTML5 Sensitivo
Caio Gondim
November 01, 2012
5
260
HTML5 Sensitivo
Caio Gondim
November 01, 2012
Tweet
Share
More Decks by Caio Gondim
See All by Caio Gondim
caiogondim
1
71
caiogondim
9
590
caiogondim
3
180
caiogondim
1
73
caiogondim
5
240
caiogondim
21
2.4k
caiogondim
2
280
caiogondim
5
220
caiogondim
3
790
Featured
See All Featured
jeffersonlam
328
15k
garrettdimon
287
110k
keithpitt
401
20k
hannesfritz
27
930
scottboms
251
11k
myddelton
109
11k
zakiwarfel
88
3.3k
wjessup
338
16k
mongodb
23
3.8k
productmarketing
5
650
carmenhchung
26
1.3k
addyosmani
494
110k
Transcript
@almirfilho @caio_gondim @loopinfinito
HTML5 Sensitivo Seu browser + LSD
Acesso a dispositivos
APIs do Além
APIs do Além Acelerômetro
APIs do Além Acelerômetro Geolocalização
APIs do Além Acelerômetro Geolocalização Câmera
APIs do Além Acelerômetro Geolocalização Câmera Microfone
@caio_gondim @almirfilho
@loopinfinito
loopinfinito.com.br
APIs do Além Acelerômetro Geolocalização Câmera Microfone
Acelerômetro
Orientação & Aceleração
Sistema de Coordenadas
y Sistema de Coordenadas
y x Sistema de Coordenadas
z y x Sistema de 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ém a Rotação dos eixos
z y x Obtém a Rotação dos eixos
z y x gamma beta alpha Obtém a Rotação dos
eixos
em graus gamma beta alpha
z alpha = 0º
z alpha = 25º
x beta = 0º
x beta = 30º
y gamma = 0º
y gamma = 45º
JavaScript por favor!
if( window.DeviceOrientationEvent != undefined ){ // suporte garantido =) }
Teste o suporte
window.addEventListener( ‘deviceorientation’, function( eventData ){ // faça acontecer } )
Trate o evento
eventData = { alpha: 0.01042012, // graus beta: 11.34221344, //
graus gamma: 27.102012102, // graus absolute: true, ... // propriedades de Event } Dados de deviceorientation
Aceleração DeviceMotionEvent
Obtém dados sobre movimentos físicos em cada eixo
Obtém dados sobre movimentos físicos em cada eixo z y
x
z y x em m/s²
if( window.DeviceMotionEvent != undefined ){ // suporte garantido =) }
Teste o suporte
window.addEventListener( ‘devicemotion’, function( eventData ){ // faça acontecer } )
Trate o evento
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
DEMO
Suporte Desktop
Suporte Desktop 7 6 (parcial) (parcial)
Suporte Mobile
Suporte Mobile 18 4.2 3.0 12 10 15
Geolocalização Acelerômetro APIs do Além Câmera Microfone
Geolocalização
Posição em relação a superfície do planeta
serviços de mapas redes sociais aplicações e-gov Quem usa?
Localização = Contexto
Localização = Contexto Maior relevância
Busca & Recomendação mais eficazes
Obtendo a Geolocalização Desktop x Móvel
Desktop Posição Localização fixa aproximada
Móvel Posição Localização variável mais exata
API
API navigator.geolocation
if( navigator.geolocation != undefined ){ // suporte garantido =) }
Teste o suporte
// requisitando geolocalização navigator.geolocation.getCurrentPosition( showMap ) // setando o callback
function showMap( position ){ // só alegria } Defina o callback
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) } }
DEMO
Suporte Desktop
Suporte Desktop 5 3.5 9 5 10.6
Suporte Mobile
Suporte Mobile 18 3.2 2.1 11 7 15
Geolocalização Acelerômetro API’s do Alé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! } Teste o suporte
navigator.getUserMedia( { video: true }, sucessoCallback, falhaCallback ) Permissão
None
function sucessoCallback(stream) { var video = document.getElementsByTagName(‘video’)[0] video.autoplay = true
video.src = window.webkitURL.createObjectURL(stream) } Linkando no <video>
Mix com <canvas>
Mix com WebGL
DEMO
Câmera Geolocalização Acelerômetro APIs do Além Microfone
Suporte Desktop
Suporte Desktop 21 6
Suporte Mobile
Suporte Mobile 6
Microfone
API
API Web Speech Media Capture
Web Speech Reconhecimento & Síntese de voz
None
Reconhecimento de voz
None
Síntese de voz
if ( document.createElement( ‘input’ ).webkitSpeech != undefined ) { //
suporte garantido =) } Teste o suporte
<input type=”text” x-webkit-speech /> Marcação HTML
None
None
None
{ }
document .getElementsByTagName( ‘input’ )[0] .addEventListener( ‘webkitspeechchange’, function( eventData ){ //
sua mágica } ) Evento
eventData = { results: [ { confidence: 0.61285305, utterance: ‘praia’
}, ... ], ... // propriedades de Event } Dados de webkitspeechange
DEMO
Suporte Desktop
Suporte Desktop 22*
Captura de Áudio Media Capture
Baixo Nível
Baixa Latência
Guitarra Mic externo ...
// sem prefixos dos vendors if ( navigator.getUserMedia ){ //
we got it! } Teste o suporte
navigator.getUserMedia( { audio: true }, sucessoCallback, falhaCallback ) Permissão
None
Mix com Web Audio
function sucessoCallback( stream ) { var context = new webkitAudioContext()
var mediaStreamSource = context .createMediaStreamSource( stream ) mediaStreamSource.connect( filter1 ) ... filter1.connect( context.destination ) } Callback
DEMO
Suporte Desktop
Suporte Desktop 21 6
Suporte Mobile
Suporte Mobile 6
Câmera Geolocalização Acelerômetro APIs do Além Microfone
None
?
@loopinfinito @almirfilho @caio_gondim
Obrigado!