当前位置：首页 > 文章列表 > 文章 > 前端 > 手把手教你用JS实现环境光检测，手机瞬间变光线传感器

手把手教你用JS实现环境光检测，手机瞬间变光线传感器

2025-06-19 13:19:16 0浏览收藏

哈喽！今天心血来潮给大家带来了《手把手教你用JS检测环境光，手机秒变光线传感器》，想必大家应该对文章都不陌生吧，那么阅读本文就都不会很困难，以下内容主要涉及到，若是你正在学习文章，千万别错过这篇文章~希望能帮助到你！

要检测JavaScript中的环境光，主要使用设备环境光线传感器API或摄像头估算亮度。首先判断浏览器是否支持AmbientLightSensor API：1. 使用if ('AmbientLightSensor' in window)检查支持性；2. 若支持，则创建传感器实例并监听reading和error事件以获取光照强度；3. 若不支持或出错，使用摄像头估算亮度：通过getUserMedia获取视频流，绘制到Canvas并计算像素平均亮度；4. 根据获取的光照数据调整页面样式，如设置亮度滤镜；5. 注意AmbientLightSensor兼容性有限，需考虑降级方案或polyfill库。整个流程兼顾功能实现与浏览器兼容问题。

js如何检测环境光设备环境光线传感器API使用

要检测 JavaScript 中的环境光，你可以考虑使用设备环境光线传感器 API，不过需要注意的是，这个 API 的支持度并不高，而且需要用户授权才能访问。如果不支持，可能需要降级到其他方案，例如使用摄像头估算亮度。

设备环境光线传感器API使用

如何判断浏览器是否支持环境光传感器API？

首先，我们需要判断用户的浏览器是否支持 AmbientLightSensor API。毕竟，如果浏览器不支持，后面的代码就没必要执行了。你可以这样做：

if ('AmbientLightSensor' in window) {
  console.log('环境光传感器API可用');
  // 进一步的代码
} else {
  console.log('环境光传感器API不可用');
  // 降级方案
}

这个简单的 if 语句可以帮助你确定是否可以继续使用这个 API。如果不支持，你可以考虑使用其他方法来估算环境光，比如通过摄像头。

如何获取环境光数据？

一旦确定浏览器支持 AmbientLightSensor API，就可以开始获取环境光数据了。下面是一个简单的例子：

try {
  const sensor = new AmbientLightSensor();

  sensor.addEventListener('reading', () => {
    console.log('当前光照强度:', sensor.illuminance, 'lux');
    // 根据光照强度调整页面样式或功能
  });

  sensor.addEventListener('error', event => {
    console.error('传感器错误:', event.error.message);
  });

  sensor.start();
} catch (error) {
  console.error('创建传感器失败:', error.message);
  // 处理异常情况
}

这段代码创建了一个 AmbientLightSensor 实例，并添加了两个事件监听器：reading 和 error。reading 事件会在每次传感器读取到新的光照强度时触发，你可以在这个事件处理函数中获取光照强度，并根据它来调整页面样式或功能。error 事件会在传感器发生错误时触发，你可以在这个事件处理函数中处理异常情况。

注意，AmbientLightSensor 构造函数可能会抛出异常，比如用户拒绝了权限。因此，你需要使用 try...catch 语句来捕获这些异常。

没有环境光传感器API，如何用摄像头估算亮度？

如果浏览器不支持 AmbientLightSensor API，或者用户拒绝了权限，你可以考虑使用摄像头来估算环境光。这需要一些图像处理的知识，但基本的思路是：

获取摄像头视频流： 使用 getUserMedia API 获取摄像头的视频流。
创建 Canvas： 创建一个 Canvas 元素，并将视频流绘制到 Canvas 上。
获取图像数据： 使用 getImageData 方法获取 Canvas 上的图像数据。
计算亮度： 遍历图像数据，计算每个像素的亮度，然后取平均值。

下面是一个简单的例子：

async function estimateBrightness() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
    const video = document.createElement('video');
    video.srcObject = stream;
    await video.play();

    const canvas = document.createElement('canvas');
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    const ctx = canvas.getContext('2d');

    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;

    let brightness = 0;
    for (let i = 0; i < data.length; i += 4) {
      // 使用 RGB 计算亮度
      brightness += (0.299 * data[i] + 0.587 * data[i + 1] + 0.114 * data[i + 2]);
    }

    brightness /= (canvas.width * canvas.height);
    console.log('估算的亮度:', brightness);

    // 停止视频流
    stream.getTracks().forEach(track => track.stop());
  } catch (error) {
    console.error('获取摄像头失败:', error.message);
  }
}

estimateBrightness();

这段代码首先获取摄像头的视频流，然后将视频流绘制到 Canvas 上。接着，它获取 Canvas 上的图像数据，并遍历图像数据，计算每个像素的亮度。最后，它取平均值，得到估算的亮度。

需要注意的是，这种方法估算的亮度并不精确，因为它受到摄像头质量、光圈大小、曝光时间等因素的影响。但是，在没有环境光传感器 API 的情况下，这仍然是一个可行的方案。

如何根据环境光调整页面样式？

有了环境光数据，就可以根据它来调整页面样式了。比如，可以根据光照强度来调整页面的亮度，或者根据光照颜色来调整页面的色调。

下面是一个简单的例子，根据光照强度来调整页面的亮度：

function adjustBrightness(illuminance) {
  // 将光照强度映射到亮度值
  const brightness = Math.max(0, Math.min(1, illuminance / 1000));

  // 设置页面的亮度
  document.body.style.filter = `brightness(${brightness})`;
}

这段代码将光照强度映射到亮度值，然后使用 filter 属性来设置页面的亮度。filter 属性可以用来设置各种图像效果，比如亮度、对比度、饱和度等。

当然，你可以根据自己的需求来调整页面样式。比如，你可以根据光照强度来调整页面的背景颜色，或者根据光照颜色来调整页面的字体颜色。