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 !
1 Like
I don't know 
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.
1 Like
Thanks, I’ll have a look.
If you’ve any idea, I take it 
The following Forum post may have some useful info for your quest:
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.
Oh, it is, indeed 
But technology seems to have moved forward since then
As a start the navigator.mediaDevices.getUserMedia() works on iOS browsers. and Desktop browsers for video stream capture from users cameras.
See https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia 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
video_Camera_Browser_Stream.hype.zip (9.6 KB)
Live demo
2 Likes
Thanks Mark !
How do I make a snapshot ?
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.
Update
version 1. initial version
video_Camera_Browser_Stream_ImageCapture_v1.hype.zip (15.8 KB)
Live demo updated to v1
https://markosx.com/httpshypetests/camerastreamSnap/v1
version 2. example showing one way of how to increase capture image size.
video_Camera_Browser_Stream_ImageCapture_v2.hypetemplate.zip (26.0 KB)
Full details for v2 in post below
Live demo updated to v2 ( 28-01-23 )
v2 demo live demo
2 Likes
Lovely, @MarkHunte !
I’ll find a way to download the image on the mobile device photoroll.
Thanks for putting me on tracks
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…
Hum, I’m not sure I understand but I’ll ask my friend
1 Like
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.
cameraOne.zip (107.2 KB)
1 Like
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.
one last comment on this… from the initial ask it looks like you are trying to build something like this?
2 Likes
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.
@MarkHunte
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
1 Like
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.
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.
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