es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Detectar evento de agitación con Javascript, en todos los principales navegadores/dispositivos (iOS, Android)

Detectar evento de agitación con Javascript, en todos los principales navegadores/dispositivos (iOS, Android)

31 Jul, 2023 Programación

He leído https://stackoverflow.com/questions/2202216/javascript-listen-for-iphone-shake-event y https://stackoverflow.com/questions/12334160/detecting-shaking-in-html5-mobile que proporcionan una buena solución para detectar un evento de “shake” en un teléfono móvil:

<script src="shake.js"></script>
<script>
var myShakeEvent = new Shake({threshold: 15, timeout: 1000});
myShakeEvent.start(); 
window.addEventListener('shake', function() { alert('¡shake!'); }, false); 
</script>

Desafortunadamente, esto no parece funcionar con dispositivos iOS recientes y este problema (https://github.com/alexgibson/shake.js/issues/53) muestra que se debe otorgar un permiso especial para versiones recientes de iOS. Tenga en cuenta que el código de aquí (https://dev.to/li/how-to-requestpermission-for-devicemotion-and-deviceorientation-events-in-ios-13-46g2) no es fácilmente utilizable en la biblioteca shake.js.

Pregunta: ¿Qué método está disponible, a partir de 2022, para detectar un evento de “shake” con Javascript que funcione en los principales navegadores (Firefox, Chrome, Safari) y dispositivos móviles (iOS, Android)?

Está bien si hay una ventana emergente que solicita permiso primero (como las ventanas emergentes que solicitan permiso para solicitudes de geolocalización).

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    A partir de 2022, el mejor método para detectar un evento de “shake” con Javascript, que funcione en los navegadores principales (Firefox, Chrome, Safari) y dispositivos móviles (iOS, Android), es utilizando la API DeviceMotionEvent. Esta API proporciona información sobre la aceleración, la velocidad de rotación y la orientación del dispositivo.

    Para detectar un evento de “shake” utilizando la API DeviceMotionEvent, primero tendrías que solicitar permiso para acceder a los sensores de movimiento del dispositivo. Esto se puede hacer utilizando la API de Permisos (Permissions API) o agregando una solicitud de permiso para usar la API DeviceMotionEvent en un controlador de eventos de gestos del usuario.

    Una vez que se otorga el permiso, puedes escuchar un cambio en los valores de aceleración proporcionados por la API DeviceMotionEvent. Si el cambio en los valores de aceleración supera un umbral determinado, puedes considerarlo un evento de “shake”.

    Aquí tienes un ejemplo de fragmento de código que muestra cómo escuchar un evento de “shake” utilizando la API DeviceMotionEvent:

    if (typeof DeviceMotionEvent.requestPermission === 'function') {
  DeviceMotionEvent.requestPermission()
    .then(permissionState => {
      if (permissionState === 'granted') {
        window.addEventListener('devicemotion', handleMotionEvent, true);
      }
    })
    .catch(console.error);
} else {
  window.addEventListener('devicemotion', handleMotionEvent, true);
}

function handleMotionEvent(event) {
  // Obtén los valores de aceleración, velocidad de rotación y orientación
  // de las propiedades event.alpha, event.beta, event.gamma

  // Comprueba si el cambio en los valores de aceleración supera un umbral determinado
  if (Math.abs(event.acceleration.x - prevAcceleration.x) > threshold ||
      Math.abs(event.acceleration.y - prevAcceleration.y) > threshold ||
      Math.abs(event.acceleration.z - prevAcceleration.z) > threshold) {
      // Es un evento de "shake"
      alert('¡Sacudida!');
  }

  // Guarda los valores de aceleración actuales para el próximo evento
  prevAcceleration.x = event.acceleration.x;
  prevAcceleration.y = event.acceleration.y;
  prevAcceleration.z = event.acceleration.z;
}

    Ten en cuenta que este método todavía requiere permiso por parte del usuario, pero es una solución más robusta que funciona en todos los dispositivos y navegadores.

Comments are closed.