Create a camera module in Hype for a webapp

(kerguelen) #1

Hi there,
I’m thinking of a web app to be used on mobile devices. This web app would need to take pictures, get their GPS exif coordinate and store them in the telephone photo gallery.
The camera module would be able to load on it’s view finder a transparent old photograph of the landscape to help the user take a new photo of this landscape matching exactly the same angle of view.
The goal of such an app would be landscape evolution monitoring.
Is there a way to implement such a camera module with Hype ?
Thanks in advance !


I don’t know :man_shrugging:t2:

My thinking is, probably not – or not without limitations. Although, I’m not sure. Here’s a good place to start looking…

The “resources” tab might be interesting to you.

(kerguelen) #3

Thanks, I’ll have a look.
If you’ve any idea, I take it :wink:



The following Forum post may have some useful info for your quest:

(kerguelen) #5

Hi @JimScott, I tried it but the post is about 3 years old and the api seems to have changed (instead of requesting the camera flow, it asks to import image from a file).


I am aware the post is three years old… it was the associated links I thought might be of interest.

(kerguelen) #7

Oh, it is, indeed :slight_smile: But technology seems to have moved forward since then :slight_smile:

(Mark Hunte) #8

As a start the navigator.mediaDevices.getUserMedia() works on iOS browsers. and Desktop browsers for video stream capture from users cameras.

See for more details. on usage and support.

I have tested it on my iPhone with Mobile Safari and Chrome and once I allow permission it works.
The Same with desktops.

Note. The Hype Preview server in most cases should work for testing on Desktop (Chrome, Safari,FF) but not on iOS.

iOS needs the page severed from the https:// protocol.

Working simple example (9.6 KB)

Live demo

Video application
(kerguelen) #9

Thanks Mark !
How do I make a snapshot ?

(Mark Hunte) #10

Well I would read up on canvas -> google search

Find a reference and tutorial that makes sense to you, there are many.

And the adjust the idea in this example to your needs. I will add this is all quickly put together and is by no means the only way of doing things. (15.8 KB)

Live demo two

Automatically crop image to set x + y values
(kerguelen) #11

Lovely, @MarkHunte !
I’ll find a way to download the image on the mobile device photoroll.
Thanks for putting me on tracks

(Mark Hunte) #12

Note the image code commented out. In example 2 I just uses the data URL for the image in the container. But the commented out code also puts it in another image which you can attach.

Probably using an attached image will make the save easier. Again google is your huh…hum… friend…

(kerguelen) #13

Hum, I’m not sure I understand but I’ll ask my friend :wink:

(Nick ) #14

problem is iOS 11…
input tag I used 3 years ago worked with all the iOS versions through 10

<input type=“file” accept=“image/*”>

For iOS 11 you need to update the input tag to…
<input type=“file” accept="image/*"id=“image-input” capture/>

The attached version has the updated tag for iOS11
Oh and by the way it will crash in Hype Reflect so you need to test it in iOS Safari. (107.2 KB)

(Nick ) #15

Also…if you want to really get more from the camera on your mobile device take a look at this tutorial.
I think Hype by itself is not going to be enough.
But you can still approach it using the HTML Widget.

(Nick ) #16

one last comment on this… from the initial ask it looks like you are trying to build something like this?

(kerguelen) #17

Hi @nick
You’re right, I’m on a rephoto type of app but there is a huge cartographic aspect in it.
Thanks for your advice and leads !
Actually, the file you sent me asks for a file to load.
Camera input works fine when the webapp is hosted on a https website.

I had a look on many tutorials online but they all allow camera feed to download through an image capture and display. Thus, the image is very small size and is too small to be of any use with this project

(Mark Hunte) #18

I am not really sure what you mean.

But the image size in the resulting capture in the example I give is really dependent on the size you set for the canvase and image.

(kerguelen) #19

Hi Mark,
I mean the image needs to be displayed before it can be saved. But display size (and thus saving size) depends on the container the image is being displayed. And, if I’m not mistaken, this size is always smaller than maximum image size allowed by the camera.

(Nick ) #20

Here is a paper on how an app was created using OBJC and C++ it may give some more insight into the challenge.

I am all about pushing the technology to do something new. I think the biggest challenge with HTML is camera access to storage to overlay back to storage and repeat the process