วิธีเข้าถึงข้อมูล accelerometer / gyroscope จาก Javascript

ฉันเพิ่งเจอเว็บไซต์ไม่กี่แห่งที่ดูเหมือนจะเข้าถึง accelerometer หรือไจโรสโคปบนแล็ปท็อปของฉันตรวจพบการเปลี่ยนแปลงในทิศทางหรือการเคลื่อนไหว

สิ่งนี้ทำได้อย่างไร ฉันต้องสมัครสมาชิกกับเหตุการณ์บางอย่างบนwindowวัตถุหรือไม่

อุปกรณ์นี้ (แล็ปท็อป, โทรศัพท์มือถือ, แท็บเล็ต) เป็นที่รู้จักกันไหม

^{NB : จริง ๆ แล้วฉันรู้แล้ว (ส่วนหนึ่ง) คำตอบของคำถามนี้และฉันจะโพสต์ทันที เหตุผลที่ฉันโพสต์คำถามที่นี่คือเพื่อให้ทุกคนรู้ว่าข้อมูล accelerometer มีอยู่ใน Javascript (ในอุปกรณ์บางอย่าง) และท้าทายชุมชนเพื่อโพสต์สิ่งที่ค้นพบใหม่ในเรื่องนี้ ขณะนี้ดูเหมือนจะไม่มีเอกสารของคุณสมบัติเหล่านี้}

วิธีการที่จะทำเช่นนี้ใน 2019+ คือการใช้APIDeviceOrientation สิ่งนี้ทำงานได้ในเบราว์เซอร์ที่ทันสมัยที่สุดบนเดสก์ท็อปและมือถือ

window.addEventListener("deviceorientation", handleOrientation, true);

หลังจากลงทะเบียนฟังเหตุการณ์ของคุณ (ในกรณีนี้ฟังก์ชั่น JavaScript ที่เรียกว่า handleOrientation ()) ฟังก์ชั่นฟังของคุณจะได้รับการเรียกเป็นระยะพร้อมกับข้อมูลปฐมนิเทศที่อัปเดต

เหตุการณ์ปฐมนิเทศประกอบด้วยค่าสี่ค่า:

• DeviceOrientationEvent.absolute
• DeviceOrientationEvent.alpha
• DeviceOrientationEvent.beta
• DeviceOrientationEvent.gamma

ฟังก์ชันตัวจัดการเหตุการณ์สามารถมีลักษณะดังนี้:

function handleOrientation(event) {
  var absolute = event.absolute;
  var alpha    = event.alpha;
  var beta     = event.beta;
  var gamma    = event.gamma;
  // Do stuff with the new orientation data
}

ขณะนี้มีสามเหตุการณ์ที่แตกต่างกันซึ่งอาจหรือไม่อาจเกิดขึ้นเมื่ออุปกรณ์ไคลเอนต์เคลื่อนที่ สองของพวกเขาจะเน้นไปที่การวางแนวทางและล่าสุดเมื่อวันที่เคลื่อนไหว :

• ondeviceorientationเป็นที่ทราบกันดีว่าทำงานบน Chrome รุ่นเดสก์ท็อปได้และแล็ปท็อป Apple ส่วนใหญ่ดูเหมือนจะมีฮาร์ดแวร์ที่จำเป็นสำหรับการทำงานนี้ มันยังทำงานบน Mobile Safari บน iPhone 4 กับ iOS 4.2 ในฟังก์ชั่นการจัดการเหตุการณ์นี้คุณสามารถเข้าถึงalpha, beta, gammaค่าในข้อมูลเหตุการณ์ที่จัดเป็นอาร์กิวเมนต์เท่านั้นที่จะฟังก์ชั่น

• onmozorientationได้รับการสนับสนุนบน Firefox 3.6 และใหม่กว่า เป็นที่ทราบกันดีว่าสามารถใช้งานได้กับแล็ปท็อปส่วนใหญ่ของ Apple แต่อาจทำงานบนเครื่อง Windows หรือ Linux ด้วย accelerometer ได้เช่นกัน ในฟังก์ชั่นการจัดการเหตุการณ์, มองหาx, y, zสาขาในข้อมูลเหตุการณ์ที่จัดเป็นอาร์กิวเมนต์แรก

• ondevicemotionเป็นที่รู้จักกันในการทำงานบน iPhone 3GS + 4 และ iPad (ทั้งที่มี iOS 4.2) และให้ข้อมูลที่เกี่ยวข้องกับการเร่งความเร็วปัจจุบันของอุปกรณ์ไคลเอนต์ ข้อมูลเหตุการณ์ผ่านไปยังฟังก์ชันจัดการมีaccelerationและaccelerationIncludingGravityซึ่งทั้งสองมีสามช่องสำหรับแต่ละแกน: x, y,z

เว็บไซต์ตัวอย่าง "การตรวจจับแผ่นดินไหว" ใช้ชุดifคำสั่งเพื่อกำหนดว่าเหตุการณ์ใดที่จะแนบไป (ตามลำดับความสำคัญค่อนข้าง) และส่งผ่านข้อมูลที่ได้รับไปยังtiltฟังก์ชันทั่วไป:

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

ปัจจัยคงที่ 2 และ 50 ถูกใช้เพื่อ "จัดตำแหน่ง" การอ่านจากเหตุการณ์สองเหตุการณ์หลังกับเหตุการณ์ในตอนแรก แต่สิ่งเหล่านี้ไม่ได้เป็นตัวแทนที่แม่นยำ สำหรับโครงการ "ของเล่น" ที่เรียบง่ายนี้ใช้งานได้ดี แต่ถ้าคุณต้องการใช้ข้อมูลเพื่ออะไรที่จริงจังกว่านี้คุณจะต้องทำความคุ้นเคยกับหน่วยของค่าที่ให้ไว้ในเหตุการณ์ต่าง ๆ และปฏิบัติต่อพวกเขาด้วยความเคารพ :)

ไม่สามารถเพิ่มความคิดเห็นที่คำอธิบายที่ดีเยี่ยมในการโพสต์อื่น ๆ แต่อยากจะกล่าวถึงว่าเป็นแหล่งที่เอกสารที่ดีสามารถพบได้ที่นี่

มันเพียงพอที่จะลงทะเบียนฟังก์ชันเหตุการณ์สำหรับ accelerometer ดังนี้:

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

กับผู้ดูแล:

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

และสำหรับ magnetometer ต้องมีการลงทะเบียนตัวจัดการเหตุการณ์ต่อไปนี้:

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

ด้วยตัวจัดการ:

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

นอกจากนี้ยังมีฟิลด์ที่ระบุในเหตุการณ์การเคลื่อนไหวของไจโรสโคป แต่ดูเหมือนจะไม่ได้รับการสนับสนุนในระดับสากล (เช่นมันไม่ได้ทำงานบน Samsung Galaxy Note)

มีโค้ดที่ใช้งานง่ายบนGitHub

ใช้ทางเลือกสำรองที่นี่: https://developer.mozilla.org/en-US/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);