1.
@almirfilho
@caio_gondim
@loopinfinito

2.
HTML5 Sensitivo
Seu browser + LSD

3.
Acesso a
dispositivos

4.
APIs do Além

5.
APIs do Além
Acelerômetro

6.
APIs do Além
Acelerômetro
Geolocalização

7.
APIs do Além
Acelerômetro
Geolocalização
Câmera

8.
APIs do Além
Acelerômetro
Geolocalização
Câmera
Microfone

9.
@caio_gondim
@almirfilho

10.
@loopinfinito

11.
loopinfinito.com.br

12.
APIs do Além
Acelerômetro
Geolocalização
Câmera
Microfone

13.
Acelerômetro

14.
Orientação
&
Aceleração

15.
Sistema de
Coordenadas

16.
y
Sistema de
Coordenadas

17.
y
x
Sistema de
Coordenadas

18.
z y
x
Sistema de
Coordenadas

19.
Rotação z y
x

20.
Rotação
z y
alpha
x

21.
Rotação z y
x
beta

22.
Rotação z y
gamma
x

23.
API

24.
API
DeviceOrientationEvent
DeviceMotionEvent

25.
Orientação
DeviceOrientationEvent

26.
Obtém a
Rotação dos eixos

27.
Obtém a
Rotação dos eixos
x y z

28.
Obtém a
Rotação dos eixos
x y z
beta gamma alpha

29.
beta gamma alpha
em graus

30.
z
alpha = 0º

31.
z
alpha = 25º

32.
x
beta = 0º

33.
x
beta = 30º

34.
y
gamma = 0º

35.
y
gamma = 45º

36.
JavaScript
por favor!

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

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

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

40.
Aceleração
DeviceMotionEvent

41.
Obtém dados
sobre movimentos
físicos em cada eixo

42.
Obtém dados
sobre movimentos
físicos em cada eixo
x y z

43.
x y z
em m/s²

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

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

46.
Dados de devicemotion
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
}

47.
DEMO

48.
Suporte Desktop

49.
Suporte Desktop
7 6
(parcial) (parcial)

50.
Suporte Mobile

51.
Suporte Mobile
4.2 18
15
12 3.0 10

52.
APIs do Além
Acelerômetro
Geolocalização
Câmera
Microfone

53.
Geolocalização

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

55.
Quem usa?
serviços de mapas
redes sociais
aplicações e-gov

56.
Localização = Contexto

57.
Localização = Contexto
Maior relevância

58.
Busca
&
Recomendação
mais eficazes

59.
Obtendo a
Geolocalização
Desktop x Móvel

60.
Desktop
Posição
Localização
fixa
aproximada

61.
Móvel
Posição
Localização
variável
mais exata

62.
API

63.
API
navigator.geolocation

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

65.
// requisitando geolocalização
navigator.geolocation.getCurrentPosition( showMap )
// setando o callback
function showMap( position ){
// só alegria
}
Defina o callback

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

67.
DEMO

68.
Suporte Desktop

69.
Suporte Desktop
5 3.5
9
5
10.6

70.
Suporte Mobile

71.
Suporte Mobile
3.2 18
15
11 2.1 7

72.
API’s do Além
Acelerômetro
Geolocalização
Câmera
Microfone

73.
Câmera

74.
WebRTC

75.
WebRTC
Real-Time
Communications

76.
API

77.
API
Stream
Media Capture

78.
API
Stream

79.
Stream
input
MediaStream <video>
MediaStream
Track
video
MediaStream
Track
audio
PeerConection

80.
API
Media Capture

81.
// sem prefixos dos vendors
if ( navigator.getUserMedia ){
// câmera, ação!
}
Teste o suporte

82.
Permissão
navigator.getUserMedia(
{ video: true },
sucessoCallback,
falhaCallback
)

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

84.
Mix com
<canvas>

85.
Mix com
WebGL

86.
DEMO

87.
APIs do Além
Acelerômetro
Geolocalização
Câmera
Microfone

88.
Suporte Desktop

89.
Suporte Desktop
6 21

90.
Suporte Mobile

91.
Suporte Mobile
6

92.
Microfone

93.
API

94.
API
Web Speech
Media Capture

95.
Reconhecimento
& Síntese
de voz
Web Speech

96.
Reconhecimento
de voz

97.
Síntese de voz

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

99.
Marcação HTML
<input type=”text” x-webkit-speech />

100.
{ }

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

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

103.
DEMO

104.
Suporte Desktop

105.
Suporte Desktop
22*

106.
Captura de
Áudio
Media Capture

107.
Baixo
Nível

108.
Baixa
Latência

109.
Guitarra
Mic externo
...

110.
// sem prefixos dos vendors
if ( navigator.getUserMedia ){
// we got it!
}
Teste o suporte

111.
Permissão
navigator.getUserMedia(
{ audio: true },
sucessoCallback,
falhaCallback
)

112.
Mix com
Web Audio

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

114.
DEMO

115.
Suporte Desktop

116.
Suporte Desktop
6 21

117.
Suporte Mobile

118.
Suporte Mobile
6

119.
APIs do Além
Acelerômetro
Geolocalização
Câmera
Microfone

120.
?

121.
@loopinfinito
@almirfilho
@caio_gondim

122.
Obrigado!