input 标签触发拍照功能

问题

在移动端使用 <input type="file"> 上传图片时，如何直接触发设备的拍照功能，而不是打开文件选择器？

解答

使用 capture 属性可以指定文件上传控件调用设备的媒体捕获功能。

基本用法

<input type="file" accept="image/*" capture="camera">

capture 属性可选值

<!-- 使用前置摄像头 -->
<input type="file" accept="image/*" capture="user">

<!-- 使用后置摄像头 -->
<input type="file" accept="image/*" capture="environment">

<!-- 调用相机 -->
<input type="file" accept="image/*" capture="camera">

<!-- 调用摄像机（录制视频） -->
<input type="file" accept="video/*" capture="camcorder">

<!-- 调用麦克风（录音） -->
<input type="file" accept="audio/*" capture="microphone">

关键点

• capture 属性仅在移动设备上有效，桌面浏览器会忽略该属性
• 需配合 accept 属性指定文件类型，如 image/*、video/*、audio/*
• user 和 environment 分别对应前置和后置摄像头
• 不同设备和浏览器的支持程度可能有差异