Want to limit image upload to a photo taken by the camera
Unanswered
Patrick MacDonald posted this in #help-forum
I have a website where to mark a property serviced I want the user to take a photo, not choose one from their roll. This works well on mobile and I can use accept, capture and type to prompt the browser to open up the phone's camera. However, on desktop the behavior is not ideal as it opens the file explorer.
I've tried checking the meta data, which works well for mobile (Android) and has the expected behavior on desktop. But it turns out iPhone strips the metadata so it prevents photo uploads from iPhones.
I've tried checking the User Agent, but it turns out resizing the display using inspect and hitting refresh changes the browser agent. Lol
Also I realized this would be an all be a client side solution, so if would could include something we pass with the image that would be great, just kinda looking to brain storm something here?
I've tried checking the meta data, which works well for mobile (Android) and has the expected behavior on desktop. But it turns out iPhone strips the metadata so it prevents photo uploads from iPhones.
I've tried checking the User Agent, but it turns out resizing the display using inspect and hitting refresh changes the browser agent. Lol
Also I realized this would be an all be a client side solution, so if would could include something we pass with the image that would be great, just kinda looking to brain storm something here?
25 Replies
@Patrick MacDonald I have a website where to mark a property serviced I want the user to take a photo, not choose one from their roll. This works well on mobile and I can use accept, capture and type to prompt the browser to open up the phone's camera. However, on desktop the behavior is not ideal as it opens the file explorer.
I've tried checking the meta data, which works well for mobile (Android) and has the expected behavior on desktop. But it turns out iPhone strips the metadata so it prevents photo uploads from iPhones.
I've tried checking the User Agent, but it turns out resizing the display using inspect and hitting refresh changes the browser agent. Lol
Also I realized this would be an all be a client side solution, so if would could include something we pass with the image that would be great, just kinda looking to brain storm something here?
I guess the best thing you can do is to access the native stuff from the user. So his native camera or connected cameras. Check this: https://whatpwacando.today/media
Like that you access directly the users camera and it works for both: desktop and mobile
Like that you access directly the users camera and it works for both: desktop and mobile
Hmm if can use user camera I could capture a screen shot and then the image would have to be from an active camera
Is there away to get the back camera of the device if there is one ?
exactly: capture a screenshot and you are done. The user can select the device, that he want to use. On phone its possible to use the front camera and the back camera, yes
Using the following code will give you access to all cameras ([example source](https://github.com/samdutton/simpl/blob/gh-pages/getusermedia/sources/js/main.js) or [site](https://simpl.info/getusermedia/sources/)):
Here you get all available media sources. Either display them on your own and let the client choose or select one by defautl
Using the following code will give you access to all cameras ([example source](https://github.com/samdutton/simpl/blob/gh-pages/getusermedia/sources/js/main.js) or [site](https://simpl.info/getusermedia/sources/)):
const devices = navigator.mediaDevices.enumerateDevices();Here you get all available media sources. Either display them on your own and let the client choose or select one by defautl
Thank you, I was thinking if the user has a back camera I might not even need to change anything
Check for back camera if so let the user did the normal flow
If no back camera then no image upload because the only issue is when the client is desktop it opens the file draw
I will use that to check camera and see the output hopfull iPhone doesn't have some strange issue lol
yea
enumerateDevices works pretty well on iphone as well. You'll get a name for each device as well, so you are pretty saveWill I be able to some how test the name to see if it is a back camera ?
yea, call the function in your page and check the result. Its the fastest way to integrate it:
button -> onClick -> calls enumerateDevices() -> console.log result (or set in state + display on page)
button -> onClick -> calls enumerateDevices() -> console.log result (or set in state + display on page)
Thanks so much I'm in bed for the night but will get at it tomorrow and will mark correct after some testing
White-winged Tern
Hello @Patrick MacDonald First this project sounds really nice, what was your solution for image storage? Like local, or convert first? Specially for a object oriented you need the link to access to it, I haven't done anything like this but that's a question running in my mind
@White-winged Tern I use vercel blobs and I store the URL information in a database I'm using. Postgres neon. And on the client I compress it if it's a larger image and then I use an action to upload the blob and then a database called to store the information of where to fetch it
@Patrick MacDonald <@937826399430004746> I use vercel blobs and I store the URL information in a database I'm using. Postgres neon. And on the client I compress it if it's a larger image and then I use an action to upload the blob and then a database called to store the information of where to fetch it
White-winged Tern
Great! Thanks for your answer! I'm going to try that now, it's a long road for image storing but necessary
100%. I'm a big fan of vercel blobs. It's very easy to get going in. The documentation is top notch
@B33fb0n3 so on my omarchy setup only audio devices are logged, I'm trying to to get usb debugging going for my phone but it seems I'm having isssues. I will keep trying. I need to see what they look like on an android phone, Iphone, windows computer, and mac to see if theres a good way to filter if there is a back camera or not
@Patrick MacDonald <@301376057326567425> so on my omarchy setup only audio devices are logged, I'm trying to to get usb debugging going for my phone but it seems I'm having isssues. I will keep trying. I need to see what they look like on an android phone, Iphone, windows computer, and mac to see if theres a good way to filter if there is a back camera or not
can you client decide which camera is the correct one? I guess you tell your user something like "hey, please now make of photo of XY" and then the user will use the correct cam on his own, right?
I was thinking since the process works well on mobile, if i can use enumerateDevices and can filter for back cameras if theres a back camera allow the regular process is there and is there is no back camera then disallow image upload
I realize this is only a client side solution as if someone found the api they could still upload an image with they had the right auth cookies, but its better then resizing the screen and being able to upload a stale photo
yea, I guess it would be easier to check the single captured image instead of all devices and their current content
Just need the outputs for enumerateDevices from a few different devices to see if i can find a common theme I can use to filter
@B33fb0n3 sorry I still get cant usb debugging going on my phone
@Patrick MacDonald I may not be able to follow you anymore. Maybe I missing the new problem or similar... maybe it's also solved with one of my message?
@B33fb0n3 can you client decide which camera is the correct one? I guess you tell your user something like "hey, please now make of photo of XY" and then the user will use the correct cam on his own, right?
yes this could work but I need away of filtering the enumerateDevices() and if there is a back camera and there is a clear way of filtering if the user has a backcamera (mobile) then the use would be able to use the process i have now and if there dont have a back camera( its desktop) then dis allow the current process. I just have no way of testing it as I have linux and and android phone( and my usb debugging isnt working on my current system) but I would also have to see the out put for enumerateDevices() on an Iphone, mac computer , and windows computer to confirm) So im at a bit of a stand still.