search

codeforpdx / PASS

PASS project - with HMIS module integration
MIT License
28 stars 25 forks source link

Issue 335/device camera uploads #357

Closed leekahung closed 1 year ago

leekahung commented 1 year ago

This PR implements image capture from mobile devices and refactors UploadDocumentModal with a new UploadButtonGroup sub component.

Had previously experimented with MediaDevice API, but the HTML input approach appears much simpler and are used for this purpose. Currently, only devices with screen widths smaller than 768px has this functionality.

Had tested this implementation on a fork to see if implementation works for mobile devices (see fork below).

https://github.com/codeforpdx/PASS/assets/14917816/ea934ddf-27d2-48bc-ba34-ac3cbc455b85

Note the styling was unaltered for the second button, I simply wanted to check if the implementation works. For styling, it looks like the following with the second button now utilizing Capture image for its wording:

Screen Shot 2023-08-01 at 0 13 59 (2)

The first button still opens up a file explorer.

xscottxbrownx commented 1 year ago

I'll dig into the code in a little, but love the look and idea of this. I also like that it still pulls up an "image selection" if you click the capture image on a larger device - BUT it would be real ideal if it could use the laptop camera (if one existed.)

leekahung commented 1 year ago

I'll dig into the code in a little, but love the look and idea of this. I also like that it still pulls up an "image selection" if you click the capture image on a larger device - BUT it would be real ideal if it could use the laptop camera (if one existed.)

Yeah, I did try out the idea with <input> and capture but it doesn't seem to work on desktop. It always seem to end up opening the file explorer.

The only way I manage to make the desktop camera working is if I were to use the MediaDevice API and getUserMedia. But at that point, it would seem like we would need to create a local GUI for the camera on PASS.