Web與傳感器：Generic Sensor API

什麼是 Generic Sensor API？

Generic Sensor API 提供了一組屬性和方法，將傳感器暴露給 Web 端應用。在這個標準中，規定了基本的接口和類，使得在實現各類傳感器 API 時可以經過繼承快速實現。在介紹完本標準後，我會舉例使用其中一個傳感器 API。

與 DeviceMotion 和 DeviceOrientation 這些已有的可以提供傳感器數據的 API 相比之下，Generic Sensor API 體現出了許多好處：

1. Generic Sensor API 可以很是容易地擴展出新的傳感器類，同時，擴展出的新類與父類接口保持一致。因爲這些一致性，用於一個傳感器的代碼通過少許修改以後便可用於另外一個傳感器上
2. 你能夠配置傳感器，例如，設置適合你的應用的採樣率
3. 你能夠檢測某個傳感器是否可用
4. 傳感器讀數有着精度很是高的時間戳，使用高精度的時間戳能夠與應用中的額其餘活動進行同步
5. 傳感器數據模型以及座標系統有這很是明確的定義，使得瀏覽器廠商可以實現具備互通性的解決方案
6. 基於 Generic Sensor API 的接口不依賴 DOM 相關對象 （Navigator 以及 Window 對象），這給將來在 Service Worker，無頭 JS 運行時（如嵌入式設備）帶來應用的可能
7. 相對於舊的 API，Generic Sensor API 還帶來了更好的安全和隱私保護能力

Chrome 中已實現的傳感器

類名	傳感器
Accelerometer	加速度計
Gyroscope	陀螺儀
LinearAccelerationSensor	線性加速傳感器
AbsoluteOrientationSensor	絕對方向傳感器
RelativeOrientationSensor	相對方向傳感器
AmbientLightSensor	環境光傳感器
Magnetometer	磁力計

接下來咱們來詳細瞭解 Generic Sensor API 中的屬性和方法

Generic Sensor API

傳感器生命週期

首先構建傳感器對象，進入空閒狀態，調用 start 方法以後進行激活（激活中狀態），若是發生錯誤，則回到空閒狀態，成功則進入已激活狀態。調用 stop 或出錯，則返回空閒狀態。

垃圾回收策略

• 當傳感器屬於「激活中」的狀態而且註冊了 activated, reading, error 事件時不會被回收
• 當傳感器屬於「已激活」的狀態而且註冊了 reading, error 事件時不會被回收

SensorOptions

SensorOptions 是用於在構建傳感器對象時傳入的配置項，在 Generic Sensor API 的基類中支持一種設置

設置	做用
frequency	採樣率，單位 Hz

activated 屬性

該屬性用於檢測當前傳感器是否屬於已激活的狀態，是則返回 true

hasReading 屬性

該屬性首先會檢查最近一次讀數的時間戳，若是有則返回 true

timestamp 屬性

該屬性用於讀取最近一次讀數的時間戳的值

start 方法

start 方法會開始對傳感器數據進行採樣，採樣率能夠在構建傳感器對象時經過參數傳入。

若是平臺與傳感器之間沒法創建鏈接，將會拋出 NotReadableError 異常；

若是平臺沒有訪問傳感器的權限，將會拋出NotAllowedError 異常

stop 方法

stop 方法將會中止對傳感器的數據採樣，並將傳感器置爲空閒狀態

reading 事件

當調用 start 方法以後，根據設定的採樣率，將會按照採樣率採樣數據並經過該事件通知產生了讀數

active 事件

在傳感器的生命週期中，若是狀態從 activating 變動到 activated 時將會觸發此事件

error 事件

當操做傳感器時或傳感器出現異常時將會經過此事件拋出

AmbientLightSensor

如今，咱們將使用 AmbientLightSensor 爲例，製做一個簡單的頁面，根據返回的數值（光照度 lux）改變背景，小於 100 lux 時變爲黑色背景。

檢測是否支持

首先經過簡單的檢查，查看當前平臺是否支持此傳感器

if (window.AmbientLightSensor) {
    ...
} else {
    ...
}
複製代碼

初始化並添加事件處理

const als = new AmbientLightSensor();
als.addEventListener('reading', () => {
    ...
})
複製代碼

調用 start 方法開始讀數

als.start();
複製代碼

效果

經過在 reading 事件中判斷光照度，動態改變界面樣式

若是沒有成功讀取數值，先嚐試在 flags 中將 Generic Sensor Extra Classes 開啓：

最後

在 Chrome 中，一部分傳感器實現已是默認開啓了，例如 Gyroscope, Magnetometer 等。經過傳感器數據，在 Web 端將能實現更多更好的交互。

參考連接

• www.w3.org/TR/2019/WD-…
• www.w3.org/TR/2019/WD-…
• developers.google.com/web/updates…