JavaScript_设备传感器数据采集-js教程-PHP中文网

JavaScript_设备传感器数据采集

夜晨

发布： 2025-11-22 13:42:06

原创

191人浏览过

现代浏览器通过JavaScript支持设备传感器数据采集，1. 使用DeviceOrientation API获取设备方向（alpha、beta、gamma）；2. 通过DeviceMotion API获取加速度和旋转数据；3. 部分浏览器支持AmbientLightSensor获取环境光强度；4. 所有功能需在HTTPS安全上下文中运行，依赖用户授权且存在兼容性差异，使用前应进行特性检测并提供降级方案。

javascript_设备传感器数据采集

现代浏览器支持通过 JavaScript 访问设备的多种传感器，用于采集方向、运动、光线等数据。这些功能主要基于 Device Orientation 和 Device Motion API，适用于手机、平板等具备传感器的移动设备。

1. 监听设备方向（陀螺仪）

设备方向 API 提供设备在空间中的朝向信息，包括 alpha、beta、gamma 三个角度值。

alpha： 设备绕 Z 轴旋转的角度（0–360°），表示设备的地理方向
beta： 设备绕 X 轴旋转的角度（-180°–180°），前后倾斜
gamma： 设备绕 Y 轴旋转的角度（-90°–90°），左右倾斜

示例代码：

BlessAI

Bless AI 提供五个独特的功能：每日问候、庆祝问候、祝福、祷告和名言的文本生成和图片生成。

查看详情

if (window.DeviceOrientationEvent) {
  window.addEventListener('deviceorientation', function(e) {
    const { alpha, beta, gamma } = e;
    console.log(`方向: ${alpha}, 前后: ${beta}, 左右: ${gamma}`);
  });
} else {
  console.log('当前设备不支持方向传感器');
}

登录后复制

2. 监听设备运动（加速度计）

设备运动 API 提供设备在三维空间中的加速度数据，包含重力影响或排除重力的选项。

立即学习“Java免费学习笔记（深入）”；

acceleration： 当前加速度（含重力）
accelerationIncludingGravity： 包含重力的加速度（大多数设备使用此项）
rotationRate： 角速度（每秒旋转角度）
interval： 数据更新频率（毫秒）

示例代码：

if (window.DeviceMotionEvent) {
  window.addEventListener('devicemotion', function(e) {
    const { x, y, z } = e.accelerationIncludingGravity;
    const rotation = e.rotationRate;
    console.log(`加速度: X=${x}, Y=${y}, Z=${z}`);
    if (rotation) {
      console.log(`旋转: α=${rotation.alpha}, β=${rotation.beta}, γ=${rotation.gamma}`);
    }
  });
} else {
  console.log('当前设备不支持运动传感器');
}

登录后复制

3. 光线传感器（Ambient Light Sensor）

部分现代浏览器支持 AmbientLightSensor 接口，可获取环境光强度（单位：lux）。

注意：该功能需引入 Sensor APIs，目前仅在部分 Chromium 浏览器中可用（如 Chrome for Android）。

示例代码：

if ('AmbientLightSensor' in window) {
  const sensor = new AmbientLightSensor();
  sensor.onreading = () => {
    console.log(`环境光照: ${sensor.illuminance} lux`);
  };
  sensor.onerror = (event) => {
    console.log(`传感器错误: ${event.error.name}`);
  };
  sensor.start();
} else {
  console.log('环境光传感器不可用');
}

登录后复制