๐๐ธ๐ฅ Capture Sounds, Photos and Videos with HTML
The HTML capture attribute lets users record new mediaโphotos, videos, or audioโusing their deviceโs camera or mic, instead of selecting an existing file. Itโs especially useful on mobile devices.
โ๏ธ How It Works
Use the capture attribute with:
<input type="file" capture accept="media-type/*">
โ
Combined with the accept attribute, it lets users:
- Record new media using their camera or microphone
- Choose between capturing new media or uploading existing files
๐ฒ Capture Settings
Use these values for the capture attribute:
userโ Front-facing camera or mic (great for selfies or voice)environmentโ Back-facing camera (for surroundings or landscape shots)
๐งช Examples
๐ค Record Audio
<input type="file" capture="user" accept="audio/*">
โก๏ธ Opens mic for voice recording.
๐ท Take a Photo
<input type="file" capture="user" accept="image/*">
โก๏ธ Opens front camera for selfies.
๐ฌ Record Video
<input type="file" capture="environment" accept="video/*">
โก๏ธ Opens back camera for videos.
๐ ๏ธ When to Use
Perfect for:
- Forms needing image/audio/video input
- Surveys with real-time responses
- Mobile apps that need media uploads
๐ Notes
- Best on phones or tablets
- On desktops, it may open the file picker instead
๐ Conclusion
Try the demo ๐ Example Code
The capture attribute adds a smooth, interactive media upload experience to your HTML forms. Give it a go!