Cam API - how to use getusermedia ()?

Hello,
I´m playing around for a solution to capture a still picture (selfie) from the cam device. I read a lot about getusermedia(), but to be honest, I didn´t understand it. I found some nice demos and explanations here http://stackoverflow.com/questions/21015847/how-to-make-getusermedia-work-on-all-browsers and although the demo http://www.simpl.info/getusermedia/ runs fine on my PC I can´t get it run unde AppBuilder.
So David, do you have a idea or hint on also a third party product how to realize this?
Thanks in advance
Walter

Hello Walter,

The problem is "getUserMedia" it's not very well supported at this time. In particular Internet Explorer doesn't support "getUserMedia", and for that cause you cannot go working in App Builder, because they use Internet Explorer for their debugger.

I investigate about this in the past and the problem is to choice the right API in order to provide a way to "make a photo", for example, in almost all platforms. The problem of course is this "perfect API" doesn't exists at this time.

A possible solution is to use the Phonegap Camera plugin, however, if we use this in some control or action in App Builder, there is the first time that a control or action can works ONLY in certain platforms, and not in all.

Even when this can represent a problem, probably we need to take this solution until a pure Javascript API are supported by all the mobile and desktop browsers, but, until this plugin can be easily used from App Builder, what we can do?

I am updated App Builder right now to enhance the File input control in order to allow us to use the Capture attribute and the Accept attribute. Then I add the Capture, the Accept and also I add a new Url variable to the Input control.

The Capture attribute is not perfect because they do not work at this time in all platforms, but in the Android version of the Chrome browser, for example, they allow us to take a photo in a very similar way than the Phonegap Camera plugin, even better.

I add a new app sample named "ImagePick" that show how to use these new variables, for example, how to use the new Url variable in order to show the user selected (or taken) image into an Image control.

So until the Phonegap Camera plugin can be integrated in App Builder, take a look at the refered sample, Walter, because probably this can work more or less that you wanted. If you have Phonegap installed (I hope yes) try to compile an try this sample.

In fact I can't try the sample in my Android device, because, my specific Android version doesn't allow Input files at all... a controversial change in Android 4.4.2 that the community report as a bug and apparently Google fix in later Android versions...

Welcome to the world of cross browser and cross platforms development! :)

David, thanks a lot. Now I have to test and work a lot :-)
Walter

Hello,

Always thanks you Walter. Please, before anything, try with the added "ImagePick" sample. It's my intention, however, to prepare a non visual control to work with the Phonegap plugin. They don't work in browsers, of course, but works in almost all supported Phonegap platforms, including Android.

Hello,

One more thing. Maybe the File input it's not all good in all situations, I talking about the design of our apps. If the input is placed along with other inputs in a "form" like, probably the File input is good. But if we wanted to ask the user for a picture (or photo) maybe this input appareance it's not perfect.

A possible way to solve this can be the use of a "label" HTML tag refered to the File input. Once doing this we simply can hide the File input control, and, when the "label" HTML element is clicked, the file picker dialog or photo dialog or camera appear like expected. I add a new sample "ImagePick2" that show this trick.