Bringing <input type=file capture> to Windows, Mac, and Linux
Status: 🚧 In Progress
The 12-Year-Old Feature Request
In October 2012, a feature request was filed: bring camera capture to desktop browsers. On Android, developers could already do this:
<input type="file" accept="image/*" capture="camera">
Click the input, and Android opens the camera app. Take a photo, and it's submitted as a file. Simple, elegant, and completely unavailable on desktop platforms for over a decade.
Bug: 40291635
Why It Matters
Think about the use cases:
- ID verification - Upload a photo of your passport or driver's license
- Profile pictures - Take a selfie directly instead of hunting through files
- Document scanning - Capture receipts, forms, or notes
- Support tickets - Show the problem via webcam
- Video messages - Record a quick video response
Today, web developers have to build custom camera UIs using getUserMedia() - non-trivial work that most sites skip entirely. With native capture support, it's a single HTML attribute.
The Implementation
The solution is a cross-platform CameraCaptureDialog that intercepts file inputs with the capture attribute:
// In file_select_helper.cc - intercept capture requests
if (params.capture && ShouldShowCameraCaptureDialog(params)) {
CameraCaptureDialog::Show(web_contents, params, callback);
return;
}
Features
| Feature | Description |
|---|---|
| Photo capture | Single image capture with preview |
| Video recording | Record video with live preview |
| Audio recording | Voice memos and audio messages |
| Device selection | Choose between multiple cameras/mics |
| Playback preview | Review before submitting |
| WebM metadata | Proper duration headers for video files |
Demo
Image Capture:
Video Recording:
Audio Recording:
Try It
Test the feature yourself with a patched Chromium build.
The HTML API
The capture attribute on file inputs tells the browser to prefer media capture:
<!-- Prefer camera for images -->
<input type="file" accept="image/*" capture>
<!-- Prefer user-facing camera -->
<input type="file" accept="image/*" capture="user">
<!-- Prefer environment-facing camera -->
<input type="file" accept="image/*" capture="environment">
<!-- Video capture -->
<input type="file" accept="video/*" capture>
<!-- Audio capture -->
<input type="file" accept="audio/*" capture>
The spec is defined in HTML Media Capture, and this implementation brings Chrome desktop in line with Android and mobile Safari.
Architecture
The implementation lives in chrome/browser/ui/views/media_capture/:
camera_capture_dialog.h # Dialog interface and state machine
camera_capture_dialog.cc # Cross-platform UI implementation
camera_capture_dialog_unittest.cc
Key components:
- Live preview using
media::VideoCaptureDevice - Recording via
MediaRecorderAPI internally - Device enumeration through
media::AudioDeviceDescription - Views-based UI for cross-platform consistency
Current Status
IN REVIEW CL 7594822 - Support camera capture for <input type=file capture> on desktop
Links
Sometimes the best features are the ones that should have existed all along. After 12 years, desktop Chrome is finally catching up to mobile.