Sensoren für das Web

Verwenden Sie die Generic Sensor API, um Zugriff auf Gerätesensoren wie Beschleunigungsmesser, Gyroskope und Magnetometer zu erhalten.

Alex Shalamov

Mikhail Pozdnyakov

Thomas Steiner

Heutzutage werden Sensordaten in vielen plattformspezifischen Anwendungen eingesetzt, um Anwendungsfälle wie immersives Gaming, Fitness-Tracking und Augmented bzw. Virtual Reality. Wäre es nicht cool, Brücken zu bauen die Lücke zwischen plattformspezifischen und Webanwendungen? Geben Sie den Generic Sensor API für das Web.

Was ist die Generic Sensor API?

Die Generic Sensor API besteht aus einer Reihe von Schnittstellen, über die mit der Webplattform zu verbinden. Die API besteht aus der Basis Sensor-Schnittstelle und eine Reihe konkreter auf Basis von Sensorklassen. Eine Basisschnittstelle vereinfacht die Implementierung und Spezifikation. für die konkreten Sensorklassen. Sehen Sie sich zum Beispiel die Klasse Gyroscope. Es ist superklein! Die Die Hauptfunktion wird von der Basisschnittstelle angegeben und Gyroscope erweitert sie lediglich um drei Attribute, die die Winkelgeschwindigkeit darstellen.

Einige Sensorklassen sind mit Hardwaresensoren verbunden, wie z. B. dem Beschleunigungsmesser oder Gyroskopkursen. Diese Sensoren werden auch als Low-Level-Sensoren bezeichnet. Andere Sensoren, die als Fusionssensoren, führen Sie Daten aus verschiedenen Low-Level- um Informationen sichtbar zu machen, die ein Skript berechnen müsste. Beispiel: Der Parameter AbsoluteOrientation-Sensor eine einsatzbereite 4-mal-4-Rotationsmatrix basierend auf den Daten aus der Beschleunigungsmesser, Gyroskop und Magnetometer.

Sie denken vielleicht, dass die Webplattform bereits Sensordaten bereitstellt, und damit haben Sie absolut recht! Für Instanz DeviceMotion und DeviceOrientation Bewegungssensordaten verfügbar sind. Wozu brauchen wir also eine neue API?

Im Vergleich zu den vorhandenen Schnittstellen bietet die Generic Sensor API zahlreiche Vorteile:

• Die Generic Sensor API ist ein Sensor-Framework, das einfach mit neuen Sensorklassen und behalten alle diese Klassen die generische Schnittstelle bei. Der Clientcode, der für einen Sensortyp geschrieben wurde können mit nur wenigen Änderungen für eine andere Kampagne verwendet werden.
• Du kannst den Sensor konfigurieren. Sie können beispielsweise die Stichprobenhäufigkeit für Ihre Anforderungen der Anwendung.
• Sie können feststellen, ob auf der Plattform ein Sensor verfügbar ist.
• Die Sensormesswerte haben Zeitstempel mit hoher Genauigkeit, was eine bessere Synchronisierung mit anderen Aktivitäten in Ihrer Anwendung.
• Sensordatenmodelle und Koordinatensysteme sind klar definiert, sodass Browseranbieter interoperable Lösungen implementieren.
• Die auf dem generischen Sensor basierenden Schnittstellen sind nicht an das DOM gebunden (d. h. sie sind auch nicht navigator noch window-Objekte). Dies eröffnet zukünftige Möglichkeiten zur Verwendung der API innerhalb des Dienstes oder in monitorlosen JavaScript-Laufzeiten wie eingebetteten Geräte.
• Sicherheit und Datenschutz haben für den generischen Sensor höchste Priorität. API und bieten im Vergleich zu älteren Sensor-APIs wesentlich mehr Sicherheit. Es gibt die Integration mit der Permissions API.
• Die automatische Synchronisierung mit Bildschirmkoordinaten ist verfügbar für Accelerometer, Gyroscope, LinearAccelerationSensor, AbsoluteOrientationSensor, RelativeOrientationSensor und Magnetometer.

Verfügbare generische Sensor-APIs

Zum Zeitpunkt der Erstellung dieses Dokuments gibt es mehrere Sensoren, mit denen Sie experimentieren können.

Bewegungssensoren:

• Accelerometer
• Gyroscope
• LinearAccelerationSensor
• AbsoluteOrientationSensor
• RelativeOrientationSensor
• GravitySensor

Umgebungssensoren:

• AmbientLightSensor (Hinter der #enable-generic-sensor-extra-classes-Markierung in Chromium)
• Magnetometer (Hinter der #enable-generic-sensor-extra-classes-Markierung in Chromium)

Funktionserkennung

Die Funktionserkennung von Hardware-APIs ist schwierig, da sowohl erkannt werden muss, ob der Browser die betreffende Schnittstelle unterstützt und ob das Gerät über den entsprechenden Sensor verfügt. Wird geprüft ob der Browser eine Oberfläche unterstützt. (Ersetzen Sie Accelerometer durch einen der folgenden Werte: anderen oben erwähnten Schnittstellen.

if ('Accelerometer' in window) {
  // The `Accelerometer` interface is supported by the browser.
  // Does the device have an accelerometer, though?
}

Damit Sie aussagekräftige Ergebnisse bei der Funktionserkennung erhalten, müssen Sie auch versuchen, eine Verbindung zum Sensor herzustellen. Dieses Beispiel zeigt, wie das geht.

let accelerometer = null;
try {
  accelerometer = new Accelerometer({ frequency: 10 });
  accelerometer.onerror = (event) => {
    // Handle runtime errors.
    if (event.error.name === 'NotAllowedError') {
      console.log('Permission to access sensor was denied.');
    } else if (event.error.name === 'NotReadableError') {
      console.log('Cannot connect to the sensor.');
    }
  };
  accelerometer.onreading = (e) => {
    console.log(e);
  };
  accelerometer.start();
} catch (error) {
  // Handle construction errors.
  if (error.name === 'SecurityError') {
    console.log('Sensor construction was blocked by the Permissions Policy.');
  } else if (error.name === 'ReferenceError') {
    console.log('Sensor is not supported by the User Agent.');
  } else {
    throw error;
  }
}

Polyfill

Für Browser, die die Generic Sensor API nicht unterstützen, wird ein Polyfill ist verfügbar. Mit Polyfill können Sie nur die relevanten Sensoren laden Implementierungen.

// Import the objects you need.
import { Gyroscope, AbsoluteOrientationSensor } from './src/motion-sensors.js';

// And they're ready for use!
const gyroscope = new Gyroscope({ frequency: 15 });
const orientation = new AbsoluteOrientationSensor({ frequency: 60 });

Was sind diese Sensoren? Wie kann ich sie verwenden?

Die Sensoren sind ein Bereich, der möglicherweise kurz vorgestellt werden muss. Wenn Sie mit Sensoren vertraut sind, können Sie gehen Sie direkt zum Abschnitt für das praxisorientierte Programmieren. Sehen wir uns ansonsten die einzelnen des Sensors genauer an.

Beschleunigungsmesser und linearer Beschleunigungssensor

Accelerometer-Sensor misst die Beschleunigung eines Geräts, auf dem sich der Sensor auf drei Achsen (X, Y und Z) befindet. Dieser Sensor ist ein Trägheitssensor, d. h., wenn sich das Gerät im linearen Freifall befindet, Die Beschleunigung beträgt 0 m/s². Liegt ein Gerät flach auf einem Tisch, ist die Beschleunigung nach oben (Z-Achse) entspricht der Schwerkraft der Erde, d. h. g ✔ +9,8 m/s² als wird die Kraft gemessen, die durch den Tisch entsteht, der das Gerät nach oben drückt. Wenn Sie das Gerät in die wäre die Beschleunigung auf der X-Achse positiv oder negativ, wenn das Gerät von von rechts nach links.

Beschleunigungsmesser können beispielsweise für Schrittzählung, Bewegungserkennung oder einfache Geräte verwendet werden. Ausrichtung. Häufig werden die Messungen des Beschleunigungsmessers mit Daten aus anderen Quellen kombiniert, um Fusionssensoren wie z. B. Ausrichtungssensoren erstellen.

Die LinearAccelerationSensor misst die Beschleunigung, die auf das Gerät angewendet wird, auf dem der Sensor gehostet wird, ohne den Beitrag der Schwerkraft. Bei Ruhezustand eines Geräts, z. B. wenn es flach auf dem Tisch liegt, misst der Sensor ≤ 0 m/s²-Beschleunigung auf drei Achsen.

Schwerkraftsensor

Benutzer können bereits manuell Messwerte ableiten, die denen eines Schwerkraftsensors nahe kommen, indem sie die Messwerte für Accelerometer und LinearAccelerometer manuell prüfen, aber das kann umständlich sein. und hängen von der Genauigkeit der von diesen Sensoren gelieferten Werte ab. Plattformen wie Android können Gravitationswerte als Teil des Betriebssystems bereitstellen, was in Bezug auf Berechnung, liefern je nach Hardware des Nutzers genauere Werte und sind einfacher in im Hinblick auf die API-Ergonomie. Die GravitySensor gibt den Effekt zurück der Beschleunigung entlang der Schwerkraft auf der X-, Y- und Z-Achse des Geräts.

Gyroskop

Der Gyroscope-Sensor misst Winkelgeschwindigkeit in Radianten pro Sekunde um die lokale X-, Y- und Z-Achse des Geräts herum. Die meisten Nutzer Geräte haben ein mechanisches Speicherverfahren (MEMS). Gyroskope, Trägheitssensoren, die die Rotationsrate auf Grundlage von inertiale Corioliskraft. MEMS-Gyroskope sind anfällig für die durch die Gravitationsempfindlichkeit des Sensors verursacht wird, die die internes mechanisches System. Gyroskope schwingen bei relativ hohen Frequenzen, z.B. 10 kHz und und verbraucht daher im Vergleich zu anderen Sensoren möglicherweise mehr Strom.

Ausrichtungssensoren

Die AbsoluteOrientationSensor ist ein Fusionssensor, der die Drehung eines Geräts in Bezug auf das Koordinatensystem der Erde misst. während die RelativeOrientationSensor stellt Daten zur Drehung eines Geräts bereit, das Bewegungssensoren in Bezug auf ein stationäres Gerät besitzt Referenzkoordinatensystem.

Alle modernen 3D-JavaScript-Frameworks unterstützen Quaternions und Rotationsmatrizen zur Darstellung der Rotation; Wenn Sie jedoch WebGL direkt verwenden, verfügt die OrientationSensor praktischerweise über ein quaternion-Property und populateMatrix()-Methode. Hier einige Auszüge:

three.js

let torusGeometry = new THREE.TorusGeometry(7, 1.6, 4, 3, 6.3);
let material = new THREE.MeshBasicMaterial({ color: 0x0071c5 });
let torus = new THREE.Mesh(torusGeometry, material);
scene.add(torus);

// Update mesh rotation using quaternion.
const sensorAbs = new AbsoluteOrientationSensor();
sensorAbs.onreading = () => torus.quaternion.fromArray(sensorAbs.quaternion);
sensorAbs.start();

// Update mesh rotation using rotation matrix.
const sensorRel = new RelativeOrientationSensor();
let rotationMatrix = new Float32Array(16);
sensor_rel.onreading = () => {
  sensorRel.populateMatrix(rotationMatrix);
  torus.matrix.fromArray(rotationMatrix);
};
sensorRel.start();

BABYLON

const mesh = new BABYLON.Mesh.CreateCylinder('mesh', 0.9, 0.3, 0.6, 9, 1, scene);
const sensorRel = new RelativeOrientationSensor({ frequency: 30 });
sensorRel.onreading = () => mesh.rotationQuaternion.FromArray(sensorRel.quaternion);
sensorRel.start();

WebGL

// Initialize sensor and update model matrix when new reading is available.
let modMatrix = new Float32Array([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]);
const sensorAbs = new AbsoluteOrientationSensor({ frequency: 60 });
sensorAbs.onreading = () => sensorAbs.populateMatrix(modMatrix);
sensorAbs.start();

// Somewhere in rendering code, update vertex shader attribute for the model
gl.uniformMatrix4fv(modMatrixAttr, false, modMatrix);

Ausrichtungssensoren ermöglichen verschiedene Anwendungsfälle, z. B. immersives Gaming, erweiterte und virtuelle Spiele Realität werden.

Weitere Informationen zu Bewegungssensoren, erweiterten Anwendungsfällen und Anforderungen findest du in der Erklärung zu Bewegungssensoren.

Synchronisierung mit Bildschirmkoordinaten

Standardmäßig werden die Messwerte der Raumsensoren aufgelöst in einem lokalen Koordinatensystem, das an das Gerät gebunden ist und die Bildschirmausrichtung nicht in Konto.

</ph>

Für viele Anwendungsfälle wie Spiele oder Augmented Reality und Virtual Reality sind jedoch Sensormesswerte erforderlich, in einem Koordinatensystem aufgelöst werden, das stattdessen an die Bildschirmausrichtung gebunden ist.

</ph>

Bisher musste die Neuzuordnung der Sensorwerte zu Bildschirmkoordinaten in JavaScript implementiert werden. Dieser Ansatz ist ineffizient und erhöht auch die Komplexität des Webs erheblich. Anwendungscode Die Webanwendung muss Änderungen der Bildschirmausrichtung beobachten und Koordinaten ausführen. Transformationen für Sensormessungen, was für Euler-Winkel oder Quaternionen.

Die Generic Sensor API bietet eine wesentlich einfachere und zuverlässige Lösung. Das lokale Koordinatensystem konfigurierbar für alle definierten räumlichen Sensorklassen: Accelerometer, Gyroscope, LinearAccelerationSensor, AbsoluteOrientationSensor, RelativeOrientationSensor und Magnetometer Durch Übergabe der Option referenceFrame an den Sensorobjektkonstruktor definiert, ob die zurückgegebenen Messwerte device oder Bildschirmkoordinaten.

// Sensor readings are resolved in the Device coordinate system by default.
// Alternatively, could be RelativeOrientationSensor({referenceFrame: "device"}).
const sensorRelDevice = new RelativeOrientationSensor();

// Sensor readings are resolved in the Screen coordinate system. No manual remapping is required!
const sensorRelScreen = new RelativeOrientationSensor({ referenceFrame: 'screen' });

Dann lassen Sie uns programmieren!

Die Generic Sensor API ist sehr einfach und nutzerfreundlich. Die Sensorschnittstelle hat start() und stop()-Methoden zur Steuerung des Sensorstatus und verschiedener Event-Handler für den Empfang von Benachrichtigungen zur Sensoraktivierung, zu Fehlern und zu neuen Lesematerialien. Die konkreten Sensorklassen fügen in der Regel ihre spezifischen Leseattribute zur Basis hinzu. .

Entwicklungsumgebung

Während der Entwicklung können Sie Sensoren über localhost verwenden. Wenn Sie für Ihr Unternehmen Mobilgeräte, Einrichtung Portweiterleitung für Ihren lokalen Server und Sie sind bereit durchstarten!

Wenn der Code fertig ist, stellen Sie ihn auf einem Server bereit, der HTTPS unterstützt. GitHub-Seiten werden über HTTPS bereitgestellt und eignen sich daher ideal zum Teilen für Ihre Demos.

3D-Modellrotation

In diesem einfachen Beispiel verwenden wir die Daten eines Sensors für die absolute Ausrichtung, um die Drehung zu ändern. Quaternion eines 3D-Modells. model ist ein 3.js-Script. Object3D-Klasseninstanz mit einem quaternion. Die Code-Snippet aus dem Ausrichtungstelefon Demo zeigt, wie mit dem Sensor für die absolute Ausrichtung ein 3D-Modell gedreht werden kann.

function initSensor() {
  sensor = new AbsoluteOrientationSensor({ frequency: 60 });
  sensor.onreading = () => model.quaternion.fromArray(sensor.quaternion);
  sensor.onerror = (event) => {
    if (event.error.name == 'NotReadableError') {
      console.log('Sensor is not available.');
    }
  };
  sensor.start();
}

Die Ausrichtung des Geräts spiegelt sich in der model-Drehung in 3D innerhalb der WebGL-Szene wider.

</ph>

Lochzange

Das folgende Code-Snippet wird aus dem Punchmeter-Demo, zur Veranschaulichung, wie mit dem linearen Beschleunigungssensor die maximale Geschwindigkeit eines wird angenommen, dass es am Anfang still liegt.

this.maxSpeed = 0;
this.vx = 0;
this.ax = 0;
this.t = 0;

/* … */

this.accel.onreading = () => {
  let dt = (this.accel.timestamp - this.t) * 0.001; // In seconds.
  this.vx += ((this.accel.x + this.ax) / 2) * dt;

  let speed = Math.abs(this.vx);

  if (this.maxSpeed < speed) {
    this.maxSpeed = speed;
  }

  this.t = this.accel.timestamp;
  this.ax = this.accel.x;
};

Die aktuelle Geschwindigkeit wird als Annäherung an das Integral der Beschleunigungsfunktion berechnet.

</ph>

Debugging und Überschreiben von Sensoren mit den Chrome-Entwicklertools

In einigen Fällen benötigen Sie kein physisches Gerät, um mit der Generic Sensor API zu spielen. Chrome-Entwicklertools bietet großartige Unterstützung die Geräteausrichtung zu simulieren.

</ph>

Datenschutz und Sicherheit

Sensormesswerte sind sensible Daten, die verschiedenen Angriffen durch schädliche Webseiten ausgesetzt sein können. Implementierungen von generischen Sensor APIs erzwingen einige Einschränkungen, um die mögliche Sicherheit zu verringern und Datenschutzrisiken. Diese Einschränkungen müssen von Entwicklern berücksichtigt werden, die die API erstellen. Lassen Sie uns diese kurz auflisten.

Nur HTTPS

Da die Generic Sensor API eine leistungsstarke Funktion ist, lässt der Browser sie nur in sicheren Kontexten zu. In bedeutet das, dass Sie über HTTPS auf Ihre Seite zugreifen müssen, um die Generic Sensor API verwenden zu können. Während der Entwicklung können Sie dies über http://localhost tun, für die Produktion jedoch muss HTTPS auf Ihrem Server installiert sein. Best Practices finden Sie in der Sammlung Sicherheit und Schutz. und Richtlinien.

Integration der Berechtigungsrichtlinie

Einbindung der Berechtigungsrichtlinie in den Bereich „Allgemein“ Die Sensor API steuert den Zugriff auf Sensordaten für einen Frame.

Standardmäßig können Sensor-Objekte nur innerhalb eines Hauptframes oder Subframes mit demselben Ursprung erstellt werden. Dadurch wird verhindert, dass ursprungsübergreifende iFrames Sensordaten unangekündigt lesen. Dieses Standardverhalten können geändert werden, indem die entsprechende Richtliniengesteuerte Funktionen zur Verfügung.

Das folgende Snippet zeigt, wie dem Beschleunigungsmesser auf einen ursprungsübergreifenden iFrame Zugriff gewährt wird. dass dort jetzt Accelerometer- oder LinearAccelerationSensor-Objekte erstellt werden können.

<iframe src="https://third-party.com" allow="accelerometer" />

Die Übermittlung der Sensormesswerte kann ausgesetzt werden

Sensormesswerte sind nur über eine sichtbare Webseite zugänglich, d.h. wenn der Nutzer damit interagieren. Außerdem werden die Sensordaten nicht für den übergeordneten Frame bereitgestellt, wenn der Nutzer auf einen ursprungsübergreifenden Subframe hin. Dadurch wird verhindert, dass der übergeordnete Frame Nutzereingaben ableiten kann.

Nächste Schritte

Es gibt bereits festgelegte Sensorklassen, die in naher Zukunft implementiert werden, z. B. Umgebungslicht-Sensor oder Näherungssensor aber dank der großen Erweiterbarkeit Generische Sensor-Framework, sodass wir noch mehr neue Klassen für verschiedene Sensortypen.

Ein weiterer wichtiger Bereich für zukünftige Arbeiten ist die Verbesserung der Generic Sensor API selbst, der generischen Die Sensorspezifikation ist derzeit eine Kandidatenempfehlung, was bedeutet, dass noch genug Zeit ist, um Fehler zu beheben und neue Funktionen bereitzustellen, die Entwickler benötigen.

Sie können helfen!

Die Sensorspezifikationen wurden erreicht Kandidatenempfehlungen daher ist das Feedback von Web- und Browserentwicklern sehr wichtig. Lassen Sie uns welche Funktionen hinzugefügt werden könnten oder ob Sie etwas im aktuelle API.

Sie können auch Probleme mit Spezifikationen einreichen. als Programmfehler für die Chrome-Implementierung.

Ressourcen

• Demoprojekte: https://intel.github.io/generic-sensor-demos/
• Generic Sensor API-Spezifikation: https://w3c.github.io/sensors/
• Spezifikationsprobleme: https://github.com/w3c/sensors/issues
• Mailingliste der W3C-Arbeitsgruppe: public-device-apis@w3.org
• Chrome-Funktionsstatus: https://www.chromestatus.com/feature/5698781827825664
• Fehler bei der Implementierung: http://crbug.com?q=component:Blink&gt;Sensor

Danksagungen

Dieser Artikel wurde von Joe Medley geprüft und Kayce Basques Hero-Image von Misko über Wikimedia Commons