How-to Guides
Capture Images
Take photos with the device camera or pick images from the gallery
Capture Images
Use standard HTML file inputs to capture images from the camera or pick them from the gallery. The starti.app container handles the native camera UI automatically.
Prerequisites
- The starti.app SDK is installed and initialized
- The device has a camera (for capture)
Take a photo with the camera
Use an <input type="file"> element with the capture attribute. This opens the camera directly, skipping the file chooser:
<input type="file" accept="image/*" capture="environment" id="camera-input" />const input = document.getElementById("camera-input");
input.addEventListener("change", () => {
const file = input.files[0];
if (file) {
console.log("Photo taken:", file.name, file.size, "bytes");
}
});Choose the camera direction
capture value | Camera |
|---|---|
"environment" | Rear camera |
"user" | Front camera (selfie) |
<!-- Rear camera (default) -->
<input type="file" accept="image/*" capture="environment" />
<!-- Front camera -->
<input type="file" accept="image/*" capture="user" />Pick from the gallery
Remove the capture attribute to show a chooser that lets the user pick an existing photo or take a new one:
<input type="file" accept="image/*" />Programmatic capture
Create the input element in JavaScript for a button-driven flow:
document.getElementById("take-photo-btn").addEventListener("click", async () => {
const input = document.createElement("input");
input.type = "file";
input.accept = "image/*";
input.capture = "environment";
const file = await new Promise((resolve) => {
input.addEventListener("change", () => resolve(input.files?.[0] ?? null));
input.click();
});
if (!file) return;
// Show preview
const img = document.getElementById("preview");
img.src = URL.createObjectURL(file);
// Upload
const formData = new FormData();
formData.append("photo", file);
await fetch("/api/upload", { method: "POST", body: formData });
});Capture a video
<input type="file" accept="video/*" capture="environment" />Multiple files
<input type="file" accept="image/*" multiple />File inputs use standard web APIs and work in regular mobile browsers too — they are not exclusive to the starti.app container.