기본적으로 웹 내에서 사용할 수 있는 기본 센서

최종 결과 미리보기:

끝에 주어진 코드에 대한 github 링크

소개 :

이제 모든 스마트 장치에는 몇 가지 통합 센서가 포함되어 있으며 특정 기본 코드를 작성하여 사용할 수 있습니다. Apple 센서 통합이 Android와 다를 수 있고 Android가 랩톱과 다를 수 있으므로 다른 장치에 대해 다른 기본 코드를 작성하려는 경우 어렵지 않습니까? 여기에서 내부 작업을 추상화하고 장치에 있는 센서와 작업할 수 있는 API를 제공하는 웹용 일반 센서 API를 사용합니다. 이것을 사용하면 브라우저를 지원하는 모든 장치의 센서를 사용할 수 있습니다(브라우저가 이 API를 지원하는 caniuse 사이트를 확인하십시오.). 특정 센서를 사용하고 싶을 때 구현을 복잡하게 하고 싶지 않을 때 가장 유용합니다. 다른 플랫폼에 대해 다른 기본 코드를 작성합니다.

이 섹션에서는 Generic Sensor API에서 지원하는 몇 가지 센서와 구현에 대해 설명합니다.
특정 센서를 사용하는 방법을 직접 알아보기 전에 센서 사용에 대한 높은 수준의 개요 또는 워크플로를 살펴보겠습니다.

워크플로:

센서 :

장치 센서라는 용어는 장치의 기본 물리적 센서 인스턴스를 나타냅니다. 각 센서 판독값은 판독 타임스탬프라고 하는 시간 tn에서 장치 센서에 의해 측정된 물리량 값으로 구성됩니다.
다음은 센서의 인터페이스입니다(이는 센서 및 해당 데이터를 처리하는 데 사용할 수 있는 방법을 나타냅니다. ).

[SecureContext, Exposed=(DedicatedWorker, Window)]
interface Sensor : EventTarget {
  readonly attribute boolean activated;
  readonly attribute boolean hasReading;
  readonly attribute DOMHighResTimeStamp? timestamp;
  void start();
  void stop();
  attribute EventHandler onreading;
  attribute EventHandler onactivate;
  attribute EventHandler onerror;
};

dictionary SensorOptions {
  double frequency;
};

따라서 센서를 초기화하기 전에 사용자가 설정해야 하는 주파수 옵션이 있습니다. onreading, onacivate, onerror와 같은 다른 메서드는 데이터에 액세스하고 오류를 처리하는 데 사용됩니다. 그것에 대해 더 알고 싶다면 sensor-interface을 살펴보십시오.

사용 가능한 일반 센서 중 일부는 다음과 같습니다.

주변광

가속도계

선형 가속도

중력

자이로스코프

자력계

미보정 자력계

절대 방향

상대 지향성

지리적 위치

근접

용법

이 시연을 위해 가속도계 센서를 사용하는 것을 고려해 보겠습니다(가속도계 대신 모든 센서를 사용할 수 있음).

브라우저가 Generic API를 지원하는지 확인하십시오.

if('Accelerometer' in window){
//code to be written if Accelerometer interface is supported by the browser.
}else{
//Your browser doesn't support sensors.
}

여기에서는 '가속도계' 인터페이스가 브라우저에서 지원되지 않는 경우 걱정하지 않습니다. 그러나이 경우 pollyfill을 사용할 수 있습니다. pollyfill을 사용하면 관련 센서만 가져와서 작업할 수 있습니다. polyfill 작업에 대한 자세한 내용은 sensor-polyfill 을 참조하십시오.

권한

navigator.permissions.query({ name: "accelerometer" }).then(result => {
    if (result.state != 'granted') {
        setGameText("Sorry, we're not allowed to access sensors on your device. ");
        return;
    }
}).catch(err => {
    console.log("Integration with Permissions API is not enabled");
});

현재 가속도계와 같은 일반 센서에 대한 권한을 요청하는 API가 없습니다. geoloaction과 같은 다른 센서를 요청하려면 권한을 요청하는 방법이 있습니다.

const permissionsToRequest = {
  permissions: ["geolocation", "storage"]
}
browser.permissions.request(permissionsToRequest)
    .then(onResponse)
    .then((currentPermissions) => {
    console.log(`Current permissions:`, currentPermissions);
});

api 권한으로 사용할 수 있는 모든 키워드 목록은 API Permissions에 있습니다.

데이터 읽기

let acl = new Accelerometer({frequency: 30});
acl.addEventListener('activate', () => console.log('Ready to measure.'));
acl.addEventListener('error', error => console.log(`Error: ${error.name}`));
acl.addEventListener('reading', () => {
    console.log("Sensor values are : ");
    console.log("X: "+acl.x+" Y: "+acl.y+" Z: "+acl.z);
});
acl.start();

원하는 대로 주파수를 변경할 수 있지만 모든 장치 센서가 주어진 주파수를 지원하지 않기 때문에 동일한 주파수가 보장되지는 않습니다.

여기에서 끝입니다. 이제 웹에서 일반 센서의 데이터를 읽을 수 있습니다. 아래는 위의 세 가지 방법을 모두 결합한 전체 코드이며 자세한 내용은 generic sensor을 참조하십시오.

if ("Accelerometer" in window) {
  navigator.permissions
    .query({ name: "accelerometer" })
    .then((result) => {
      if (result.state != "granted") {
        console.log(
          "Sorry, we're not allowed to access sensors on your device. "
        );
        return;
      }

      let acl = new Accelerometer({ frequency: 60 });
      acl.addEventListener("activate", () => console.log("Ready to measure."));
      acl.addEventListener("error", (error) =>
        console.log(`Error: ${error.name}`)
      );
      acl.addEventListener("reading", () => {
        console.log("Sensor values are : ");
        console.log("X: " + acl.x + " Y: " + acl.y + " Z: " + acl.z);
      });
      acl.start();
    })
    .catch((err) => {
      console.log("Integration with Permissions API is not enabled");
    });
} else {
  console.log("Your browser doesn't support sensors.");
}

라이브 구현을 위해 다음 사이트를 방문할 수 있습니다. https://accelerometer-demo.netlify.app
이 구현 코드는 https://github.com/veerreshr/accelerometer-demo/에 있습니다.

게시물이 마음에 드셨다면 피드백과 함께 기사에 응답해 주십시오. ❤