无法让通用传感器 API 在 React 应用程序中工作

Question

我正在尝试在 React 应用程序中实现通用传感器 API。

https://www.w3.org/TR/generic-sensor/#the-sensor-interface

当我尝试在我的代码中实现任何传感器时，我总是收到错误消息。例如：

  var sensor1 = new AmbientLightSensor();

我收到错误：找不到名称：'AmbientLightSensor'。

我假设我的代码中需要一个 import 语句。我发现的所有示例都只包含 LitElement。我什至试过了，但仍然出现未知错误。

我的打字稿代码中需要哪些导入语句？
我需要什么 npm 包？

下面是我使用的打字稿代码。

我遇到打字稿错误：

/Users/scoleman/dev/current/bigbrother/src/utility/testAccel.ts(14,24): Cannot find name 'AmbientLightSensor'. TS2304

  export const testAccel = async (
    databaseName: string,
  ) => {

    const {state} = await navigator.permissions.query({
        name: "ambient-light-sensor"
    });

    if (state !== "granted") {
        console.warn("You haven't granted permission to use the light sensor");
        return;
    }

    const sensor = new AmbientLightSensor();

    sensor.addEventListener("reading", () => {
        console.log(sensor.illuminance);
    });

    sensor.addEventListener("error", (err: any) => {
        console.error(err);
    });

    sensor.start();

  };

Answer 1

这完全取决于您使用的浏览器。我认为 FireFox 目前不支持它，所以我将重点放在 Chrome.

首先，您可能需要在 HTTPS 上为您的网站提供服务。似乎这几乎因权限而异，而且无论如何都可以在本地主机 URL 上获得一些权限。

其次，对于 Chrome，您必须在 chrome://flags/#enable-generic-sensor-extra-classes 页面的 Chrome 中启用 "Generic Sensor Extra Classes" 标志。

接下来，您需要确保获得用户使用传感器的许可，然后您才能真正使用它。将检查的片段如下：

(async function(){
    const {state} = await navigator.permissions.query({
        name: "ambient-light-sensor"
    });

    if (state !== "granted") {
        console.warn("You haven't granted permission to use the light sensor");
        return;
    }

    const sensor = new AmbientLightSensor();

    sensor.addEventListener("reading", () => {
        console.log(sensor.illuminance);
    });

    sensor.addEventListener("error", err => {
        console.error(err);
    });

    sensor.start();
}());

Answer 2

我能够使用 polyfill 获得这些 api 的运行：

https://github.com/kenchris/sensor-polyfills

无法让通用传感器 API 在 React 应用程序中工作

Can't get the Generic Sensor API to work in a React app

reactjs

sensors