Verwenden Sie die Generic Sensor API, um Zugriff auf Gerätesensoren wie Beschleunigungsmesser, Gyroskope und Magnetometer zu erhalten.
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
nochwindow
-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
undMagnetometer
.
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
<ph type="x-smartling-placeholder">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/s2. 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/s2 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/s2-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
<ph type="x-smartling-placeholder">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
<ph type="x-smartling-placeholder">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:
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();
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();
// 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 type="x-smartling-placeholder">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 type="x-smartling-placeholder">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.
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 type="x-smartling-placeholder">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 type="x-smartling-placeholder">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>Sensor
Danksagungen
Dieser Artikel wurde von Joe Medley geprüft und Kayce Basques Hero-Image von Misko über Wikimedia Commons