Web 感測器技術

作者：Alexander Shalamov, Mikhail Pozdnyakov

譯者：林萬銘

OTC Web Team 一直致力於推進和實現 Web 前沿技術以及在 W3C 的標準化。Alex, Mikhail 及林萬銘都是 Web Team 的軟體工程師，翻譯該文以方便中文前端開發者。

目前 Generic Sensor API， Accelerometer，Gyroscope，Magnetometer，Orientation Sensor 和 Ambient Light Sensor 規範文檔已經正式成為 W3C 候選推薦（ Candidate Recommendations）標準。

本文許可： Creative Commons Attribution 3.0 License, 代碼許可：Apache 2.0 License.

今天，感測器數據被用於許多原生應用程序，以實現諸如沉浸式遊戲，健身追蹤，AR，VR等用例。如果能有一個Web感測器API去縮小原生和Web應用程序之間的差距是不是很酷？Generic Sensor API，就是為Web而誕生的！

什麼是Generic Sensor API?

Generic Sensor API提供了一套介面把感測器設備暴露到Web平台。該API由基礎Sensor介面和一組構建於上方的具體感測器類組成。擁有基礎介面可以簡化具體感測器類的實現和規範流程。比如你可以看一下Gyroscope類，它非常的簡短！核心功能由基礎Sensor介面提供，Gyroscope類僅用了三個代表角速度的屬性擴展它。

通常，具體的感測器類代表平台上的實際感測器，例如加速計或陀螺儀。但是，在某些情況下，感測器類的實現會融合來自多個平台感測器的數據，並以便捷的方式向用戶展示結果。例如，AbsoluteOrientation感測器基於從加速度計，陀螺儀和磁力計獲得的數據提供即用型4x4旋轉矩陣。

您可能認為Web平台已經提供了一些感測器數據介面，例如，DeviceMotion和DeviceOrientation事件暴露運動感測器數據，還有一些其他實驗性API提供來自環境感測器的數據。那麼，為什麼我們還需要這個新的API呢？

與現有感測器介面相比，Generic Sensor API有許多優勢：

Generic Sensor API是一個感測器框架，可以使用新的感測器類輕鬆擴展，並且每個類都將保留通用介面。為一種感測器類型編寫的客戶端代碼可以重新用於另一種，只需很少的修改！

您可以配置感測器，例如，設置適合您應用需求的採樣頻率。

您可以檢測平台上是否有對應感測器。

感測器讀數具有高精度時間戳，可以更好地與應用程序中的其他活動同步。

感測器數據模型和坐標系統明確定義，允許瀏覽器供應商實現可互操作的解決方案。

Generic Sensor 的基礎介面沒有綁定到DOM（Navigator和Window對象），為將來在Service Workers中使用相同的API或在Headless JS運行時實現Generic Sensor API（例如在嵌入式設備上）開闢了的機會。

與傳統的感測器API相比，安全性和隱私方面是Generic Sensor API的首要任務，並且提供了更好的安全級別。目前已經集成了Permissions API。

自動的屏幕坐標同步目前可於Accelerometer，Gyroscope，LinearAccelerationSensor，AbsoluteOrientationSensor，RelativeOrientationSensor和Magnetometer。

Chrome中的Generic Sensor API

在撰寫本文時，Chrome支持以下幾種感測器。

運動感測器（Motion sensors）：

加速度計（Accelerometer）

陀螺儀（Gyroscope）

線性加速度感測器（LinearAccelerationSensor）

絕對方向感測器（AbsoluteOrientationSensor）

相對方向感測器（RelativeOrientationSensor）

環境感測器（Environmental sensors）：

環境光感測器（AmbientLightSensor）

磁力計（Magnetometer）

您可以通過打開功能標誌來啟用通用感測器API以用於開發目的。訪問 chrome://flags/#enable-generic-sensor啟用運動感測器或訪問chrome://flags/#enable-generic-sensor-extra-classes啟用環境感測器。重新啟動Chrome，您就可以開始體驗Generic Sensor API。

如需了解瀏覽器實現狀態的更多信息，請訪問chromestatus.com。

運動感測器原始試驗版（Origin Trials）

為了獲得寶貴的反饋意見，Generic Sensor API從Chrome 63開始作為原始試用版。您需要請求令牌，以便該功能可以自動啟用在您的Chrome上，而無需啟用Chrome標誌。

這些感測器是什麼？我們如何使用它們？

感測器是一個相當特殊的領域，可能需要簡單介紹。如果您熟悉感測器，則可以直接跳到開始編碼章節。否則，我們來詳細了解每個支持的感測器。

加速度和線性加速度

GIF

圖1: 測量加速度感測器

加速度感測器測量三個軸（X，Y和Z）上承載感測器的設備的加速度。這個感測器是一個慣性感測器，這意味著當設備處於線性自由落體時，總測得的加速度為0m/s2，當一個設備平躺在桌子上時，向上方向（Z軸）的加速度將會等於地球的重力，即g≈+9.8m/s2，因為它測量的是桌子向上推動設備的力。如果將設備推向右側，則X軸上的加速度為正，如果設備從右側加速至左側，則加速度為負。

加速度計可用於如下步驟：步數計算，動作感應或簡單的設備定向。通常情況下，加速度計測量結合其他來源的數據，以創建融合感測器，如方向感測器。

線性加速度感測器測量裝置感測器的設備的加速度，不包括的重力的作用。例如，當設備處於靜止狀態時，感測器在三個軸上測量的加速度≈0m/2。

陀螺儀

GIF

圖2: 測量陀螺儀感測器

陀螺儀感測器測量設備在偏轉，傾斜時相對於X，Y和Z軸的角速度（rad/s）。大多數消費類設備都有機械（MEMS）陀螺儀，它們是基於慣性科里奧利力來測量旋轉速率的慣性感測器。MEMS陀螺儀容易產生漂移，這是由感測器的重力靈敏度引起的，這會使感測器的內部機械系統變形。陀螺儀以相對高的頻率振蕩，例如10kHz，因此與其他感測器相比可能消耗更多的功率。

方向感測器

GIF

圖3: 測量絕對方向感測器

絕對方向感測器是一種的融合感測器，測量設備相對於地球坐標系的旋轉，而相對方向感測器則提供設備相對於固定的參考坐標系統的旋轉數據。

所有現代3D JavaScript框架均支持四元數和旋轉矩陣來表示旋轉。但是，如果你直接使用WebGL，方向感測器介面提供了便捷的方法用於WebGL兼容的旋轉矩陣。這裡有幾個代碼示例：

three.js

BABYLON

WebGL

方向感測器支持各種用例，如沉浸式遊戲，AR和VR。

如果你想了解運動感測器的更多信息，比如高級用例和需求說明等，請參考運動感測器解釋文檔。

屏幕坐標系同步

默認情況下，空間感測器的讀數將在綁定到設備的本地坐標系中解析，並且不考慮屏幕方向。

圖4: 設備坐標系

但是，許多使用案例（如遊戲，AR和VR）都需要感測器讀數在綁定於屏幕方向的坐標系中解析。

圖5: 屏幕坐標系

以前，感測器讀數重新映射到屏幕坐標必須在JavaScript中實現。這種方法效率低下，並且也極大地增加了Web應用程序代碼的複雜性：Web應用程序必須監視屏幕方向更改並執行感測器讀數的坐標轉換，這對歐拉角或四元數來說並不是簡單的事情。

Generic Sensor API提供了更簡單可靠的解決方案！本地坐標系對於所有定義的空間感測器類都是可配置的：Accelerometer、Gyroscope、LinearAccelerationSensor、AbsoluteOrientationSensor、RelativeOrientationSensor和Magnetometer。通過將選項傳遞給感測器對象構造函數，用戶可以定義返回的讀數是否將在設備或屏幕坐標中解析。

Note:該選項支持在Chrome 66或更高版本。

開始編碼!

Generic Sensor API非常容易上手！Sensor介面提供了和方法來控制感測器狀態和事件處理用於接收感測器狀態，錯誤和新的可用的讀數的通知。具體的感測器類通常將其特定的讀取屬性添加到基類里。

開發環境

在開發過程中，您可以通過去使用Sensor介面，最簡單的方法是使用Web Server for Chrome來為您的Web應用程序提供服務。如果您是在移動設備上開發，需要為本地伺服器設置埠轉發，然後你就可以開始編碼了！

當您的代碼準備好後，將其部署在支持HTTPS的伺服器上。GitHub Pages可以提供HTTPS服務，將是您分享Demo的好地方。

Note:不要忘記在Chrome中啟用Generic Sensor API。

3D模型旋轉

在下列簡單的例子中，我們使用絕對方向感測器的數據來修改3D模型的旋轉四元數。代碼中的是three.js的類的一個實例，具有屬性。手機定向demo中的以下代碼片段解釋了絕對定位感測器如何用於旋轉3D模型。

設備的方向將反映在的3D旋轉的WebGL場景內。

圖6: 感測器更新3D模型的方向

Punchmeter

下面的代碼片段是從punchmeter demo提取出來的，解釋了如何使用線性加速度感測器來計算設備在初始化為靜止狀態的最大速度。

當前速度計算為近似加速度函數的積分。

圖7: 測量衝壓速度

隱私和安全

感測器讀數是敏感數據，可能受到來自惡意網頁的各種攻擊。Chrome對Generic Sensor API的實現做了一些限制，以減輕潛在的安全和隱私風險。打算使用Generic Sensor API的開發人員必須考慮到這些限制，下面讓我們簡單地列出它們。

只允許運行在HTTPS

由於Generic Sensor API是一項強大的功能，因此Chrome只允許在安全的情況下使用。實際上，這意味著要使用Generic Sensor API，您需要通過HTTPS訪問您的頁面。在開發過程中，您可以通過http://localhost進行此操作，但對於最終產品，您需要在伺服器上部署HTTPS，可以參考這個HTTPS文章。

Feature Policy集成

Generic Sensor API集成了Feature Policy用於控制在frame上訪問感測器數據。

默認情況下，對象只允許在主frame或同一個域的子frame內創建，從而防止未經授權的跨域iframe讀取感測器數據。您還可以通過明確地啟用或禁用相應的策略控制功能來修改此默認行為。

下面的代碼片段說明了如何授予加速度計數據訪問跨域iframe的許可權，這意味著或對象可以在跨域iframe里創建。

Note:Feature Policy集成在Chrome 65或更高版本中。在早期版本的Chrome中，對象只能在主frame內創建。

感測器讀數傳送可以被暫停

感測器讀數只能通過可見網頁訪問，即用戶實際上正在與之交互時。而且，如果用戶聚焦到跨域子frame感測器讀數傳送將會在父頁面上被暫停，以防止在跨域子frame中的第三方軟體竊取到用戶信息。

下一步是什麼？

在近期將有一些已有的Sensor類被實現，例如距離感測器（Proximity）和重力感測器（GravitySensor）。而且，由於Generic Sensor框架具有很強的可擴展性，我們可以預見更多代表各種感測器類型的新類的出現。

未來工作的另一個重要領域是改進Generic Sensor API本身，Generic Sensor API規範目前是一個草案，意味著還有時間進行修復並為開發人員提供所需的新功能。

您可以幫忙！

感測器規範文檔正在積極開發中，我們需要您的反饋以確保項目朝著正確的方向發展。您可以嘗試這個API通過在Chrome中啟用運行時標誌或在啟動時參與原始試驗（origin trial）並分享您的體驗。讓我們知道還有哪些好的功能可以加進來，或者現有的API還有哪些可以改進的地方。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！