In my web app (not native app) for mobiles, I want to take a photo and upload it, but I don't want to use Adobe Flash. Is there any way to do this?
In iPhone iOS6 and from Android ICS onwards, HTML5 has the following tag which allows you to take pictures from your device:
<input type="file" accept="image/*" capture="camera">
Capture can take values like camera, camcorder and audio.
I think this tag will definitely not work in iOS5, not sure about it.
Just to update this, the standard now is:
<input type="file" name="image" accept="image/*" capture="environment">
to access the environment-facing (rear) camera, and
<input type="file" name="image" accept="image/*" capture="user">
for user-facing (front) camera. To access video, substitute "video" for "image" in name.
Tested on iPhone 5c, running iOS 10.3.3, firmware 760, works fine.
https://www.w3.org/TR/html-media-capture/
Nowadays at least with android it's relatively easy. Just use normal file input tag and when user clicks it the phone will ask if user wants to use camera (or file managers etc..) to upload a file. Just take a photo with the camera and it will automatically be added and uploaded.
No idea about iphone. Maybe someone can enlighten on that.
EDIT: Iphone works similarly.
Sample of the input tag:
<input type="file" accept="image/*" capture="camera">
Safari & Chrome on iOS 6+ and Android 2.2+ support HTML Media Capture which allows you to take pictures with your device's camera or select an existing one:
<input type="file" accept="image/*">
Here's how it works on iOS 10:
Android 3.0+ and Safari on iOS10.3+ also support the capture attribute which is used to jump straight to the camera.
<input type="file" accept="image/*" capture>
capture="camera" (String) and accept="image/*;capture=camera" (Parameter) were part of old specs and were replaced by capture (Boolean) the W3C Candidate Recommendation.
Support documentation: this 2013 O'Reilly book and my testing
well, there's a new HTML5 features for accessing the native device camera - "getUserMedia API"
NOTE: HTML5 can handle photo capture from a web page on Android devices (at least on the latest versions, run by the Honeycomb OS; but it can’t handle it on iPhones but iOS 6 ).
You can use WEBRTC but unfortunately it is not supported by all web browsers. BELOW IS THE LINK TO SHOW WHICH BROWSERS supports it
http://caniuse.com/stream
And this link gives you an idea of how you can access it(sample code).
http://www.html5rocks.com/en/tutorials/getusermedia/intro/
AppMobi HTML5 SDK once promised access to native device functionality - including the camera - from an HTML5-based app, but is no longer Google-owned. Instead, try the HTML5-based answers in this post.
You'll want to use getUserMedia to access the camera.
This tutorial outlines the basics of accessing a device camera from the browser: https://medium.com/#aBenjamin765/make-a-camera-web-app-tutorial-part-1-ec284af8dddf
Note: This works on most Android devices, and in iOS in Safari only.
It should be noted that security features have been implemented which require either the app to be ran locally under localhost, or through SSL for GetUserMedia() to work.
I discovered this when trying several of the demos available and was dissapointed when they didn't work! See: New Security Restrictions
I don't think you can - there is a W3C draft API to get audio or video, but there is no implementation yet on any of the major mobile OSs.
Second best The only option is to go with Dennis' suggestion to use PhoneGap. This will mean you need to create a native app and add it to the mobile app store/marketplace.
I don't know of any way to access a mobile phone's camera from the web browser without some additional mechanism (i.e. Flash or some type of container that allows access to the hardware API)
For the latter have a look at PhoneGap: http://docs.phonegap.com/phonegap_camera_camera.md.html
With this you should be able to access the camera at least on iOS and Android-based devices.
Related
After upgraded to ionic 5 I am not able to provide multiple file types in the accept attribute.
It worked in browser but it is not working in android devices.
<input accept="image/*,video/*" name="file" type="file", id="file" [(ngModel)]="model.file">
The above code is not working properly it actually allows to pick the image file alone. Which means, it supports only the first MIME type in an accept attribute.
That is not a good way to upload file. it is for browser based application. Ionic has a plugin for this I have mentioned URL below. you should go with this.
Android : https://ionicframework.com/docs/native/file-chooser
iOS : https://ionicframework.com/docs/native/file-picker
A good alternative that worked for me was to use the Camera plugin, this will allow you to pick an image from the media library, so it always be an image or video or take a picture from the camera
https://capacitorjs.com/docs/apis/camera
I am planning to build a JavaScript/HTML5 app, and wrap it with phonegap to be installed on an android tablet.
In it, I want to show a video file.
Is it just a matter of creating an index.html file, and putting a mymov.ogv file in the same directory, and then using:
<video src="mymov.ogv"...>
and it will work on Android?
I have read about some problems with this, but my quest got me confused.
What are the caveats, if any?
PS: the video should be packaged within phonegap, such that the video is shown when the app is not connected to wifi. So it's a local file.
PPS: Since it's for internal use, I am able to choose a particular modern android version (if that makes any difference). There is no need to support old android versions whatsoever.
According to this resource: http://caniuse.com/ogv There is not support for ogv format in Android. Remember that Phonegap applications are just display in a rapped browser window-- So if the browser doesn't support it, you can't use it. Whether the video is on-board the device or streamed, doesn't matter.
You can certainly embed with the tag, but you might want to use the associated Javascript API to provide some control over the video.
I have a website requirement , users can able to record video (with sound) and upload to server.
First i think about flash and red5(media server) but found that flash does not support IPAD or iphone.
Now am think about HTML5 video recording, but somebody told me that html5 video recording still in beta and not stable and it does not support all browsers.
Please advice which is best , help is highly appreciable.
Thanks,
To upload a video from an iPhone to a web server, you can use an <input> tag. This will prompt the user to record a video which will then be selected as the file to upload.
<input autocomplete="off" type="file" name="video_file" accept="video/*" capture />
Wrap this in and you can change the appearance of the tag to look more like a video recording button.
There's simply no way as of now to do video recording through mobile browser. Potential solution is
Direct mobile browser user to appstore/google play and encourage to download a dedicated app (downside - you have to write it ;)
Allow for file upload from mobile device (user uploads prerecorded video). File uploads are supported from IOS6 only. Not sure about Android.
Use flash where possible (a challenge in itself).
Hint: would I accept such requirement as a contractor/agency etc? Nooo! Never ;)
Is there a way to detect whether a browser supports the HTML5 Media Capture API for a mobile website I'm building? I can only seem to find solutions for detecting getUserMedia() support.
I would like to be able to present mobile users one of two scenarios:
User's browser supports the API, so two upload buttons are displayed, one activating the camera and one activating the image gallery.
User's browser doesn't support the API, so just one upload buttons is displayed, hopefully activating the gallery if their browser supports the accept parameter.
User's browser supports the API, so two upload buttons are displayed, one activating the camera and one activating the image gallery.
There's no way (at the moment) to create 2 separate HTML buttons: one for (just) the library & one for (just) the camera (
I've covered all the possible HTML Media Capture options in this article)
Use
<input type="file" accept="image/*;"> and you'll be prompted to choose between capturing a photo or selecting an existing one:
User's browser doesn't support the API, so just one upload buttons is displayed, hopefully activating the gallery if their browser supports the accept parameter
Support is as follows:
Android 2.2+ and iOS6.0+ support the above code
Android 3.0+ supports capture and takes the user straight to the camera
iOS6 through 10 do NOT support capture (prompt is always shown)
desktop browsers do NOT support HTML Media Capture
Detecting support resumes to detecting the above browsers.
Support reference: this 2013 O'Reilly book and my testing
You can use modernizr, on the docs page you can see in the table of features supported and detected that they detect both the HTML Media Capture and also the getUserMedia
I am looking at building an app that can take a video from a person's media library on their mobile phone and upload it to my servers. As far as I can tell, I'd have to build an application for each type of mobile device I want to include. But if new HTML5 protocols let me upload video files through the browser (and can handle the file size), this would be a preferred method.
Web apps don't have access to the media library on a phone. Use phonegap to get access to the users photos - http://docs.phonegap.com/phonegap_media_capture_capture.md.html
Considering you are using iOS and running the WebApp in iOS' MobileSafari, you have NO access to any system related components, libraries or anything (so no Photos, Videos etc).
And Safari itself does not support file upload. You can add the tag but it will always remain as if had disabled="disabled" attribute.
The only way to access these components is by using a Native code or, like Joel said, PhoneGap since it gives the html pages, access to Native API's through it's JS Framework.
For Android, i have no idea but probably not.