@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!