Upload from Mobile Device Cameras

[shaan360]

It would be nice if we can have the feature, where user can take picture and upload at the same time.

[XzAeRo]

Interesting! I didn't knew this was even possible.

The HTML code that backs this functionality is very well documented [1][2]. For example, you can have HTML elements like this:

<input type="file" accept="image/*" capture>
<input type="file" accept="image/*" capture="user">
<input type="file" accept="image/*" capture="environment">

Adding the capture attribute without a value let's the browser decide which camera to use, while the "user" and "environment" values tell the browser to prefer the front and rear cameras, respectively.

Also, some JavaScript is expected to handle the automatic upload, which we kind of already have.

Thanks for the suggestion!

[1] https://developers.google.com/web/fundamentals/media/capturing-images
[2] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefcapture

[shaan360]

@XzAeRo Thank you for prompt response. The interesting point this extension works fine, captures photo and uploads it only if the browser camera access permission is on. If we can improve it to give a prompt message if device camera permission is off.

I have tried it with Safari and Chrome on IOS its working like a charm. Not sure about android devices.

[XzAeRo]

I think there are 2 ways to handle this.

1. Via input element that doesn't require browser permissions.
2. Via canvas image capture [1], where you ask for browser permissions, and then create a canvas with the camera stream, and add a capture button that saves a frame of the stream.

I'm more leaned to the first option, since this way we can get better image quality (a photo is better than a video frame IMO). The second option might be better in some cases, but I don't see a real benefit for our use cases. Also, the second option requires HTTPS connections (which can be limiting to some users of this extension).

[1] https://developers.google.com/web/fundamentals/media/capturing-images#access_the_camera_interactively