Summary
On iOS Safari, the camera opens as a fullscreen video instead of within the app, which is not the desired user experience (issue #147).
Initial research suggests that it's unlikely to directly fix this issue. That said, there's an alternate way to handle the camera on iOS that's arguably superior to our current implementation.
The following input tag, <input type="file" accept="image/*" capture="camera">, creates a button that opens the native camera to upload images. The below images demonstrate the user flow.
https://i.imgur.com/OeOPGeX.png
https://i.imgur.com/zoZVqHj.png
https://i.imgur.com/burVJgj.png
https://i.imgur.com/XLxG2PJ.png
If we restyle the input button to a "take a photo" button and add an event listener to submit the image on select, we'll have a camera that works reasonably well on iOS. Best of all, this does not require camera permissions.
Objectives
Mockups
- See above images for user flow example. Final implementation would of course look different (which we don't have mockups for since this issue was submitted after the original Trash Panda team disbanded).
Summary
On iOS Safari, the camera opens as a fullscreen video instead of within the app, which is not the desired user experience (issue #147).
Initial research suggests that it's unlikely to directly fix this issue. That said, there's an alternate way to handle the camera on iOS that's arguably superior to our current implementation.
The following input tag,
<input type="file" accept="image/*" capture="camera">, creates a button that opens the native camera to upload images. The below images demonstrate the user flow.https://i.imgur.com/OeOPGeX.png
https://i.imgur.com/zoZVqHj.png
https://i.imgur.com/burVJgj.png
https://i.imgur.com/XLxG2PJ.png
If we restyle the input button to a "take a photo" button and add an event listener to submit the image on select, we'll have a camera that works reasonably well on iOS. Best of all, this does not require camera permissions.
Objectives
Mockups