Sensori per il Web

Utilizza l'API Generic Sensor per accedere ai sensori sul dispositivo come accelerometri, giroscopi e magnetometri.

Alex Shalamov

Mikhail Pozdnyakov

Thomas Steiner

Oggi i dati dei sensori vengono utilizzati in molte applicazioni specifiche delle piattaforme per consentire casi d'uso quali giochi immersivi, monitoraggio del fitness e realtà aumentata o virtuale. Non sarebbe bello fare un ponte il divario tra applicazioni specifiche della piattaforma e applicazioni web? Inserisci il API Generic Sensor, per il web

Che cos'è l'API Generic Sensor?

L'API Generic Sensor è un insieme di interfacce che espongono sensoriali alla piattaforma web. L'API è composta dalla base Interfaccia di Sensor e una serie di informazioni dei sensori più importanti. Un'interfaccia di base semplifica l'implementazione e le specifiche per le classi dei sensori in calcestruzzo. Ad esempio, dai un'occhiata Gyroscope. È minuscolo! La la funzionalità di base è specificata dall'interfaccia di base e Gyroscope la estende semplicemente con tre che rappresentano la velocità angolare.

Alcune classi di sensori si interfacciano con veri sensori hardware, come, ad esempio, l'accelerometro o classi di giroscopio. In questi casi si parla di sensori di basso livello. Altri sensori, noti come sensori di fusione, consente di unire i dati di diversi livelli per esporre le informazioni che uno script avrebbe altrimenti bisogno di calcolare. Ad esempio, Sensore AbsoluteOrientation fornisce una matrice di rotazione 4x4 pronta all'uso basata sui dati ottenuti accelerometro, giroscopio e magnetometro.

Si potrebbe pensare che la piattaforma web fornisca già dati dei sensori e tu hai assolutamente ragione. Per in esecuzione, DeviceMotion e DeviceOrientation espongono i dati dei sensori di movimento. Perché abbiamo bisogno di una nuova API?

Rispetto alle interfacce esistenti, l'API Generic Sensor offre numerosi vantaggi:

• L'API Generic Sensor è un framework di sensori che può essere facilmente esteso con nuove classi di sensori e ciascuna di queste classi manterrà l'interfaccia generica. Il codice client scritto per un tipo di sensore può essere riutilizzato per un altro con pochissime modifiche.
• Puoi configurare il sensore. Ad esempio, puoi impostare la frequenza di campionamento adatta al tuo le esigenze dell'applicazione.
• Puoi rilevare se sulla piattaforma è disponibile un sensore.
• Le letture del sensore hanno timestamp ad alta precisione, che consentono una migliore sincronizzazione con altri delle attività nella tua applicazione.
• I modelli dei dati dei sensori e i sistemi di coordinate sono chiaramente definiti, consentendo ai fornitori di browser di implementare soluzioni interoperabili.
• Le interfacce basate su sensori generici non sono associate al DOM, ovvero non sono né navigator o window) e questo apre opportunità future per l'utilizzo dell'API all'interno del servizio worker o la sua implementazione in runtime JavaScript headless, ad esempio dispositivi mobili.
• Per il sensore generico gli aspetti di sicurezza e privacy sono la massima priorità API e offrono una sicurezza di gran lunga superiore rispetto alle API dei sensori precedenti. C'è un'integrazione con l'APIPermissions.
• La sincronizzazione automatica con le coordinate sullo schermo è disponibile per Accelerometer, Gyroscope, LinearAccelerationSensor, AbsoluteOrientationSensor, RelativeOrientationSensor e Magnetometer.

API dei sensori generici disponibili

Al momento della stesura di questo articolo, esistono diversi sensori con cui puoi fare esperimenti.

Sensori di movimento:

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

Sensori ambientali:

• AmbientLightSensor (dietro il flag #enable-generic-sensor-extra-classes in Chromium).
• Magnetometer (dietro il flag #enable-generic-sensor-extra-classes in Chromium).

Rilevamento delle caratteristiche

Il rilevamento delle funzionalità delle API hardware è complicato, poiché devi rilevare sia se il browser Supporta l'interfaccia in questione e se il dispositivo ha il sensore corrispondente. Verifica in corso... se il browser supporta un'interfaccia è facile. Sostituisci Accelerometer con uno qualsiasi di le altre interfacce indicate sopra).

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

Per un risultato davvero significativo del rilevamento delle caratteristiche, devi anche provare a connetterti al sensore. Questo esempio spiega come fare.

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

Per i browser che non supportano l'API Generic Sensor, una polyfill. Il polyfill ti consente carica solo i sensori pertinenti implementazioni.

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

Cosa sono tutti questi sensori? Come faccio a utilizzarli?

Un'area dedicata ai sensori potrebbe richiedere una breve introduzione. Se hai familiarità con i sensori, puoi passa direttamente alla sezione pratica di programmazione. Altrimenti, esaminiamo ogni elenco sensore in dettaglio.

Accelerometro e sensore di accelerazione lineare

Il sensore Accelerometer misura l'accelerazione di un dispositivo che ospita il sensore su tre assi (X, Y e Z). Questo sensore è un sensore inerziale, il che significa che quando il dispositivo si trova in caduta libera lineare, il totale misurato l'accelerazione è pari a 0 m/s² mentre, quando un dispositivo è appoggiato orizzontalmente su un tavolo, verso l'alto (asse Z) sarà uguale alla gravità della Terra, ovvero g ≈ +9,8 m/s² come misura la forza del tavolo che spinge il dispositivo verso l'alto. Se invii il dispositivo a destra, l'accelerazione sull'asse X sarebbe positiva o negativa se il dispositivo viene accelerato da da destra verso sinistra.

Gli accelerometri possono essere usati, ad esempio, per il conteggio dei passi, il rilevamento dei movimenti o un semplice dispositivo orientamento. Molto spesso, le misurazioni dell'accelerometro vengono combinate con i dati di altre fonti per creano sensori di fusione, come i sensori di orientamento.

La LinearAccelerationSensor misura l'accelerazione applicata al dispositivo che ospita il sensore, escluso il contributo della gravità. Quando un dispositivo è fermo, ad esempio appoggiato sul tavolo, il sensore misura Accelerazione ≈ 0 m/s² su tre assi.

Sensore di gravità

È già possibile per gli utenti ricavarne manualmente le letture vicine a quelle di un sensore di gravità controllare manualmente le letture di Accelerometer e LinearAccelerometer, ma questa operazione può essere complicata e dipendono dalla precisione dei valori forniti da questi sensori. Piattaforme come Android possono forniscono letture della gravità come parte del sistema operativo, il che dovrebbe essere più economico in termini di calcolo, fornire valori più precisi in base all'hardware dell'utente ed essere più facili da utilizzare termini sull'ergonomia delle API. La GravitySensor restituisce l'effetto di accelerazione lungo gli assi X, Y e Z del dispositivo a causa della gravità.

Giroscopio

Il sensore Gyroscope misura velocità angolare in radianti al secondo intorno all'asse X, Y e Z locale del dispositivo. La maggior parte dei consumatori I dispositivi dispongono di funzionalità meccaniche (MEMS) i giroscopi, ovvero sensori inerziali che misurano la velocità di rotazione in base a forza inerziale di Coriolis. I giroscopi MEMS sono soggetti a usura alla deviazione causata dalla sensibilità gravitazionale del sensore, che deforma la sua e un sistema meccanico interno. I giroscopi oscillano a frequenze relativamente alte, ad esempio 10 s di kHz e pertanto, potrebbero consumare più energia rispetto ad altri sensori.

Sensori di orientamento

La AbsoluteOrientationSensor è un sensore di fusione che misura la rotazione di un dispositivo rispetto al sistema di coordinate terrestri, mentre RelativeOrientationSensor fornisce i dati che rappresentano la rotazione di un dispositivo che ospita sensori di movimento rispetto a un sistema di coordinate di riferimento.

Tutti i moderni framework JavaScript 3D supportano i quaternioni. e le matrici di rotazione per rappresentare la rotazione; tuttavia, se utilizzi direttamente WebGL, OrientationSensor offre comodamente sia una Proprietà quaternion e un populateMatrix()metodo. Ecco alcuni snippet:

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

I sensori di orientamento consentono diversi casi d'uso, come i giochi immersivi, realtà.

Per ulteriori informazioni sui sensori di movimento, sui casi d'uso avanzati e sui requisiti, dai un'occhiata alla documento esplicativo sui sensori di movimento.

Sincronizzazione con le coordinate sullo schermo

Per impostazione predefinita, le letture dei sensori spaziali sono risolte in un sistema di coordinate locale che è associato al dispositivo e non prende l'orientamento dello schermo .

Tuttavia, molti casi d'uso, come i giochi o la realtà aumentata e virtuale, richiedono che le letture dei sensori siano risolti in un sistema di coordinate invece vincolato all'orientamento dello schermo.

In precedenza, la rimappatura delle letture dei sensori alle coordinate sullo schermo doveva essere implementata in JavaScript. Questo approccio non è efficace e aumenta anche in modo significativo la complessità del web il codice dell'applicazione; l'applicazione web deve controllare i cambiamenti nell'orientamento dello schermo ed eseguire le coordinate trasformazioni per le letture dei sensori, cosa che non bisogna fare per gli angoli di Eulero o quaternioni.

L'API Generic Sensor fornisce una soluzione molto più semplice e affidabile. Il sistema di coordinate locale è configurabili per tutte le classi di sensori spaziali definite: Accelerometer, Gyroscope, LinearAccelerationSensor, AbsoluteOrientationSensor, RelativeOrientationSensor e Magnetometer, Passando l'opzione referenceFrame al costruttore dell'oggetto sensore, l'utente definisce se le letture restituite verranno risolte device o coordinate dello schermo.

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

Iniziamo a programmare!

L'API Generic Sensor è molto semplice e intuitiva! L'interfaccia del sensore ha start() e Metodi stop() per controllare lo stato dei sensori e diversi gestori di eventi per la ricezione di notifiche relative all'attivazione dei sensori, agli errori e alle nuove letture. Le classi dei sensori in cemento di solito aggiungono i loro attributi di lettura specifici alla base .

Ambiente di sviluppo

Durante lo sviluppo potrai utilizzare i sensori tramite localhost. Se stai sviluppando dispositivi mobili, configurare port forwarding per il server locale e sei pronto a scatenarti.

Quando il codice è pronto, esegui il deployment su un server che supporta HTTPS. Le pagine GitHub sono pubblicate tramite HTTPS e sono un luogo ideale per la condivisione le tue demo.

Rotazione del modello 3D

In questo semplice esempio, utilizziamo i dati di un sensore di orientamento assoluto per modificare la rotazione, quaternione di un modello 3D. model è un file third.js Object3D istanza di classe con un quaternion. La il seguente snippet di codice telefono di orientamento La demo illustra come il sensore di orientamento assoluto può essere utilizzato per ruotare un modello 3D.

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

L'orientamento del dispositivo si rifletterà nella rotazione 3D model all'interno della scena WebGL.

Perforatore

Il seguente snippet di codice viene estratto demo del punchmeter, che illustra come il sensore di accelerazione lineare può essere utilizzato per calcolare la velocità massima di un partendo dal presupposto che all'inizio non si muove.

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

La velocità attuale viene calcolata come approssimazione all'integrale della funzione di accelerazione.

Debug e override dei sensori con Chrome DevTools

In alcuni casi non occorre un dispositivo fisico per utilizzare l'API Generic Sensor. Chrome DevTools offre un grande supporto simulazione dell'orientamento del dispositivo.

Privacy e sicurezza

Le letture dei sensori sono dati sensibili che possono essere soggetti a vari attacchi da parte di pagine web dannose. Le implementazioni delle API dei sensori generici applicano alcune limitazioni per mitigare la possibile sicurezza e rischi per la privacy. Queste limitazioni devono essere prese in considerazione dagli sviluppatori che intendono utilizzare API, quindi elencali brevemente.

Solo HTTPS

Poiché l'API Generic Sensor è una funzionalità potente, il browser consente questa funzionalità solo in contesti sicuri. Nella Per fare pratica, per usare l'API Generic Sensor dovrai accedere alla tua pagina tramite HTTPS. Durante lo sviluppo, puoi farlo tramite http://localhost, ma per la produzione dovrai disporre di HTTPS sul tuo server. Consulta la raccolta Sicurezza e protezione per le best practice e linee guida.

Integrazione dei criteri relativi alle autorizzazioni

Integrazione dei criteri relativi alle autorizzazioni nella sezione Generica L'API Sensor controlla l'accesso ai dati dei sensori per un frame.

Per impostazione predefinita, gli oggetti Sensor possono essere creati solo all'interno di un frame principale o di frame secondari della stessa origine, impedendo così agli iframe multiorigine di leggere i dati dei sensori non approvati. Questo comportamento predefinito può essere modificato abilitando o disattivando in modo esplicito il funzionalità controllate dalle norme.

Lo snippet seguente illustra la concessione dell'accesso ai dati dell'accelerometro a un iframe multiorigine, il che significa che ora è possibile creare Accelerometer o LinearAccelerationSensor oggetti lì.

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

L'invio delle letture del sensore può essere sospeso

Le letture dei sensori sono accessibili solo da una pagina web visibile, ovvero quando l'utente a interagire con quest'ultima. Inoltre, i dati dei sensori non vengono forniti al frame principale se l'utente imposta lo stato attivo su un frame secondario multiorigine. Questo impedisce al frame principale di dedurre l'input dell'utente.

Passaggi successivi

Vi è una serie di classi di sensori già specificate da implementare nel prossimo futuro, come ad esempio Sensore della luce ambientale o Sensore di prossimità; tuttavia, grazie alla grande estensibilità un framework di sensori generico in grado di prevedere la comparsa di ancora più nuove classi che rappresentano vari tipi di sensori.

Un'altra area importante per il lavoro futuro è il miglioramento dell'API Generic Sensor stessa, l'API Generic Le specifiche dei sensori sono attualmente un suggerimento di candidati, il che significa che c'è ancora tempo per apportare correzioni e offrire nuove funzionalità di cui gli sviluppatori hanno bisogno.

Puoi dare il tuo contributo.

Specifiche del sensore raggiunte Consiglio dei candidati livello di maturità, pertanto è molto apprezzato il feedback degli sviluppatori di web e browser. Permettici sapere quali funzionalità sarebbe fantastico aggiungere o se c'è qualcosa che vorresti modificare nel l'API corrente.

Non esitare a segnalare problemi specifici. come bug per l'implementazione di Chrome.

Risorse

• Progetti demo: https://intel.github.io/generic-sensor-demos/
• Specifica generica dell'API Sensor: https://w3c.github.io/sensors/
• Problemi relativi alle specifiche: https://github.com/w3c/sensors/issues
• Mailing list del gruppo di lavoro W3C: public-device-apis@w3.org
• Stato delle funzionalità di Chrome: https://www.chromestatus.com/feature/5698781827825664
• Bug di implementazione: http://crbug.com?q=component:Blink>Sensor

Ringraziamenti

Questo articolo è stato esaminato da Joe Medley e Kayce Basques. Immagine hero di Misko tramite Wikimedia Commons.