<input capture="camera"> on mobile

[abrichr]

I am currently considering whether to use vue-web-cam or <input type="file" accept="image/*" capture="camera">. This is for a mobile camera application. What are the tradeoffs of both of these approaches?

I'll start:

vue-web-cam:

Pros

• Works on desktop and mobile
• Customizable camera interface

Cons

• Requires https on mobile

<input capture="camera">:

Pros

• Built-in zoom / flash / face detection
• Improved performance (shorter delay between pressing shutter button and seeing resulting image)

Cons

• Less control (e.g. iOS forces the user to "retake" or "use photo" after every shutter button)
• Mobile only

Would it be worth considering whether to use <input capture="camera"> in vue-web-cam when it's available?

[VinceG]

@abrichr Having this component handle this under the hood on mobile seems like it something that'll require some serious changes.

the API seems to be not compatible with anything else other than mobile devices
https://caniuse.com/html-media-capture

the only con. is that it requires https on mobile, with the tools we have today for the most part it's not an issue iMHO

[abrichr]

Thanks for the quick reply!

Regarding implementation, an adapter pattern might be helpful.

Regarding getting it working on https, this can be a somewhat non-trivial (e.g. see fastapi/full-stack-fastapi-template#302 (comment)).

There are additional cons as well. Here is the combined list:

• Requires https on mobile
• Slower (longer delay between pressing shutter button and seeing resulting image)
• User needs to allow permission to record video every time they refresh the page
• No access to built-in zoom / flash / face detection
• Requires additional effort to create functional camera UI (e.g. shutter button)

Regarding this:

with the tools we have today for the most part it's not an issue iMHO

Can you please clarify which tools you are referring to?

[VinceG]

I was referring to the only con that was listed that requires https. We have dev servers, self signed certs that can be used to accomplish that. I’m open to suggestions and implementation of course, we will most likely need to add this to a major version because of the amount of changes.

…

----- Vincent Gabriel Software Engineer Please excuse my brevity, sent from my iPhone

On Oct 30, 2020, at 18:14, Richard Abrich ***@***.***> wrote:  Thanks for the quick reply! Regarding implementation, an adapter pattern might be helpful. Regarding getting it working on https, this can be a somewhat non-trivial (e.g. see fastapi/full-stack-fastapi-template#302 (comment)). There are additional cons as well. Here is the combined list: Requires https on mobile Slower (longer delay between pressing shutter button and seeing resulting image) User needs to allow permission to record video every time they refresh the page No access to built-in zoom / flash / face detection Requires additional effort to create functional camera UI (e.g. shutter button) Regarding this: with the tools we have today for the most part it's not an issue iMHO Can you please clarify which tools you are referring to? — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[TheGreatRefrigerator]

Hi @VinceG,
i'm sorry this has nothing to do with the topic, but i'm just wondering if the collapsible 3 dots block in your previous comment were added automatically by github, when you answered by mail?
This is a feature many people would love to use in their comment.. currently there is only the <details>...</details> workaround...
see e.g. here

It would be great if there is a way to do this on purpose

[VinceG]

@TheGreatRefrigerator yeah it was added automatically