Como acessar os dados do acelerômetro / giroscópio a partir do Javascript?

Recentemente, encontrei alguns sites que parecem acessar o acelerômetro ou o giroscópio do meu laptop, detectando mudanças na orientação ou no movimento.

Como isso é feito? Eu devo assinar algum tipo de evento no object da window ?

Em quais dispositivos (laptops, celulares, tablets) isso é conhecido por funcionar?


NB : Eu na verdade já conheço (parte de) a resposta a essa pergunta, e vou postar imediatamente. A razão pela qual estou postando a questão aqui é informar a todos que os dados do acelerômetro estão disponíveis em Javascript (em determinados dispositivos) e desafiar a comunidade a postar novas descobertas sobre o assunto. Atualmente, parece não haver quase nenhuma documentação sobre esses resources.

Existem atualmente três events distintos que podem ou não ser acionados quando os dispositivos do cliente são movidos. Dois deles estão focados em orientação e o último em movimento :

  • ondeviceorientation se que a ondeviceorientation funciona na versão desktop do Chrome, e a maioria dos laptops da Apple parece ter o hardware necessário para que isso funcione. Ele também funciona no Mobile Safari no iPhone 4 com o iOS 4.2. Na function do manipulador de events, você pode acessar gamma valores alpha , beta e gamma nos dados do evento fornecidos como o único argumento para a function.

  • onmozorientation é suportado no Firefox 3.6 e mais recente. Novamente, isso é conhecido por funcionar na maioria dos laptops da Apple, mas também pode funcionar em máquinas Windows ou Linux com acelerômetro. Na function do manipulador de events, procure pelos campos x , y , z nos dados do evento fornecidos como primeiro argumento.

  • ondevicemotion é conhecida por funcionar no iPhone 3GS + 4 e iPad (ambos com o iOS 4.2) e fornece dados relacionados com a atual aceleração do dispositivo cliente. Os dados do evento passados ​​para a function de manipulador têm acceleration e accelerationIncludingGravity , que possuem dois campos para cada eixo: x , y , z

O site de amostra “detecção de terremotos” usa uma série de instruções if para descobrir a qual evento append (em uma ordem um pouco priorizada) e passa os dados recebidos para uma function de tilt comum:

 if (window.DeviceOrientationEvent) { window.addEventListener("deviceorientation", function () { tilt([event.beta, event.gamma]); }, true); } else if (window.DeviceMotionEvent) { window.addEventListener('devicemotion', function () { tilt([event.acceleration.x * 2, event.acceleration.y * 2]); }, true); } else { window.addEventListener("MozOrientation", function () { tilt([orientation.x * 50, orientation.y * 50]); }, true); } 

Os fatores constantes 2 e 50 são usados ​​para “alinhar” as leituras dos dois últimos events com os do primeiro, mas estas não são representações precisas. Para este projeto “brinquedo” simples, funciona muito bem, mas se você precisar usar os dados para algo um pouco mais sério, você terá que se familiarizar com as unidades dos valores fornecidos nos diferentes events e tratá-los com respeito 🙂

Não é possível adicionar um comentário à excelente explicação no outro post, mas queria mencionar que uma ótima fonte de documentação pode ser encontrada aqui .

É suficiente registrar uma function de evento para o acelerômetro da seguinte forma:

 if(window.DeviceMotionEvent){ window.addEventListener("devicemotion", motion, false); }else{ console.log("DeviceMotionEvent is not supported"); } 

com o manipulador:

 function motion(event){ console.log("Accelerometer: " + event.accelerationIncludingGravity.x + ", " + event.accelerationIncludingGravity.y + ", " + event.accelerationIncludingGravity.z ); } 

E para o magnetômetro, o seguinte manipulador de events deve ser registrado:

 if(window.DeviceOrientationEvent){ window.addEventListener("deviceorientation", orientation, false); }else{ console.log("DeviceOrientationEvent is not supported"); } 

com um manipulador:

 function orientation(event){ console.log("Magnetometer: " + event.alpha + ", " + event.beta + ", " + event.gamma ); } 

Também existem campos especificados no evento de movimento para um giroscópio, mas isso não parece ser universalmente suportado (por exemplo, não funcionou em um Samsung Galaxy Note).

Existe um código de trabalho simples no GitHub

Queda útil aqui: https://developer.mozilla.org/pt-BR/docs/Web/Events/MozOrientation

 function orientationhandler(evt){ // For FF3.6+ if (!evt.gamma && !evt.beta) { evt.gamma = -(evt.x * (180 / Math.PI)); evt.beta = -(evt.y * (180 / Math.PI)); } // use evt.gamma, evt.beta, and evt.alpha // according to dev.w3.org/geo/api/spec-source-orientation } window.addEventListener('deviceorientation', orientationhandler, false); window.addEventListener('MozOrientation', orientationhandler, false); 
    Intereting Posts