Web应用中能否通过JavaScript调整摄像头的曝光参数？

你需要通过WebRTC提供的媒体轨道高级约束调整摄像头硬件层面的曝光参数，不需要修改像素值，完全可以满足获取原始有效光谱数据的需求。

核心实现逻辑 #

• 首先关闭摄像头自动曝光，否则手动调整的曝光参数会被系统自动覆盖
• 先调用getCapabilities()查询当前设备支持的曝光可调范围，避免传入非法参数
• 可在getUserMedia初始化时直接传入约束，也可以在运行时调用applyConstraints()动态调整

修改后的代码示例 #

// 先配置约束，关闭自动曝光，设置固定曝光值（数值范围需要根据设备能力调整）
var constraints = {
  video: {
    width: 1280, 
    height: 960, 
    facingMode: "user",
    // 新增曝光相关约束
    exposureMode: "manual", // 关闭自动曝光，切换为手动模式
    exposureCompensation: -1.0, // 曝光补偿，数值越小画面越暗，可根据需求调整
    // 也可以直接调整亮度参数
    // brightness: 0.5
  }
};
const container = document.getElementById('webcam'),
video = document.createElement('video');
video.autoplay = true;
container.appendChild(video);

navigator.mediaDevices.getUserMedia(constraints)
.then(stream =>{
    video.srcObject = stream;
    $('#heightIndicator').show()
    $('#webcam-msg').hide()

    // ========== 新增：查询设备能力+运行时动态调整曝光 ==========
    const videoTrack = stream.getVideoTracks()[0];
    // 查看当前设备支持的所有可调参数
    const capabilities = videoTrack.getCapabilities();
    console.log('设备支持的曝光范围：', capabilities.exposureCompensation);
    console.log('设备支持的亮度范围：', capabilities.brightness);

    // 示例：运行时动态调低曝光避免过曝
    if (capabilities.exposureCompensation) {
      videoTrack.applyConstraints({
        video: {
          exposureCompensation: -2.0 // 根据设备支持的范围调整，过曝就往小调
        }
      }).catch(e => console.log('调整曝光失败：', e));
    }
})
.then(() => new Promise(resolve => video.onloadedmetadata = resolve))
.then(() => log(video.videoWidth +"x"+ video.videoHeight))
.catch(e => log(e));

var data;
var log = msg => data+= "<p>" + msg + "</p>";

video.style.height ="100%";
video.style.width ="320px";

注意事项 #

• 所有媒体轨道高级约束仅在HTTPS环境或本地localhost调试环境下生效
• 不同设备的曝光可调范围不一致，必须通过getCapabilities()返回的min/max/step参数确定合法的调整值
• 部分设备不支持手动曝光调整，需要做好降级兼容处理

内容的提问来源于stack exchange，提问作者Marek Skokánek