I am writing a mobile application using PhoneGap that accesses the camera on the mobile device, when a user clicks the button to take a picture the option to use the camera appears, along with the option to use an image from an album already on the device. for security purposes, I would like to disallow this feature of uploading an image from an album. How would I go about doing this. Currently I have:
<input id="files" name="files[]" type="file" multiple/>
which when clicked on an IOS or Android device prompts the user to select to either take an image or upload from an album. How can I modify this so that only the camera is selectable?
Thanks in advance.
You could try using the capture attribute documented: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input
Or, you would have to use a custom camera control instead of the standard input control. Not all platforms will support the capture attribute, as you can see here: HTML file input control with capture and accept attributes works wrong?
Related
I am using a file type input. It should accept only images file formats. So I added the following input tag -
<input type="file" accept="image/*" multiple (change)="selectFiles($event)" />
This works as expected on desktop i.e. It shows only these files on file browser. But on android devices it prompts the user to select either file browser or camera. Since we need images only from storage how can we disable the camera option.
But is there any way to disable the camera option on mobile devices? I am looking for something opposite to capture="camera".
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.
I'm using HTML5 capture in my application. The html page works fine and directly captures image using camera when i use following tag and store the HTML file in my mobile directly.
<input type="file" name="file" accept="image/*" capture>
But when i use the same code in my published version of website the pop up shows multiple options to upload the image file as shown below
I just want image to be directly uploaded from camera and restrict users to upload file from other locations. Please help.
I have an android app I developed using the cordova framework using HTML5 for the interface. I have a form with a file input tag used to grab photos or videos from the device. In the Ios version, clicking this button pops a dialogue where you can select to capture a pic or video, which is then used by the app.
However, in the android version, the file browser dialogue pops with no options to capture direct. This is my problem. I want to be able to have the pic and video capture options displayed.
I subsequently use uploadifive to send some text and the selected media(video or pic) to a server.
When I do this from the web version of this form, using the android browser, both video and picture capture options appear and work great.
In the app I have tried using the capture options in the file input tag as follows:
<input type="file" name="image" id="image" accept="image/*; capture=camera" />
But this is not working either.
You will have to use cordova's capture event for camera to work. Check cordova documentation.
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.