Show HN: React Web Camera – Fix <input type=file> single-photo limit

shivantra.com

25 points by painternishant a day ago

What we built

React Web Camera is a lightweight, reusable React component that allows users to capture multiple photos in one camera session, in-browser. It works across standard web apps, responsive UIs, and Progressive Web Apps (PWAs)—unlocking a smoother experience than the default <input type="file" capture> element.

The problem

On mobile (and increasingly on desktops), using: <input type="file" accept="image/*" capture="environment"> only allows taking one picture before the camera closes. Want to add more? You have to reopen it each time.

How React Web Camera solves it

Opens the camera inline in-browser, Lets the user capture multiple photos in one go, Allows previewing captured photos, removing unwanted ones, and submitting everything in a batch, Fully client-side, respects user privacy, Supported across web, responsive UIs, and installable PWAs.

spankalee a day ago

This would be great as a web component for non-React developers. It could even work in plain HTML by generating a series of inputs for the form.

mfkp a day ago

Looks nice, and good demo. Maybe add a section to the site or the github showing browser support? I have some custom webcam capture stuff on my app but I need to make sure it works everywhere. Lastly, does it work with react native?

  • painternishant 14 hours ago

    Surely, we'll try to add browser support. Yes it does work with react-native. But you can always use camera native api while going with react-native.

lima a day ago

Last time I tried this approach, the problem was that the native camera input had much better quality, while ImageCapture was essentially a still frame from a video (worse exposure/processing).

Is this better now?

  • painternishant 14 hours ago

    Although image quality is a challenge but it is still very suitable for various use cases that isn't around the image quality. The image looks better now.