Upload
caio-gondim
View
124
Download
0
Embed Size (px)
Citation preview
@almirfilho@caio_gondim
@loopinfinito
HTML5 Sensitivo
Seu browser + LSD
Acesso adispositivos
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émAcelerômetro
Geolocalização
Câmera
Microfone
@caio_gondim
@almirfilho
@loopinfinito
loopinfinito.com.br
APIs do AlémAcelerômetro
Geolocalização
Câmera
Microfone
Acelerômetro
Orientação&
Aceleração
Sistema deCoordenadas
ySistema deCoordenadas
y
x
Sistema deCoordenadas
z y
x
Sistema deCoordenadas
Rotação z y
x
Rotação
alpha
z y
x
Rotação z y
x
beta
Rotação z y
x
gamma
API
APIDeviceOrientationEvent
DeviceMotionEvent
Orientação
DeviceOrientationEvent
Obtém aRotação dos eixos
zyx
Obtém aRotação dos eixos
zyxgammabeta alpha
Obtém aRotação dos eixos
em grausgammabeta alpha
z
alpha = 0º
z
alpha = 25º
x
beta = 0º
x
beta = 30º
y
gamma = 0º
y
gamma = 45º
JavaScriptpor 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 dadossobre movimentos
físicos em cada eixo
Obtém dadossobre movimentos
físicos em cada eixo
zyx
zyx
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
184.2
3.012 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 mapasredes sociais
aplicações e-gov
Quem usa?
Localização = Contexto
Localização = ContextoMaior relevância
Busca&
Recomendaçãomais eficazes
Obtendo a Geolocalização
Desktop x Móvel
DesktopPosição
Localização fixaaproximada
MóvelPosição
Localização variávelmais exata
API
APInavigator.geolocation
if( navigator.geolocation != undefined ){ // suporte garantido =)}
Teste o suporte
// requisitando geolocalizaçãonavigator.geolocation.getCurrentPosition( showMap )
// setando o callbackfunction 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
183.2
2.111 7
15
Geolocalização
Acelerômetro
API’s do Além
Câmera
Microfone
Câmera
WebRTC
WebRTCReal-Time
Communications
API
APIStream
Media Capture
API
Stream
Stream
input
<video>MediaStream
MediaStreamTrack
video
MediaStreamTrack
audio
PeerConection
API
Media Capture
// sem prefixos dos vendorsif ( navigator.getUserMedia ){ // câmera, ação!}
Teste o suporte
navigator.getUserMedia( { video: true }, sucessoCallback, falhaCallback )
Permissão
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 comWebGL
DEMO
Câmera
Geolocalização
Acelerômetro
APIs do Além
Microfone
Suporte Desktop
Suporte Desktop
216
Suporte Mobile
Suporte Mobile
6
Microfone
API
APIWeb Speech
Media Capture
Web Speech
Reconhecimento& Síntese
de voz
Reconhecimento de voz
Síntese de voz
if ( document.createElement( ‘input’ ).webkitSpeech != undefined ){ // suporte garantido =)}
Teste o suporte
<input type=”text” x-webkit-speech />
Marcação HTML
{ }
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
BaixoNível
BaixaLatência
GuitarraMic externo
...
// sem prefixos dos vendorsif ( navigator.getUserMedia ){ // we got it!}
Teste o suporte
navigator.getUserMedia( { audio: true }, sucessoCallback, falhaCallback )
Permissão
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
216
Suporte Mobile
Suporte Mobile
6
Câmera
Geolocalização
Acelerômetro
APIs do Além
Microfone
?
@loopinfinito@almirfilho
@caio_gondim
Obrigado!