We Keep Coding

HTML input file capture=camera for multiple files

I'm trying to make a mobile web application (both for IOS and Android) that lets the user upload some pictures, either by choosing them from the library or by taking them with the device camera.
I'm using this input <input type="file" accept="image/*" capture="camera" multiple>. It works great, it opens the camera and it lets me choose to use the photo or to try again, but the multiple attribute doesn't work. I can only take one photo per time.
Am i missing something? Maybe the multiple attribute is not supported?

Just remove,
capture="camera"
then it will open on gallery directly and allow multiple selection.

I think it actually is impossible to take multiple pictures with the camera this way before uploading, and that it's only possible to upload multiples with the file browser.
You will need to use JavaScript and the MediaStream functionality, pretty much writing a quick camera app yourself. It works but there are a few pitfalls with how manufacturers report sensors etc.

React: Capture image in messenger webview

I have a small react app (for mobile only) with image capture tag to click image from camera only (block file picker dialog)
<input type="file" accept="image/*" capture="camera" onChange={this.handleUploadImage} />
I'm using it to capture image from android and ios browsers.
This tag works fine in chrome for android and safari for ios, but when it opens up in facebook messenger's webview then it doesnot open the camera, instead it opens up file picker dialog in android.
So is there any way to open up camera in facebook messenger's webview and block access to file picker dialog?
Any help would be appreciated

From what I can see, you are trying to access camera with input type "file". While it works good in a browser, any webview of an application treats it as a tag for file input/upload.
What you need is to create a module which allows access to camera even in webview, and use that where you want it to. A camera module can be created using getUserMedia() api, also you can checkout webrtc and webkit for this.
Please check the support for getUserMedia() api in different browsers for better understanding. As it dont work in chrome/firefox for ios as of now.
You can also use open source dependencies available, some of which are:
react html 5 camera
react-camera

Camera in phonegap app. restarting the app

I am developing phonegap app. And using camera in it. It was working few days ago. I did many changes in last few days and now camera is not working correctly. It opens camera but when I take photo , then from camera app. when I press OK, it restart app.
I am not understanding how it is doing so. I actually unable to understand whether it can restart from my phonegap app. JS code or it only can be restart from android Java code.
I am using this code for camera:
function takePhoto() {
navigator.camera.getPicture(onCameraPicSuccess, onCameraPicFail, {quality: 50,
destinationType: Camera.DestinationType.FILE_URI
});
function onCameraPicSuccess(imageURI) {
alert("coming here in pic success");
var img = '<div style="padding:4px; margin:10px; border: solid 2px #666;float: left; width:30%"><img src="' + imageURI + '" width="100%" /></div>';
$('#images_area').append(img);
}
function onCameraPicFail(message) {
alert('Failed because: ' + message);
}
So any idea, that why app. will restart on using camera app. through above code? My JS code don't have splash screen but my Java code have that. So after pressing OK button of camera, I can see app. restarted with back button binding and menu button binding not working for a while.
So not sure what is happening. If you guys have any such experience or any idea then feel free to share.
If there is some thing more I need to tell. Then let me know.
After doing some more search on stackoverflow.com, I came to know that issue is of android, as android kill the app. in background if it have less memory. So need to free the memory e.t.c. But what I noticed is that application was working fine when I was using JQuery Mobile Forms. But after I changed it to custom, this camera problem appear. So if this is memory related problem, then why it occured on removing jquery mobile forms and doing custom work. In fact, now application is even more smooth with custom work. So I am confused that whether it is memory related problem or something else? And how to tackle this type of app. developed in phonegap.

The phonegap camera API invokes the camera application when you use
navigator.camera.getPicture
Please read it here - http://docs.phonegap.com/en/edge/cordova_camera_camera.md.html#Camera
This pushes your application into the background and that can lead to your app being killed if there isn't enough memory.
If you don't want your application to go into background while the camera is up, you need to use a foreground camera plugin. Take a look at it here
You might need to change it to suit your requirements.

It can be a memory related problem. You can increase the heap size of your application by setting android:largeHeap="true" in your application manifest file.

You shouldn't need to create a whole custom foreground camera, you just need to specify to the aggressive garbage collector that you want to retrieve the old intent instead of starting a new instance. Try setting a flag on the saved intent within the camera plugin:
intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
See my post here: https://stackoverflow.com/a/29630548/2782404
Furthermore, increasing heap size and using singleTask/singleInstance didn't work for me

In android menifest file set the launchmode of the activity to "singleTask" or
"singleInstance".
May be your appliction launching the activity in multiple time.

see this link, it explains that this does not actually have to do with phonegap, but with the activities of android. He suggests using a plugin called Foreground Camera Plugin.
PhoneGap camera restarts the application

iphone camera access for mobile webpage

For the mobile website of a project I need to add a image-uploading button which does allow the access of the Iphone camera.
For example, the user does have his own profile and wants to add an avatar to that, he should have the possibility to make a photo, which is directly uploading to a database. Ive found some scripts where it is possible to access the photo-gallery, but i want to access the camera, which automatically uploads the picture...
Take a picture and upload
something like that!
Any help is much appreciated,
Greets

If you have iOS 6 or greater you can use the
<input type="file" accept="image/*" capture="camera">

For iOS < 6, you can always implement an image picker yourself and then inject the captured image data into the html as base64 encoded data.
Take the picture, base 64 encode your captured image data, then,
with jQuery, it should be quite simple:
[self.webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:#"$('#imagePlaceholder').attr('src','data:image/png;base64,%#');", base64ImageDataString]];

Camera access and image quality handling in HTML5 mobile webpage

I used input tag with file="type" option to capture photo in my HTML5 mobile webpage. In some devices web page crashes because of memory issue when the photo is captured(Where camera is > 12MP). Is there any way that I can control image resolution/quality while using camera from HTML5?
Current tag:
<input id="ext-element-175" type="file" name="file" accept="image/*" capture="camera">
Is there any alternative other than input tag to access camera from HTML5 page for mobile web app and has more options to have control on camera?

There is no way to specify the desired resolution when using HTML Media Capture to capture an image from the device cameras.
The latest W3C recommendation spec for HTML Media Capture does not require such options.
You can, however, suggest such an addition to the spec, to be considered for a possible next version of the specification, by submitting an issue on GitHub at https://github.com/w3c/html-media-capture/issues. This was suggested to me by Anssi from Intel - one of the spec editors - after contacting him about a similar issue.
From my experience some Android devices do offer a way, at the OS level, to choose the resolution when recording video (accept="video/*"). Such devices might also offer such options when capturing photos.
The current Android device I have access to right now (Lenovo P2) does not offer such OS level options (only flash and switch camera):
That being said your code is not in line with the spec. You should use capture or capture=capture, not capture="camera". See Correct Syntax for HTML Media Capture for more details.

Use <input type="hidden" name="MAX_FILE_SIZE" value="4000000" /> It wont upload if file is bigger than 4mb.