2

I am writing a web app which allows the user to take photos with their mobile device. These photos must be taken live, in real-time and not uploaded from e.g. previous photos taken or saved jpg images.

I currently have 2 different prototypes:

  1. Using getUserMedia() to check for valid devices, force user to allow device access and open a video stream, then capture the stream image to a canvas for further processing.
  2. Using <input type="file" accept="image/*" capture="camera" /> to get access to a mobile device’s camera app, then return the photo taken as an image file for further processing.

I like the <input type="file" accept="image/*" capture="camera" /> solution because of the ease of implementation and the camera app UX and functions are so much better than a simple getUserMedia() solution. Also, a fully functional getUserMedia() solution (with, e.g. flash, focus, zoom, fullscreen, etc.) seems like it would be very complex to implement.

BUT…

Some platforms (e.g. PC) allow selection of the image file from folder instead of using the camera device.
This is a showstopper for me.

Is it possible to know whether the device being used is going to allow selection of an image file vs. open the camera app, or perhaps the source of the image when it is returned, so that I can prevent use of images from folders?

Thanks for any advice!

ChrisM
  • 63
  • 7
  • 1
    Does this answer your question? [html5 display as image rather than "choose file" button](https://stackoverflow.com/questions/23916566/html5-input-type-file-accept-image-capture-camera-display-as-image-rat) – TheRakeshPurohit Jul 28 '21 at 08:20
  • No, I have already overridden the standard behaviour of the the input field by hiding it and providing my own button in the prototype. I'm only interested in how I force it to use the camera app instead of allowing selection from e.g. jpgs in a folder. – ChrisM Jul 28 '21 at 08:27
  • Depending on how much "secure" you need the solution to be, you could probably make a simple check **after selection** of the `file.lastModified` timestamp, though motivated adversary could spoof this, like anything else on front-end. – Kaiido Jul 28 '21 at 08:27
  • Users can theoretically bypass the check using virtual machines, so maybe it's impossible to design a way to totally ensure that the photo comes from a camera. – PRO Jul 28 '21 at 09:14
  • Note: the `` tag does not use and does not need a closing slash and never has in any HTML specification. – Rob Jul 28 '21 at 09:22
  • I think for production I would want to be fairly sure that it came from a real-time photo, but 100% is perhaps not necessary. I could perhaps test for device attributes (I read about "userAgent", which is not recommended - https://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device). But how would I know which combinations of attributes would trigger the camera app? Thanks for the ideas so far! – ChrisM Jul 28 '21 at 13:01
  • 1
    And thanks for the comment about the closing slash - that's the dangers of cut and paste from a google search when I'm not an expert in html myself :-) – ChrisM Jul 28 '21 at 13:02

0 Answers0