[HTML5] Launch native camera app

#1

One of the feature requests in the mobile web-app I’m building, is a Take Photo button. The app is paired with an in-real-world physical feature the general public can interact with, hence the prompt for the user to take a photo of what they accomplished.

image
image718×143 7.7 KB

I’m not wanting to capture this photo in any way. I’m just hoping it’s possible to launch the users native camera app when they hit the Take Photo button.

In HTML5, something like it can apparently be achieved with this:

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

I can’t quite get my head around how I might approach it from OpenFL or even the JavaScript output. Any thoughts?

Webcam support on html5
#2

In the JavaScript target could you try inserting that input on the document then triggering a click event? https://code.haxe.org/category/javascript/adding-element-to-dom.html

#3

Thank you @Confidant, I’ll give that a go!

1 Like
#4

I’ve yet to fully test this on mobile devices, but to trigger the element I wanted above, using the solution @Confidant linked to, was actually quite simple.

In the generated index.html, within the <body> I included:

<input id="take-photo" type="file" accept="image/*" capture="camera" style="display: none;" />

This is effectively invisible to the user, but a “click” event to that element can now be initiated within Haxe. In the class this function is needed, I import the js.Browser.document package:

import js.Browser.document;

Then, I generate a click event for that input element, referencing the id I gave it (take-photo):

document.querySelector("#take-photo").click();

So that could be fired based on an in-Haxe button click, or some other event.

#5

Great, thanks for the update!