웹용 센서

Generic Sensor API를 사용하여 가속도계, 자이로스코프, 자기계와 같은 기기 내 센서에 액세스합니다.

Alex Shalamov
Alex Shalamov
Mikhail Pozdnyakov
Mikhail Pozdnyakov
Thomas Steiner

오늘날 센서 데이터는 다음과 같은 사용 사례를 지원하기 위해 많은 플랫폼별 애플리케이션에서 사용됩니다. 몰입도 높은 게임, 피트니스 추적, 증강 현실 또는 가상 현실을 지원합니다. CANNOT TRANSLATE 플랫폼별 애플리케이션과 웹 애플리케이션 간의 격차를 줄이는 방법은 무엇일까요? 그런 다음 웹용 Generic Sensor API

Generic Sensor API란 무엇인가요?

Generic Sensor API는 센서를 노출하는 인터페이스 집합입니다. 센서 장치를 웹 플랫폼에 배포합니다. API는 기본 Sensor 인터페이스 및 구체적인 여러 센서 클래스를 기반으로 빌드되었습니다 기본 인터페이스가 있으면 구현과 사양이 간소화됩니다. 콘크리트 센서 클래스를 위한 프로세스입니다. 예를 들어 Gyroscope 클래스 엄청나게 작다! 이 핵심 기능이 기본 인터페이스로 지정되며 Gyroscope는 단순히 세 가지로 기능을 확장합니다. 각속도를 나타내는 속성입니다.

일부 센서 클래스는 실제 하드웨어 센서(예: 가속도계, 자이로스코프 클래스를 사용합니다. 이를 하위 수준 센서라고 합니다. 기타 센서 Fusion 센서, 여러 하위 수준의 데이터 병합 센서를 사용하여 스크립트가 계산해야 하는 정보를 노출시킬 수 있습니다. 예를 들어 AbsoluteOrientation 센서 그래프에서 얻은 데이터를 기반으로 즉시 사용 가능한 4x4 회전 행렬을 가속도계, 자이로스코프 및 자기계가 있습니다.

웹 플랫폼이 이미 센서 데이터를 제공하고 있다고 생각하실 수도 있겠지만, 정답입니다. 대상 인스턴스, DeviceMotion 및 DeviceOrientation 움직임 감지 센서 데이터를 노출합니다. 그렇다면 왜 새 API가 필요한 걸까요?

기존 인터페이스와 비교할 때 Generic Sensor API는 다음과 같은 많은 이점을 제공합니다.

  • Generic Sensor API는 새로운 센서 클래스로 쉽게 확장 할 수있는 센서 프레임워크입니다. 이러한 각 클래스는 일반 인터페이스를 유지합니다. 하나의 센서 유형을 위해 작성된 클라이언트 코드 거의 수정 없이 다른 데 재사용할 수 있습니다.
  • 센서를 구성할 수 있습니다. 예를 들어 사용자의 목표에 적합한 샘플링 주파수를 설정할 수 있습니다. 애플리케이션 니즈에 맞게 맞춤설정할 수 있습니다
  • 플랫폼에서 센서를 사용할 수 있는지 감지할 수 있습니다.
  • 센서 판독값은 정밀도 높은 타임스탬프가 있어 다른 센서와 더 잘 활동을 모니터링하는 것입니다.
  • 센서 데이터 모델 및 좌표계가 명확하게 정의되어 브라우저 공급업체가 상호 운용 가능한 솔루션을 구현합니다
  • 일반 센서 기반 인터페이스는 DOM에 바인딩되지 않습니다 (즉, navigator도 아님). 또는 window 객체)에서 구현되지 않으며, 이렇게 하면 향후 서비스 내에서 API를 사용할 수 있는 기회가 생깁니다. 헤드리스 JavaScript 런타임(예: 삽입, 기기에서 사용할 수 있습니다.
  • 보안 및 개인 정보 보호 측면은 일반 센서의 최우선 우선순위입니다. API를 제공하고 이전의 센서 API보다 훨씬 더 나은 보안을 제공합니다. Cloud Functions와 권한 API입니다.
  • 화면 좌표와 자동 동기화는 Accelerometer, Gyroscope, LinearAccelerationSensor, AbsoluteOrientationSensor, RelativeOrientationSensor, Magnetometer

사용 가능한 일반 센서 API

이 글을 작성하는 시점에서 실험해 볼 수 있는 몇 가지 센서가 있습니다.

움직임 감지 센서:

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

환경 센서:

  • AmbientLightSensor (Chromium에서 #enable-generic-sensor-extra-classes 플래그 뒤)
  • Magnetometer (Chromium에서 #enable-generic-sensor-extra-classes 플래그 뒤)

특성 감지

하드웨어 API의 기능 감지는 까다롭습니다. 왜냐하면 브라우저가 문제가 되는 인터페이스 및 기기에 상응하는 센서가 있는지 여부를 지원해야 합니다. 당좌예금 브라우저가 인터페이스를 지원하는지 여부는 직관적입니다. Accelerometer을 다음 중 하나로 바꿉니다. 위에서 언급된 다른 인터페이스).

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

실제로 유의미한 특징 감지 결과를 얻으려면 센서에도 연결을 시도해야 합니다. 이 예에서는 그 방법을 보여줍니다.

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

폴리필

Generic Sensor API를 지원하지 않는 브라우저의 경우 polyfill을 사용할 수 있습니다. 폴리필을 사용하면 관련 센서만 로드하여 있습니다.

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

센서란 무엇일까요? 어떻게 사용할 수 있나요?

센서는 간단한 소개가 필요한 영역입니다. 센서에 익숙하다면 코딩 실습 섹션으로 바로 이동하세요. 그렇지 않은 경우 지원되는 각 자세히 살펴보겠습니다.

가속도계 및 선형 가속 센서

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> 가속도계 센서 측정

Accelerometer 센서 는 세 축 (X, Y, Z)에서 센서를 호스팅하는 기기의 가속도를 측정합니다. 이 센서는 즉, 기기가 선형 자유 낙하 상태일 때 관성 센서에서 측정된 가속도는 0m/s2이며 기기를 테이블 위에 평평하게 놓으면 가속도는 위쪽 방향 (Z축)은 지구의 중력과 같습니다.즉, g ABCD +9. 8m/s2입니다. 기기를 위쪽으로 밀고 있는 테이블의 힘을 측정합니다. 기기를 x축의 가속도가 양수 또는 음수가 됨(기기가 할 수 있습니다.

가속도계는 걸음 수 계산, 움직임 감지, 간단한 기기 등을 위해 사용할 수 있습니다. 방향을 설정할 수 있습니다. 가속도계 측정값은 보통 다른 소스의 데이터와 결합하여 방향 센서와 같은 퓨전 센서를 만듭니다.

이 LinearAccelerationSensor 드림 센서를 호스팅하는 기기에 적용되는 가속도를 측정하며 기여도는 제외됩니다. 일어날 수 있습니다. 기기가 탁자 위에 평평하게 놓여 있는 경우라면 센서는 3축에서 0m/s2 가속.

중력 센서

이미 사용자가 Accelerometer 및 LinearAccelerometer 판독값을 수동으로 검사하지만 번거로울 수 있습니다. 이러한 센서가 제공하는 값의 정확도에 따라 달라집니다. Android와 같은 플랫폼은 운영 체제의 일부로 중력 측정값을 제공하는 것이 계산하고 사용자의 하드웨어에 따라 더 정확한 값을 제공하며 살펴봤습니다 이 GravitySensor는 효과를 반환합니다. 축에 속하므로 중력에 의해 가속됩니다.

자이로스코프

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> 자이로스코프 센서 측정

Gyroscope 센서는 기기의 로컬 X, Y, Z 축을 기준으로 초당 라디안 단위 각속도입니다. 대부분의 소비자 기기에 기계식 (MEMS)이 있습니다. 자이로스코프는 인코더-디코더에 의해 구동되는 관성 코리올리스력입니다. MEMS 자이로스코프는 취약하다 센서의 중력 민감도로 인해 발생하는 드리프트가 기계적 시스템입니다. 자이로스코프는 상대적 고주파수(예: 수십 kHz 다른 센서에 비해 더 많은 전력을 소모할 수 있습니다.

방향 센서

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> 절대 방향 센서 측정

이 AbsoluteOrientationSensor 드림 지구 좌표계를 기준으로 기기의 회전을 측정하는 퓨전 센서입니다. 반면 RelativeOrientationSensor 고정된 움직임에 대한 움직임 감지 센서를 호스팅하는 기기의 회전을 나타내는 데이터를 제공 참조 좌표계입니다.

모든 최신 3D JavaScript 프레임워크는 쿼터니언을 지원합니다. 회전을 나타내는 회전 행렬을 사용합니다. 그러나 WebGL을 직접 사용하는 경우 OrientationSensor에는 편리하게 속성 quaternion개 및 populateMatrix() 메서드. 다음은 몇 가지 스니펫입니다.

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

방향 센서는 몰입형 게임, 증강 현실, 가상 현실과 같은 다양한 사용 사례를 지원합니다. 현실입니다.

움직임 감지 센서, 고급 사용 사례, 요구사항에 관한 자세한 내용은 움직임 감지 센서 설명 문서를 참조하세요.

화면 좌표와의 동기화

기본적으로 공간 센서의 측정값이 해결됩니다. 기기에 바인딩되고 화면 방향을 있습니다.

<ph type="x-smartling-placeholder">
</ph> 기기 좌표계
기기 좌표계

하지만 게임이나 증강 현실과 가상 현실 같은 많은 사용 사례에서는 대신 화면 방향에 바인딩되는 좌표계에서 해결됩니다.

<ph type="x-smartling-placeholder">
</ph> 화면 좌표계
화면 좌표계

이전에는 센서 판독값을 화면 좌표로 재매핑하는 작업을 자바스크립트로 구현해야 했습니다. 이러한 방식은 비효율적이며 웹의 복잡성을 상당히 증가시킵니다. 애플리케이션 코드 웹 애플리케이션이 화면 방향 변경을 감시하고 좌표를 수행해야 함 센서 판독 값을 변환하는데 이는 오일러 각 또는 쿼터니언입니다.

Generic Sensor API는 훨씬 간단하고 신뢰할 수 있는 솔루션을 제공합니다! 지역 좌표계는 다음과 같습니다. 정의된 모든 공간 센서 클래스에 대해 구성 가능: Accelerometer, Gyroscope, LinearAccelerationSensor, AbsoluteOrientationSensor, RelativeOrientationSensor 외 Magnetometer referenceFrame 옵션을 센서 객체 생성자에 전달하면 사용자는 반환된 측정값을 다음 시간 이내에 해결할지 여부를 정의합니다. device 또는 화면 좌표

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

코딩해 봅시다!

Generic Sensor API는 매우 간단하고 사용하기 쉽습니다. 센서 인터페이스에는 start() 및 센서 상태 및 여러 센서 상태를 제어하는 stop() 메서드 센서 활성화, 오류 및 새로 사용 가능한 알림 수신을 위한 이벤트 핸들러 읽기 구체적인 센서 클래스는 일반적으로 특정 읽기 속성을 베이스에 추가합니다. 클래스에 대해 자세히 알아보세요.

개발 환경

개발 중에는 localhost를 통해 센서를 사용할 수 있습니다. 특정 언어 모델을 위한 휴대기기, 설정 포트 전달 사용할 준비가 되었습니다.

코드가 준비되면 HTTPS를 지원하는 서버에 배포합니다. GitHub 페이지는 HTTPS를 통해 제공되므로 공유하기에 적합한 장소입니다. 데모를 보여드리겠습니다

3D 모델 회전

이 간단한 예에서는 절대 방향 센서의 데이터를 사용하여 쿼터니언입니다. model는 third.js입니다. Object3D 클래스 인스턴스에 quaternion 속성을 사용하여 데이터 액세스 권한을 부여할 수 있습니다. 이 다음 코드 스니펫을 방향 휴대전화 절대 방향 센서를 사용하여 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();
}

기기 방향은 WebGL 장면 내에서 3D model 회전에 반영됩니다.

<ph type="x-smartling-placeholder">
</ph> 센서가 3D 모델의 방향을 업데이트함
센서가 3D 모델의 방향을 업데이트함

펀치미터

다음 코드 스니펫은 펀치 미터 데모, 선형 가속 센서를 사용하여 초기에 가만히 놓여 있다는 가정하에 기기를 조작할 수 있습니다.

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

현재 속도는 가속 함수의 적분에 대한 근사값으로 계산됩니다.

<ph type="x-smartling-placeholder">
</ph> 펀치 속도 측정을 위한 데모 웹 애플리케이션
펀치 속도 측정

Chrome DevTools로 디버깅 및 센서 재정의

실제 기기가 없어도 Generic Sensor API를 사용할 수 있는 경우도 있습니다. Chrome DevTools IT 지원 전문가로서 기기 방향 시뮬레이션일 수도 있습니다.

<ph type="x-smartling-placeholder">
</ph> 가상 휴대전화의 맞춤 방향 데이터를 재정의하는 데 Chrome DevTools가 사용됨
Chrome DevTools로 기기 방향 시뮬레이션

개인 정보 보호 및 보안

센서 판독값은 악성 웹 페이지의 다양한 공격에 노출될 수 있는 민감한 데이터입니다. Generic Sensor API 구현은 가능한 보안을 완화하기 위해 몇 가지 제한사항을 적용합니다. 위험성이 있습니다 이러한 제한사항은 API에 대해 다루었으므로 간단하게 나열하겠습니다.

HTTPS만

Generic Sensor API는 강력한 기능이므로 브라우저는 보안 컨텍스트에서만 이를 허용합니다. 포함 Generic Sensor API를 사용하려면 HTTPS를 통해 페이지에 액세스해야 합니다. 개발 중에는 http://localhost를 통해 이를 수행할 수 있지만 프로덕션의 경우 서버에 HTTPS가 있어야 합니다. 안전한 보안 모음에서 권장사항을 확인하세요. 및 가이드라인

권한 정책 통합

일반의 권한 정책 통합 Sensor API는 프레임의 센서 데이터에 대한 액세스를 제어합니다.

기본적으로 Sensor 객체는 메인 프레임 또는 동일한 출처 서브프레임 내에서만 만들 수 있습니다. 교차 출처 iframe이 센서 데이터를 무단으로 읽는 것을 방지합니다. 이 기본 동작은 명시적으로 사용 설정하거나 사용 중지하여 수정할 수 있음 정책 제어 기능에 대해 자세히 알아보세요.

아래 스니펫은 교차 출처 iframe에 가속도계 데이터 액세스 권한을 부여하는 과정을 보여줍니다. 이제 거기에 Accelerometer 또는 LinearAccelerationSensor 객체를 만들 수 있습니다.

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

센서 측정값 전송이 정지될 수 있음

센서 판독값은 가시적 웹페이지에서만(예: 사용자가 실제로 상호작용하지 않습니다. 또한 사용자가 교차 출처 서브프레임으로 포커스를 변경합니다. 이렇게 하면 상위 프레임이 사용자 입력을 추론하지 않습니다.

다음 단계

다음과 같이 가까운 미래에 구현될 이미 지정된 센서 클래스 세트가 있습니다. 주변광 센서 또는 근접 센서 그러나 Kubernetes의 뛰어난 확장성 덕분에 일반 센서 프레임워크로 다양한 것을 나타내는 훨씬 더 새로운 클래스가 나타날 것으로 예상할 수 있습니다. 센서 유형입니다.

향후 작업을 위한 또 다른 중요한 영역은 Generic Sensor API 자체를 개선하는 것입니다. 센서 사양이 현재 추천 후보이므로 아직 시간이 남아 있습니다 수정을 하고 개발자에게 필요한 새로운 기능을 제공하기 위한 것입니다.

여러분도 도와주실 수 있어요!

센서 사양에 도달함 후보 추천 따라서 웹 및 브라우저 개발자의 피드백은 매우 중요합니다. 자, 어떤 기능을 추가하면 좋을지, 아니면 개선하고 싶은 기능이 있는지 최신 API입니다.

사양 문제도 언제든지 제출해 주세요. 버그로 분류될 수 있습니다.

리소스

감사의 말씀

이 도움말은 Joe Medley가 검토했으며 케이스 바스케스 히어로 이미지 제공자 Misko(경유) Wikimedia Commons.