Sensores do celular direto no navegador

Eu sempre tive dois apps no celular que quase nunca abro. Um é um letreiro de LED, que eu uso para pedir música em show. O outro é um nível de bolha, para quando vou pendurar um quadro ou quero ver se o chão está torto. Os dois ficam lá, ocupando espaço, esperando o próximo show ou o próximo quadro.

Aí veio a pergunta: dá para fazer isso numa página? O letreiro, sim, é só desenhar. Mas o nível precisa saber como o celular está inclinado, e isso é coisa de sensor. Fui ver o que o navegador alcança, e é bem mais do que eu imaginava.

O que o Chrome lê do celular

No Chrome do Android, uma página pode usar:

• Movimento: acelerômetro, giroscópio e bússola, que juntos dizem para onde o celular aponta e como ele está inclinado.
• Localização pelo GPS, câmera e microfone, cada um com a pergunta de permissão que todo mundo conhece.
• Realidade aumentada, com o ARCore: a página enxerga o chão e as paredes e dá para medir distâncias, como uma trena.
• Bluetooth, USB e NFC, para conversar com outros aparelhos.
• Vibração, bateria, tipo de rede, e dois que eu usei: manter a tela acesa e travar a orientação da tela.

Ficam de fora o barômetro, o sensor de proximidade, o contador de passos e os batimentos. A digital só aparece no login com passkey, e a página nunca vê a digital em si. No iPhone a lista é bem menor: movimento, localização, câmera e microfone. E o movimento só depois de um toque num botão que pede permissão.

O nível

O evento deviceorientation entrega a inclinação em graus, várias vezes por segundo:

addEventListener('deviceorientation', (event) => {
	console.log(event.beta, event.gamma); // topo para cima e direita para baixo, em graus
});

Com esses dois ângulos dá para calcular para onde fica o “para cima” nos eixos do celular. Se ele aponta para fora da tela, o celular está deitado, e o nível mostra uma bolha redonda com os dois eixos. Se aponta para um dos lados, o celular está em pé na borda, e a bolha vira um tubo, como num nível de pedreiro. O desenho gira junto, para ficar de pé para quem segura.

A parte que eu mais gostei é a calibração. Todo sensor sai de fábrica com um errinho de alguns décimos de grau. Para descobrir quanto, você mede, gira o celular 180° no mesmo lugar e mede de novo. A inclinação da mesa troca de sinal quando você gira, e o erro do sensor não. Então o erro é a média das duas leituras, e ele é descontado de todas as medições seguintes. É o mesmo truque de um nível de verdade.

Por que o navegador arredonda as leituras

Esse errinho de fábrica tem um problema: ele é diferente em cada aparelho, e não muda. Em 2019, pesquisadores de Cambridge mostraram no SensorID que menos de um segundo de leituras basta para descobrir a calibração de um celular, e que ela funciona como uma impressão digital: identifica o aparelho de um site para outro, sem cookie nenhum, e continua igual até depois de restaurar o celular de fábrica.

Por isso a especificação manda arredondar a orientação em 0,1° e a aceleração em 0,1 m/s². Nos meus testes, o Chrome já arredonda a aceleração: mandei 9,81 e a página recebeu 9,80. Perto do nível, 0,1 m/s² vira degraus de quase 0,6°, o que é grosseiro demais para pendurar um quadro. A orientação em décimos de grau não tem esse problema, então o nível usa ela, e a aceleração fica de reserva.

O letreiro

O letreiro escreve a mensagem com a fonte dos títulos do site e corta as letras em 16 linhas de pontos. Cada ponto acende quando a letra cobre mais da metade dele. Com 46%, a borda do “O” acendia um ponto solto do lado, e eu tive que subir para metade.

Na tela cheia, o Chrome do Android deixa travar a tela deitada, e a página pede para a tela não apagar. No iPhone não existe tela cheia para página, então o letreiro cobre a página e aparece girado.

E tem uma coisa que app nenhum precisa e uma página precisa: funcionar sem internet, porque sinal em show cheio é uma loteria. Um service worker guarda a página e os arquivos dela no celular na primeira visita. Depois disso, o letreiro abre até no modo avião.

Sem app e sem anúncio

As duas ferramentas estão em Ferramentas, junto com as outras. Nenhuma das duas manda nada para lugar nenhum: as páginas nem têm permissão de abrir conexões, então o que você escreve no letreiro e o que o nível mede ficam no seu celular.

Se você usa iPhone, me conta se funcionou aí.