html5无标准api控制闪光灯，仅chrome/edge安卓版通过非标准torch属性实验性支持，需https、用户手势触发、exact约束及已激活视频流。
HTML5本身不提供直接控制摄像头闪光灯（torch）的API，MediaStreamTrack接口也未定义标准方法来开关闪光灯。目前只有部分浏览器（如Chrome on Android）通过非标准、实验性属性 torch 支持该功能，且需满足严格条件。
确认设备与浏览器是否支持 torch 属性
并非所有摄像头都具备物理闪光灯，也并非所有浏览器实现 torch 控制。当前仅 Chrome（Android 8.0+，桌面版不支持）、Edge（基于Chromium的Android版）等少数环境可能支持，且必须满足：
- 使用
getUserMedia请求视频流时启用exact约束或明确要求torch: true - 媒体轨道必须已激活（active为true），且处于活跃的媒体流中
- 页面需运行在安全上下文（HTTPS 或 localhost）
- 用户已授予摄像头权限，且调用发生在用户手势（如点击）触发的上下文中
尝试启用/切换闪光灯（实验性代码）
若环境支持，可通过 MediaStreamTrack.getCapabilities() 检查是否暴露 torch 能力，再用 applyConstraints() 设置：
async function toggleTorch(videoTrack) {
if (!videoTrack || !videoTrack.getCapabilities) return;
const capabilities = videoTrack.getCapabilities();
if (!capabilities.torch) {
console.warn('当前摄像头不支持闪光灯控制');
return;
}
try {
// 切换 torch 状态（注意：torch 是布尔值，不是字符串）
const newTorchState = !videoTrack.getSettings().torch;
await videoTrack.applyConstraints({ torch: newTorchState });
console.log(`闪光灯已 ${newTorchState ? '开启' : '关闭'}`);
} catch (err) {
console.error('启用闪光灯失败:', err.name, err.message);
}
}
⚠️ 注意：torch 是约束（constraint）而非设置（setting），必须通过 applyConstraints 设置；直接读取 track.settings.torch 可获取当前状态，但该值仅在成功应用后更新。
常见失败原因与规避建议
实践中多数“torch 控制失败”源于环境限制，而非代码错误：
- 桌面浏览器基本不支持：Chrome/macOS、Firefox、Safari 均未实现 torch API，不要在桌面端做兼容尝试
-
未在用户手势中调用：必须在
click、touchstart等事件回调内执行applyConstraints，异步延迟（如 setTimeout）会导致被浏览器拒绝 -
未请求必要约束：首次调用
getUserMedia时应显式声明{ video: { torch: true } }，否则后续无法启用 -
设备固件限制：某些安卓设备即使系统支持，也可能因驱动或厂商屏蔽而返回
torch: false在 capabilities 中
替代方案与现实建议
若需稳定控制补光效果，可考虑以下更可行的方式：
-
前端模拟补光：在视频画布（
<canvas></canvas>）上叠加半透明白色图层并调节 opacity，实现软件级“柔光”效果 - 引导用户手动操作：检测到不支持 torch 时，提示用户打开系统相机 App 并启用闪光灯，再切回网页
- 依赖原生容器：将网页嵌入 Capacitor / Cordova / React Native WebView，并通过原生插件调用摄像头 API（如 Android Camera2）精确控制 torch
目前 Web 标准仍在推进相关能力（如 Media Capture and Streams spec 已将 torch 列为可选能力），但跨平台稳定支持仍需时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
