JavaScriptからアクセルメーター/ジャイロスコープデータにアクセスする方法は？

StackOverflow https://stackoverflow.com/questions/4378435

質問

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

これはどのように行われますか？何らかのイベントを購読する必要があります window 物体？

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

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

役に立ちましたか？

解決

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

  • ondeviceorientation Chromeのデスクトップバージョンで動作することが知られており、ほとんどのAppleラップトップには、これが機能するために必要なハードウェアがあるようです。また、iOS 4.2を備えたiPhone 4のモバイル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つのイベントからの測定値を最初のイベントと「整列」するために使用されますが、これらは 決してありません 正確な表現。この単純な「おもちゃ」プロジェクトでは、それは正常に機能しますが、少し深刻なものにデータを使用する必要がある場合は、さまざまなイベントで提供されている値の単位に精通し、敬意を持って扱う必要があります:)

他のヒント

他の投稿の優れた説明にコメントを追加することはできませんが、素晴らしいドキュメントソースが見つかることに言及したかったのです ここ.

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

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ノートでは機能しませんでした）。

単純な動作コードがあります github

2019年以上でこれを行う方法は使用することです DeviceOrientation API. 。これはで機能します ほとんどの最新のブラウザ デスクトップとモバイル。

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

イベントリスナーを登録した後（この場合、HeanderOrientation（）と呼ばれる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
}

ここで有用なフォールバック： 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);
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top