0

Objective: Have a camera icon button where onClick brings up the users camera on their mobile device from a web app.

Problem Statement: Basically, I have a button, in which onClick I want it to trigger the HTML5

  • input type="file" accept="image/*" capture

, as this tag enables me to access a users mobile camera from a web app.

I am using Reactjs if that matters. I am also working off this question How to access a mobile's camera from a web app? .

BUT I want the camera icon button to access the user's camera.

Right now, the input tag renders a 'Choose File' button along with a 'No File Chosen' text, the 'Choose File' button needs to be clicked in order to access the users' camera. How can use my own button, where on click it brings up the users camera?

The image below shows my button beside what the input tag renders. enter image description here

dutterbutter
  • 157
  • 1
  • 3
  • 12
  • This is a web app, right? Have you tried [this](https://www.npmjs.com/package/react-camera)? – weirdpanda Feb 11 '18 at 02:26
  • @weirdpanda yes, the problem is it seems that it only gives access to the front camera of a mobile device. The package was built for a computer's webcam I guess. – dutterbutter Feb 11 '18 at 02:34

1 Answers1

0

The issue here is that you have to use the proper "capture" attribute. Example:

<p>
  <label for="soundFile">What does your voice sound like?:</label>
  <input type="file" id="soundFile" capture="user" accept="audio/*">
  </p>
  <p>
  <label for="videoFile">Upload a video:</label>
  <input type="file" id="videoFile" capture="environment" accept="video/*">
  </p>
  <p>
  <label for="imageFile">Upload a photo of yourself:</label>
  <input type="file" id="imageFile" capture="user" accept="image/*">
</p>

The capture attribute specifies that, optionally, a new file should be captured, and which device should be used to capture that new media of a type defined by the accept attribute.

Values include user and environment. The capture attribute is supported on the file input type.

The capture attribute takes as its value a string that specifies which camera to use for capture of image or video data, if the accept attribute indicates that the input should be of one of those types.

More on this here officially: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture

DToxVanilla
  • 214
  • 2
  • 8