I want to implement a HTML file input to let the user shoot a picture or a video. I define the allowed formats via accept attribute:
<input type="file" id="sentFile" accept="image/*,video/*">
If I click on the input, iOS 9 shows me a modal, where I'm able to "Record picture or video". After clicking on that button, the camera app opens and I'm able to take a picture, but can't record a video.
If I define a single input with video only, f.e.:
<input type="file" id="sentFile" accept="video/*">
I'm able to record a video.
Why is the first one not working on iOS?
try this
accept="image/*;video/*;capture=camcorder"
Have you set the Privacy - Camera Usage Description in your ios application?
You need to add that permission if you want to take a photo in your application.
Related
I have a web application with an upload form.
<input type="file" name="c_files[]" id="c_files" multiple="multiple" />
I can select and upload mutliple files from the gallery but can't make multiple photos from the camera app. Taking the photos first and then uploading them from the gallery is not a good way to go.
I'm using Google Chrome Version 92.0.4515.159 on Android 11.
Firefox for Android and Safari on iOS isn't working either.
Apparently I have to use javascript right or is their an exisiting work around?
There is no such thing as "Out of the Box" that will solve your problem or your scenario, and the truth is that not HTML have at least one way to get there.
But... we have javascript I can think of something that is not exactly what you are looking for but it would be the way to perform this feat:
detect that you are on a mobile device.
allow that if you are on a mobile device when you click on the file field, you directly invoke the camera APP and take multiple photos.
when returning to the form detect the event and make the programmatic trigger of the multiple input type file, but directly open the image gallery...
select multiple images to attach.
As you can see, this is a concept/solution based on the capabilities that we know the mobile environment and the javascript language have. regardless of HTML.
To achieve this you must get each point mentioned above to work.
I am trying to create an application where a user can click on a button to take a photo or video. Here is my input tag.
<input type="file" name="inp_file" id="inp_file"
accept="image/.jpg,video/quicktime,video/mp4"
capture="environment"
class="form-control input-lg"
onchange="sendFile()" />
When the user clicks on a button, the button does some input validation and runs this piece of code if everything checks out $('#inp_file').click();.
When testing the site with an iPod, the iPod only allows the user to use the video. Is there a way for the user to switch between taking a video or photo? Or do I have to create separate input tags for each photo and video?
Using HTML 5 it is now possible to use video capture on an input like so:
<input type="file" accept="video/*" capture="camcorder"/>
The OS of the mobile device drops into the recorder immediately and allows video capture.
The problem is, on most mobile devices it doesn't give you an option to use an existing video file.
However, I'm looking for a way to give the user a choice: Either Capture New Video or Upload an Existing Video.
I believe one solution would be to make 2 inputs (one for live capture and the other for a file upload) and then prompt the user for which one they desire.
My question is:
Is there additional information I can put on a SINGLE input that will allow the user (or tell the OS device) to allow capture or allow upload?
Something that might look like this:
<input type="file" accept="video/*" capture="camcorder;fileupload"/>
The above code is not functional just what I might believe to be a future solution.
It seems silly that most mobile OS's don't allow the user to select an existing file, since the end result is generally the same: The user is selecting a file on the system to upload.
they need to improve INPUT with better attributes....
if your on https you can do it in code....
You gain access to camera with the users permission....
Yet its open to anything.<--wrong way
The best way is by Input with good attributes no permission needed with code.
The Input provides the way to grant or not grant by the action at hand by the user...
Access to mic feed input... a bowser dialog
Camera take picture input jpg with size and quality...
Its the user doing it not your code.....
I have a input type=file and I want when user click on it to show only valid actions for documents. I don't want pictures or videos.
My file tag is:
<input type="file" name="file" accept=".doc,.docx,.pdf,.txt,.odt,.wps"/>
With this configuration when user click on it on ios safari will display a menu with:
Take a Photo or Video
Photo Library
iCloud
More
and on Android devices will show something like this:
Camera
Camcorder
Documents
Voice Recorder
other, depends what's installed on device.
What I want is to have on iOS only the options iCloud and More and on Android only Documents or other where you can find documents. I want to exclude to take a picture/video or to choose from photo library.
Is this possible?
No. You can dictate what kind of document you're willing to accept, but you cannot dictate what the file upload box actually looks like on a particular browser/OS.
Clearly it would be sensible for the browser not to show "Camera" or "Take a Photo" when the photo produced in that manner wouldn't ultimately be accepted, but that level of intelligence just isn't baked in... yet.
Hello I need to access mobile camera using html by a button click, by searching for it on google and stackoverflow I have got some html input tag examples like below. But here what I need is, I have a custom button, when I click on the button I should be able to access my camera but below is a input tag and Im not able to add it to my button. So someone please help me how to do that.
Thanks a lot.
<input type="file" capture="camera" accept="image/*" id="cameraInput" name="cameraInput">
If you want access to the native camera of an mobile device you can use the cordova camera plugin:
cordova camera API
You can open the camera by calling the getPicture() function.
camera.getPicture(successCallback, errorCallback, options)