Làm cách nào để truy cập dữ liệu gia tốc kế / con quay hồi chuyển từ Javascript?

Gần đây tôi đã bắt gặp một vài trang web dường như truy cập gia tốc kế hoặc con quay hồi chuyển trên máy tính xách tay của tôi, phát hiện những thay đổi trong hướng hoặc chuyển động.

Làm thế nào được thực hiện? Tôi phải đăng ký một số loại sự kiện trên windowđối tượng?

Những thiết bị nào (máy tính xách tay, điện thoại di động, máy tính bảng) được biết là hoạt động?

^{NB : Tôi thực sự đã biết (một phần) câu trả lời cho câu hỏi này, và tôi sẽ đăng nó ngay lập tức. Lý do mà tôi gửi câu hỏi ở đây, là để cho những người khác biết rằng dữ liệu gia tốc là có sẵn trong Javascript (trên các thiết bị nhất định) và thách thức cộng đồng để gửi những phát hiện mới về đề tài này. Hiện tại, dường như gần như không có tài liệu nào về các tính năng này.}

Cách để làm điều này trong năm 2019+ là sử dụng DeviceOrientationAPI . Điều này hoạt động trong hầu hết các trình duyệt hiện đại trên máy tính để bàn và thiết bị di động.

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

Sau khi đăng ký trình nghe sự kiện của bạn (trong trường hợp này, một hàm JavaScript có tên là handOrientation ()), hàm nghe của bạn định kỳ được gọi với dữ liệu định hướng được cập nhật.

Sự kiện định hướng chứa bốn giá trị:

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

Hàm xử lý sự kiện có thể trông giống như thế này:

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
}

Hiện tại có ba sự kiện riêng biệt có thể hoặc không thể được kích hoạt khi thiết bị khách di chuyển. Hai trong số chúng được tập trung xung quanh định hướng và cuối cùng về chuyển động :

• ondeviceorientationđược biết là hoạt động trên phiên bản Chrome dành cho máy tính để bàn và hầu hết các máy tính xách tay của Apple dường như có phần cứng cần thiết để hoạt động. Nó cũng hoạt động trên Mobile Safari trên iPhone 4 với iOS 4.2. Trong hàm xử lý sự kiện, bạn có thể truy cập alpha, beta, gammagiá trị trên dữ liệu sự kiện được cung cấp như là đối số chỉ để hàm.

• onmozorientationđược hỗ trợ trên Firefox 3.6 và mới hơn. Một lần nữa, điều này được biết là hoạt động trên hầu hết các máy tính xách tay của Apple, nhưng cũng có thể hoạt động trên các máy Windows hoặc Linux với gia tốc kế. Trong hàm xử lý sự kiện, nhìn cho x, y, zlĩnh vực trên dữ liệu sự kiện được cung cấp như là đối số đầu tiên.

• ondevicemotionđược biết là hoạt động trên iPhone 3GS + 4 và iPad (cả với iOS 4.2) và cung cấp dữ liệu liên quan đến khả năng tăng tốc hiện tại của thiết bị khách. Các dữ liệu sự kiện truyền cho hàm xử lý có accelerationvà accelerationIncludingGravity, mà cả hai đều có ba lĩnh vực cho mỗi trục: x, y,z

Trang web mẫu "phát hiện động đất" sử dụng một loạt các iftuyên bố để tìm ra sự kiện nào sẽ được đính kèm (theo thứ tự ưu tiên nhất định) và chuyển dữ liệu nhận được đến một tiltchức năng chung :

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

Các yếu tố không đổi 2 và 50 được sử dụng để "căn chỉnh" các bài đọc từ hai sự kiện sau với các sự kiện từ lần đầu tiên, nhưng đây không có nghĩa là các biểu diễn chính xác. Đối với dự án "đồ chơi" đơn giản này, nó hoạt động rất tốt, nhưng nếu bạn cần sử dụng dữ liệu cho một cái gì đó nghiêm trọng hơn một chút, bạn sẽ phải làm quen với các đơn vị của các giá trị được cung cấp trong các sự kiện khác nhau và đối xử với chúng một cách tôn trọng :)

Không thể thêm một bình luận cho lời giải thích tuyệt vời trong bài đăng khác nhưng muốn đề cập rằng một nguồn tài liệu tuyệt vời có thể được tìm thấy ở đây .

Nó là đủ để đăng ký một chức năng sự kiện cho gia tốc kế như vậy:

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

với người xử lý:

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

Và đối với từ kế, một trình xử lý sự kiện sau phải được đăng ký:

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

với một xử lý:

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

Ngoài ra còn có các trường được chỉ định trong sự kiện chuyển động cho con quay hồi chuyển nhưng dường như không được hỗ trợ toàn cầu (ví dụ: nó không hoạt động trên Samsung Galaxy Note).

Có một mã làm việc đơn giản trên GitHub

Dự phòng hữu ích tại đây: 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);