HTML5 Sensitivo

130
@almirfilho @caio_gondim @loopinfinito

Transcript of HTML5 Sensitivo

Page 1: HTML5 Sensitivo

@almirfilho@caio_gondim

@loopinfinito

Page 2: HTML5 Sensitivo

HTML5 Sensitivo

Seu browser + LSD

Page 3: HTML5 Sensitivo

Acesso adispositivos

Page 4: HTML5 Sensitivo

APIs do Além

Page 5: HTML5 Sensitivo

APIs do Além

Acelerômetro

Page 6: HTML5 Sensitivo

APIs do Além

Acelerômetro

Geolocalização

Page 7: HTML5 Sensitivo

APIs do Além

Acelerômetro

Geolocalização

Câmera

Page 8: HTML5 Sensitivo

APIs do AlémAcelerômetro

Geolocalização

Câmera

Microfone

Page 9: HTML5 Sensitivo

@caio_gondim

@almirfilho

Page 10: HTML5 Sensitivo

@loopinfinito

Page 11: HTML5 Sensitivo

loopinfinito.com.br

Page 12: HTML5 Sensitivo

APIs do AlémAcelerômetro

Geolocalização

Câmera

Microfone

Page 13: HTML5 Sensitivo

Acelerômetro

Page 14: HTML5 Sensitivo

Orientação&

Aceleração

Page 15: HTML5 Sensitivo

Sistema deCoordenadas

Page 16: HTML5 Sensitivo

ySistema deCoordenadas

Page 17: HTML5 Sensitivo

y

x

Sistema deCoordenadas

Page 18: HTML5 Sensitivo

z y

x

Sistema deCoordenadas

Page 19: HTML5 Sensitivo

Rotação z y

x

Page 20: HTML5 Sensitivo

Rotação

alpha

z y

x

Page 21: HTML5 Sensitivo

Rotação z y

x

beta

Page 22: HTML5 Sensitivo

Rotação z y

x

gamma

Page 23: HTML5 Sensitivo

API

Page 24: HTML5 Sensitivo

APIDeviceOrientationEvent

DeviceMotionEvent

Page 25: HTML5 Sensitivo

Orientação

DeviceOrientationEvent

Page 26: HTML5 Sensitivo

Obtém aRotação dos eixos

Page 27: HTML5 Sensitivo

zyx

Obtém aRotação dos eixos

Page 28: HTML5 Sensitivo

zyxgammabeta alpha

Obtém aRotação dos eixos

Page 29: HTML5 Sensitivo

em grausgammabeta alpha

Page 30: HTML5 Sensitivo

z

alpha = 0º

Page 31: HTML5 Sensitivo

z

alpha = 25º

Page 32: HTML5 Sensitivo

x

beta = 0º

Page 33: HTML5 Sensitivo

x

beta = 30º

Page 34: HTML5 Sensitivo

y

gamma = 0º

Page 35: HTML5 Sensitivo

y

gamma = 45º

Page 36: HTML5 Sensitivo

JavaScriptpor favor!

Page 37: HTML5 Sensitivo

if( window.DeviceOrientationEvent != undefined ){ // suporte garantido =)}

Teste o suporte

Page 38: HTML5 Sensitivo

window.addEventListener( ‘deviceorientation’, function( eventData ){ // faça acontecer })

Trate o evento

Page 39: HTML5 Sensitivo

eventData = { alpha: 0.01042012, // graus beta: 11.34221344, // graus gamma: 27.102012102, // graus absolute: true, ... // propriedades de Event}

Dados de deviceorientation

Page 40: HTML5 Sensitivo

Aceleração

DeviceMotionEvent

Page 41: HTML5 Sensitivo

Obtém dadossobre movimentos

físicos em cada eixo

Page 42: HTML5 Sensitivo

Obtém dadossobre movimentos

físicos em cada eixo

zyx

Page 43: HTML5 Sensitivo

zyx

em m/s²

Page 44: HTML5 Sensitivo

if( window.DeviceMotionEvent != undefined ){ // suporte garantido =)}

Teste o suporte

Page 45: HTML5 Sensitivo

window.addEventListener( ‘devicemotion’, function( eventData ){ // faça acontecer })

Trate o evento

Page 46: HTML5 Sensitivo

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

Page 47: HTML5 Sensitivo

DEMO

Page 48: HTML5 Sensitivo

Suporte Desktop

Page 49: HTML5 Sensitivo

Suporte Desktop

7 6(parcial)(parcial)

Page 50: HTML5 Sensitivo

Suporte Mobile

Page 51: HTML5 Sensitivo

Suporte Mobile

184.2

3.012 10

15

Page 52: HTML5 Sensitivo

Geolocalização

Acelerômetro

APIs do Além

Câmera

Microfone

Page 53: HTML5 Sensitivo

Geolocalização

Page 54: HTML5 Sensitivo

Posição em relação a superfície do planeta

Page 55: HTML5 Sensitivo

serviços de mapasredes sociais

aplicações e-gov

Quem usa?

Page 56: HTML5 Sensitivo

Localização = Contexto

Page 57: HTML5 Sensitivo

Localização = ContextoMaior relevância

Page 58: HTML5 Sensitivo

Busca&

Recomendaçãomais eficazes

Page 59: HTML5 Sensitivo

Obtendo a Geolocalização

Desktop x Móvel

Page 60: HTML5 Sensitivo

DesktopPosição

Localização fixaaproximada

Page 61: HTML5 Sensitivo

MóvelPosição

Localização variávelmais exata

Page 62: HTML5 Sensitivo

API

Page 63: HTML5 Sensitivo

APInavigator.geolocation

Page 64: HTML5 Sensitivo

if( navigator.geolocation != undefined ){ // suporte garantido =)}

Teste o suporte

Page 65: HTML5 Sensitivo

// requisitando geolocalizaçãonavigator.geolocation.getCurrentPosition( showMap )

// setando o callbackfunction showMap( position ){ // só alegria}

Defina o callback

Page 66: HTML5 Sensitivo

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) }}

Page 67: HTML5 Sensitivo

DEMO

Page 68: HTML5 Sensitivo

Suporte Desktop

Page 69: HTML5 Sensitivo

Suporte Desktop

5 3.5

9

5

10.6

Page 70: HTML5 Sensitivo

Suporte Mobile

Page 71: HTML5 Sensitivo

Suporte Mobile

183.2

2.111 7

15

Page 72: HTML5 Sensitivo

Geolocalização

Acelerômetro

API’s do Além

Câmera

Microfone

Page 73: HTML5 Sensitivo

Câmera

Page 74: HTML5 Sensitivo

WebRTC

Page 75: HTML5 Sensitivo

WebRTCReal-Time

Communications

Page 76: HTML5 Sensitivo

API

Page 77: HTML5 Sensitivo

APIStream

Media Capture

Page 78: HTML5 Sensitivo

API

Stream

Page 79: HTML5 Sensitivo

Stream

input

<video>MediaStream

MediaStreamTrack

video

MediaStreamTrack

audio

PeerConection

Page 80: HTML5 Sensitivo

API

Media Capture

Page 81: HTML5 Sensitivo

// sem prefixos dos vendorsif ( navigator.getUserMedia ){ // câmera, ação!}

Teste o suporte

Page 82: HTML5 Sensitivo

navigator.getUserMedia( { video: true }, sucessoCallback, falhaCallback )

Permissão

Page 83: HTML5 Sensitivo
Page 84: HTML5 Sensitivo

function sucessoCallback(stream) { var video = document.getElementsByTagName(‘video’)[0] video.autoplay = true video.src = window.webkitURL.createObjectURL(stream)}

Linkando no <video>

Page 85: HTML5 Sensitivo

Mix com<canvas>

Page 86: HTML5 Sensitivo

Mix comWebGL

Page 87: HTML5 Sensitivo

DEMO

Page 88: HTML5 Sensitivo

Câmera

Geolocalização

Acelerômetro

APIs do Além

Microfone

Page 89: HTML5 Sensitivo

Suporte Desktop

Page 90: HTML5 Sensitivo

Suporte Desktop

216

Page 91: HTML5 Sensitivo

Suporte Mobile

Page 92: HTML5 Sensitivo

Suporte Mobile

6

Page 93: HTML5 Sensitivo

Microfone

Page 94: HTML5 Sensitivo

API

Page 95: HTML5 Sensitivo

APIWeb Speech

Media Capture

Page 96: HTML5 Sensitivo

Web Speech

Reconhecimento& Síntese

de voz

Page 97: HTML5 Sensitivo
Page 98: HTML5 Sensitivo

Reconhecimento de voz

Page 99: HTML5 Sensitivo
Page 100: HTML5 Sensitivo

Síntese de voz

Page 101: HTML5 Sensitivo

if ( document.createElement( ‘input’ ).webkitSpeech != undefined ){ // suporte garantido =)}

Teste o suporte

Page 102: HTML5 Sensitivo

<input type=”text” x-webkit-speech />

Marcação HTML

Page 103: HTML5 Sensitivo
Page 104: HTML5 Sensitivo
Page 105: HTML5 Sensitivo
Page 106: HTML5 Sensitivo

{ }

Page 107: HTML5 Sensitivo

document .getElementsByTagName( ‘input’ )[0] .addEventListener( ‘webkitspeechchange’, function( eventData ){ // sua mágica })

Evento

Page 108: HTML5 Sensitivo

eventData = { results: [ { confidence: 0.61285305, utterance: ‘praia’ }, ... ], ... // propriedades de Event}

Dados de webkitspeechange

Page 109: HTML5 Sensitivo

DEMO

Page 110: HTML5 Sensitivo

Suporte Desktop

Page 111: HTML5 Sensitivo

Suporte Desktop

22*

Page 112: HTML5 Sensitivo

Captura de Áudio

Media Capture

Page 113: HTML5 Sensitivo

BaixoNível

Page 114: HTML5 Sensitivo

BaixaLatência

Page 115: HTML5 Sensitivo

GuitarraMic externo

...

Page 116: HTML5 Sensitivo

// sem prefixos dos vendorsif ( navigator.getUserMedia ){ // we got it!}

Teste o suporte

Page 117: HTML5 Sensitivo

navigator.getUserMedia( { audio: true }, sucessoCallback, falhaCallback )

Permissão

Page 118: HTML5 Sensitivo
Page 119: HTML5 Sensitivo

Mix com Web Audio

Page 120: HTML5 Sensitivo

function sucessoCallback( stream ) { var context = new webkitAudioContext() var mediaStreamSource = context .createMediaStreamSource( stream ) mediaStreamSource.connect( filter1 ) ... filter1.connect( context.destination )}

Callback

Page 121: HTML5 Sensitivo

DEMO

Page 122: HTML5 Sensitivo

Suporte Desktop

Page 123: HTML5 Sensitivo

Suporte Desktop

216

Page 124: HTML5 Sensitivo

Suporte Mobile

Page 125: HTML5 Sensitivo

Suporte Mobile

6

Page 126: HTML5 Sensitivo

Câmera

Geolocalização

Acelerômetro

APIs do Além

Microfone

Page 127: HTML5 Sensitivo
Page 128: HTML5 Sensitivo

?

Page 129: HTML5 Sensitivo

@loopinfinito@almirfilho

@caio_gondim

Page 130: HTML5 Sensitivo

Obrigado!