web-dev-qa-db-ja.com

Javascriptから加速度計/ジャイロスコープのデータにアクセスする方法は？

私は最近、ラップトップの加速度計またはジャイロスコープにアクセスし、方向または動きの変化を検出しているように見えるいくつかのWebサイトに出会いました。

これはどのように行われますか？ windowオブジェクトで何らかのイベントをサブスクライブする必要がありますか？

これはどのデバイス（ラップトップ、携帯電話、タブレット）で動作することが知られていますか？

NB：私は実際にこの質問に対する回答（の一部）をすでに知っているので、すぐに投稿します。ここで質問を投稿する理由は、加速度計データisがJavascript（特定のデバイス上）で利用可能であることを他の人に知らせることと、主題に関する新しい調査結果を投稿するようコミュニティに挑戦することです。現在、これらの機能のドキュメントはほとんどないようです。

javascriptaccelerometergyroscope
131
Jørn Schou-Rode

現在、クライアントデバイスの移動時にトリガーされる場合とトリガーされない場合の3つの異なるイベントがあります。それらの2つは、オリエンテーションと最後のmotionに焦点を当てています：

  • ondeviceorientationは、Chromeのデスクトップバージョンで動作することが知られており、ほとんどのAppleラップトップは、これが動作するために必要なハードウェアを搭載しているようです。 iOS 4.2を搭載したiPhone 4のMobile Safariでも動作します。イベントハンドラー関数では、関数への唯一の引数として提供されたイベントデータのalpha、beta、gammaの値にアクセスできます。

  • onmozorientation は、Firefox 3.6以降でサポートされています。繰り返しますが、これはほとんどのAppleラップトップで動作することが知られていますが、加速度計を備えたWindowsまたはLinuxマシンでも動作する可能性があります。イベントハンドラー関数で、最初の引数として提供されたイベントデータのx、y、zフィールドを探します。

  • ondevicemotionは、iPhone 3GS + 4およびiPad（両方ともiOS 4.2で）で動作することが知られており、クライアントデバイスの現在のアクセラレーションに関連するデータを提供します。ハンドラー関数に渡されるイベントデータには、accelerationおよびaccelerationIncludingGravityがあり、両方とも軸ごとに3つのフィールドがあります：x、y、z

「地震検出」サンプルWebサイトは、一連の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は、後者の2つのイベントの読み取り値を最初のイベントの読み取り値と「調整」するために使用されますが、これらは決して正確ではありません表現。この単純な「おもちゃ」プロジェクトでは問題なく動作しますが、データを少し深刻なものに使用する必要がある場合は、さまざまなイベントで提供される値の単位に精通し、それらを尊重して扱う必要があります:)

179
Jørn Schou-Rode

他の投稿の優れた説明にコメントを追加することはできませんが、優れたドキュメントソースは here にあります。

次のように、加速度計のイベント関数を登録するだけで十分です。

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

また、磁力計の場合、次のイベントハンドラを登録する必要があります。

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 に簡単な作業コードがあります

20
Infinite Internship

2019+でこれを行う方法は、 DeviceOrientation AP​​I を使用することです。これは、デスクトップとモバイルの 最新のブラウザ で機能します。

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

イベントリスナー（この場合、handleOrientation（）と呼ばれるJavaScript関数）を登録した後、リスナー関数は更新された方向データで定期的に呼び出されます。

方向イベントには4つの値が含まれます。

  • 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
}
3
str

ここでの完全なフォールバック： 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);
1
Luckylooke