Want to include a camera in my application. The last time I asked this question was back in 2012 and I'm assuming a lot has changed since.
In the past I hacked together WebRTC to work but as the browser versions get updated my hacks break, no fun to debug! What is the solution ?
My application is using AngularJS framework which is dated but seems very stable.
Found one packaged control for AngularJS at: GitHub but not at all clear if it is being maintained or if there is not a simpler way to do this in native HTML5 these days. Here is an example: Developers.Google.Com
The ideal control would allow camera front or rear facing photos to be captured. It might also have a feature to select photo from local storage. I'm assuming if editing or markup to the photo is required it would be done before uploading in native camera.
Any suggestions ?
You can do all of that with just the File upload element. Just specify the appropriate media type and you'll get options to either take a picture or select one. The experience isn't the same on each phone, but last I checked both Android and iOS have a decent experience for this.
You can try this out yourself.
Go to the Web Connection Image Upload Carousel example at:
https://west-wind.com/wconnect
with your phone. On an iPhone when you use 'Take a picture' it'll bring up the regular camera app which includes normal and selfie views - take the picture, it asks if you want to keep it and then uses it.
This works and is kind of the base behavior you'd expect. But you have no control over what that exactly looks like as the experience is provided by the phone's OS.
+++ Rick ---
Uppy.io/examples/dashboard/ responds with " Please allow access to your camera" and after going through Google threads on the topic, I give up!
Windows 10, Chrome 79, Edge 44, IE 11 (all dead for me!)
Oh, your Web Connect examples work perfectly in my iPhone running Chrome. I don't have access to an Android at the moment so I can't comment.
Do you think this is an industry hint to switch form factors? I already have HDMI to iPhone or USB-C adapters... lol
Any camera access through the Browser require that access permissions dialog unless you have given permission to that site to always access your camera.
There's no way around that. The only alternative to that is to use a native application.
+++ Rick ---
It prompts me, I allow and still does not work.
All of the Google posts talk about going to Settings > Advanced > Privacy > Site Settings > (Camera and Microphone) and Allow both for uppy.io:443 are listed.
Any suggestions where to look for additional permissions?
Time to reboot... what else!
This is post restarting, no change!
There is a camera control at David Walsh website that works perfectly. This is the original camera I started with three or four years ago. Although my implementation of it is broken today for unknown reasons, I wonder if it could be causing a conflict with Uppy. I'm reaching here since both are JavaScript based on WebRTC. But if I was to guess at why one works and the other does not, I would venture to say it has to do with some initializing issue when Media Selection occurs.
I posted a message on Github Uppy but have not heard anything back. Since I seem to be the only one having the problem, I assume I'm screwed... 😦
OH.. PS after rebooting I'm not running Chrome 80.
I don't know what WebRTC has to do with anything.
The camera support is native to the browser and uploading and downloading is also built into the browser. Using Uppy is really optional and it provides for some helpers to make it easier uniformly bring up the prompt for the camera or device picker UI. But it's not needed.
Unless you're dealing with many large files, I've been just using the regular file picker to select and upload files - as long as you use image media types it will show the right UI on any modern phone.
AFAIK WebRTC also requires you to give permission to access the camera - same as the file picking APIs. If you don't see that it's just because you already gave permissions to the domain previously.
+++ Rick ---
Just to be clear here's what I get on my phone with a regular photo upload when I go to this Web Connection Sample (try it with your phone):
Initial Click:
Take a Photo (switched to selfie mode):
😄
There's nothing that has to be done to make this work - this is the native image capture experience on iOS. It might look a little different on older phones but it'll have those same options.
The biggest problems with these image uploads is that from a phone these uploads are huge so they're not incredibly fast to upload. That second image when I tried it was well over 4megs in size. The images are unoptimized and at very large resolution, so whatever you receive on the other you need to resize down to something reasonable and optimize the shit out of them. I do this with pingo.exe which is a great command line tool to massively compress images with minimal image loss (it's actually quite amazing). I use it here on the message board for the shit people upload by first resizing any really large images and then running it through pingo. The resized and packed down image stored on the server is around 80k by comparison.
+++ Rick ---
That photo is a keeper! lol
I am convinced there is something going on with Windows that is preventing my camera from working. Also just as weird, it is occurs on two of my machines but not on Melanie's. The "normal" access options are set correctly so it must be something like SnagIt is getting in the way. I just have to keep trying more and more settings...
I have tried the Uppy example site in Safari, IE11, Chrome 79 and now 80, as well as FireFox. They all fail Uppy and your demo but work at the WebRTC demo site.
One posting also suggested testing to see if the builtin Win10 camera app was working. It does so it is not that either.
OK, more lost yet! Just returned to your site and the rear camera is working after all sorts of attempts to fix. By now I removed both cameras and reinstalled them along with checking for the most up to date drivers.
But Uppy.io example still not working! This shit is flaky at best! 😦
Notice the camera control does not allow me to switch from front to rear view. This must still be something with the browser detecting my cameras. This machine is a Surface Pro so it's really not at all out of date. lol
(Dam it took a lot of tries to upload two photos to this message. On second photo keep getting error uploading an existing file. Only after I changed the photo from PNG to JPG did your system allow me to include two images.) Bug for another day...
The reason your phone doesn't switch is because you're on some ancient version of iOS most likely. You can see in my screen shot that i can switch the camera.
I realize it'll have to work with most phones but I think that if that button to switch the view isn't there in the standard dialog it likely won't be available for other non-native solutions either.
I guess you could always require a minimum version of each mobile OS to force the issue (just like apps do these days).
The dupe filename issue is likely that your phone is uploading the image, you stopped and started again. The original upload uses the filename the client sends to store the image temporarily and likely the first upload (or one of the uploads) was still running when you sent the same image/stream again. IOW the file is still locked from the previous upload in progress.
+++ Rick ---