Camera access and image quality handling in HTML5 mobile webpage - javascript

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.

Related

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

HMTL5/JavaScript Remove Option to use photo from photo album IOS/Android

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?

How can I default to front-facing camera when using strictly the HTML5 input field with video on iOS and Android?

When using the <input type="file" accept="video/*" capture="camcorder"> tag in a web page on a mobile browser, Mobile Safari & Chrome on Android correctly prompt to take or upload video.
This is unrelated to getUserMedia, which doesn't work on Safari on iOS anyhow. See more about the current state of video capture in a mobile browser here: https://plus.google.com/+ThomasQuintana/posts/SuFgtvCyQxv
Is there a way to default the Take Video popup action in iOS or Android to the front-facing camera?
You cannot default the action sheet to record from the front-facing camera by default.
On iOS, this would require the use of the constant UIImagePickerControllerCameraDeviceFront somewhere when initializing the UIImagePickerController. Since this constant does not appear anywhere in the WebKit codebase, it must be unsupported.

Pop camera or video capture options from Android HTML5 based app used with Cordova

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.

Categories