fileupload set to "Image Camera" does not go directly to camera

[p38]

So this had me stumped for a while and I thought it was a camera issue, I could never understand why, when taking a photo, the user would always be presented with an option first (ie: choose file, or use camera or use gallery etc).

I then started looking at making my own element plugin using the getUserMedia option. In my research I discovered the image/audio/video option coupled to <input type="file"> using accept="" and capture="camera"

So back to the file upload element I discovered there was a logic error in the code, that prevented the file input from using the "Image Camera" option that is available in the dropdown list.

the logic error in question is line 2522 in fileupload.php

$accept = !empty($fileTypes) ? ' accept="' . $fileTypes . '" ' : ' ';

will always return accept = ".jpg,.png, etc etc" irrespective if $device_capture = 1 to 6 have been selected, so altho the capture = "camera" proptery is correctlys etup, the accept = "" will always have file extensions.

Consequently when the camera fires up it sees there are extensions setup so it assumes you want to load images as well.

for camera, audo and video only options, the accept property needs to be accept="image/*",accept="audio/*", accept="video/*" respectively, without any file extension definitions.

this code change solves the problem and works as expected change line 2522 in fileupload.php replace to

$accept = !empty($fileTypes) && !in_array($device_capture,array(1,2,3,4,5,6)) ? ' accept="' . $fileTypes . '" ' : ' ';

Would someone be so kind as to commit this for me so everyone can benefit from it, as I have not setup a github account to do pull requests yet. I plan to do this as I work a lot with fabrik.

Now we can capture photos directly from the mobile camera, without the risk of the user loading photos instead.

Thanks

Paul

PS: there is some confusion using capture = "camera", as this was actually intended for capture="user" and capture="environment" which allows you to select the forward facing or selfie option of the camera.

https://www.w3.org/TR/html-media-capture/#the-capture-attribute

Here is a good example of all the possible permutations using the "capture" option

https://addpipe.com/html-media-capture-demo/

 

[cheesegrits]

OK, I'll test this today and let you know.

-- hugh

 

[cheesegrits]

I've committed a fix:

https://github.com/Fabrik/fabrik/commit/585ec65d48ab0d286868b5f1828e1d16cb0b20c5

... which simplifies how that stuff is handled.

Also added 'user' and 'environment' as options, although my Pixel 2 XL running Android Pie with latest Chrome doesn't seem to understand it - setting 'user' still opens the front facing camera.

Note that the 'user' and 'environment' settings are a new revision of HTML5, which deprecates the 'camera' option, and specs that 'capture' with no value is now the same as the older capture="camera". But I think setting it to "camera" for newer spec HTML5 will default to the "no value" effect.

-- hugh

 

[p38]

Thanks Hugh, much appreciated.

Congrats on an awesome element, working through the code, I am amazed at what you achieved and packed into the file upload element plugin, covering all bases.

And the camera facilities are pretty neat in itself.

I am using this to take photos and run them through face recognition software.... works like a charm

Paul

 

[cheesegrits]

Cool.

Out of interest, does the 'user' setting (which should open the camera in selfie mode) work for you?

-- hugh

 

[p38]

Hi Hugh,

No, it does not work for me, altho my test phone android version is perhaps 2 years old. So I suspect it will only work on very recent versions where the browser has been updated.

However, even recent chrome for android does not work.

I think there has been a very slow uptake for the new html spec.

BTW, navigator.getUserMedia library uses "user" and "environment" and that does work. However, it seems as though usage and support for webRTC is on the decline.

 

[cheesegrits]

Yeah, doesn't work on my Pixel 2 XL, running latest and greatest Android and Chrome.

Which is weird, because Google say it should ...

https://developers.google.com/web/fundamentals/media/capturing-images/

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.

The capture attribute works on Android and iOS, but is ignored on desktop

Oh well.

-- hugh