Javascript and phone camera [duplicate] - javascript

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

How to access device(both mobile and pc) camera from a web app?

I want something like this, that works both in mobile and pc.
<input type="file" accept="image/*" capture="camera">
It presently doesn't allow me to capture image in pc.
I know I can use getUserMedia(), but I don't want to stream video and also write a lot of js code.

Samsung Smart TV Javascript Application with AF2.0

I have created an application for my Samsung TV 2011 (Maple 6.0).
It is a Javascript Web App that does not depend on anything other than jquery, I handle navigation and remote key events myself with my own functions; I use in combination with TVKeyValue.js and Widget.js.
Now I am trying to play video. On the emulators up to 2013 (The oldest emulator available it seems) it works fine with video.js. It looks like it is not supported in the Maple.
However, I could get video to work if I include the Samsung Apps Framework:
I could get the video to play, however I need to add the Scene folders and app.json in order for the app to run. Then I could play my video. The problem is that it breaks the standard javascript code. JSON is not defined, html data attributes do not work.
So my question is, how can I maintain my application as a javascript webapp, while still being able to play video via the 2011 tv running maple?
HTML4 is whats supported so video tags do not work, and flash it says plugin required. So there does not seem to be any video solutions for non AF samsung apps.
On Samsung devices is better solution then video tag using SEF player
http://www.samsungdforum.com/Guide/?FolderName=API00005&FileName=Player_29.html
(Player item)

Access mobile microphone with navigator.getUserMedia (Javascript)

building an open source app, and I released the desktop version (dmeowmixer.github.io/voicetrainer) but when I load it in mobile (my phone uses android browser) and click the button to prompt for access to users microphone input it alerts that navigator.getUserMedia isn't supported. I read somewhere that it was supported in previous version of android browser but I'm not too sure. Could someone shed some light on if this will be possible to do in mobile without making a completely new application?
https://github.com/Dmeowmixer/voiceTrainer link to repo
Firstly make sure that your android browser is supporting getusermedia. You could use the link below to check it out. http://caniuse.com/#feat=stream. If it is not supported on a browser, i don't think you can do much about it.
Check The stream provided works differently in different browsers answer to make sure you are doing the right thing how to make getUserMedia() work on all browsers if it is supportd by it!

Record voice from IPhone using HTML5

I have been working on a mobile web application just for my own enjoyment and research. Everything seemed to be working pretty slick with HTML5/CSS and JavaScript for the client application, although it looks like I need a third party technology for voice recording. I had a pretty good solution working with Flash, but after testing it with my IPhone, I had remembered that they don't seem to support flash which is disappointing because I had a pretty good solution going. I want to record voice using HTML5 in Iphone and android. Is there any way?
You could try HTML Media Capture. An article on dev.opera says:
Android OS 3.0 was the first platform to provide HTML Media Capture
support, via its default Android Webkit browser. Now HTML Media
Capture is also supported by:
Safari and Chrome Mobile for iOS 6+
Chrome Mobile for Android OS 3+
Firefox Mobile for Android OS 3+
Opera 16 for Android OS 3+
Nonetheless some of them only partially implement the specification or
implement an older W3C specification, that makes the code above
slightly different:
<input type="file" accept="image/*" capture="camera">
<input type="file" accept="video/*" capture="camcorder">
<input type="file" accept="audio/*" capture="microphone">
It links out to a demo page which you could try on your mobile. I also found this example page. In my quick iOS 7 testing though, it only worked correctly for photos and videos.
Edit: Further reading suggests accept="audio/*" isn't actually supported on iOS 6 and 7, only accept="image/*" and accept="video/*".
Update: A quick test on iOS 8.3 suggests nothing has changed here: accept="image/*" and accept="video/*" are supported, but accept="audio/*" is not.
Update: A quick test on iOS 10.0.2 suggests accept="audio/*" is still not supported, although it looks like you might be able to upload an audio file from iCloud Drive or Dropbox now.
Update: Despite what it says in the Webkit blog post, there still seems to be no support for accept="audio/*" in iOS 10.3 on my iPhone 5S.
Update: Same story in iOS 11.0.3. There still seems to be no support for accept="audio/*" on my iPhone 5S.
Update: Still the same in iOS 12.4.3. There seems to be no support for accept="audio/*" on my iPhone 5S.
This will not work on a website, but if you want to rework your web-app into a mobile app using Cordova this will let you use the microphone input. Takes some knowledge of web audio api to get working.
https://github.com/edimuj/cordova-plugin-audioinput
And RecorderJS to record its output:
https://github.com/mattdiamond/Recorderjs
Someone above mentioned RecorderJS not working on mobile but it does, it's just the mic input that doesn't work.
There is not currently any way I'm aware of to record mic input in a browser on mobile
You can use HTML5 WebAudio API.
Introduction to audio and video capturing Capture audio & video in HTML5
Nice Library to record audio with samples Recorder.js
On webkit-browsers i.e.Chrome and Safari in iOS you can use the get user media api with webkitGetUserMedia.
Details can be found here :
html5rocks

Is there a way to capture images from Webcam?

Is there a way to capture images from a webcam with JavaScript?
Nope - think of the security implications!
It is possible with Flash, but the user will see a popup requesting access to their webcam.
If the webcam had a web interface, then in theory it would be possible to just slap an image tag into a page somewhere and point it directly at the cam's snapshot interface:
<img src="http://address.of.webcam.example.com/webcam/capture" />
But otherwise, no. Standard Javascript has no API for accessing a webcam. There's no
var wc = new WebCam();
img = wc.capture();
type calls you can do.
The situation has changed from when this question was originally posted. The getUserMedia API was introduced to allow things like capturing webcam images. You can find tutorials and plugins demonstrating it.
But MDN now says the Navigator.getUserMedia API is deprecated in favour of the experimental API MediaDevices.getUserMedia. The getUserMedia tutorials and plugins don't work on iOS devices - they just don't support it.
The answer at the moment seems to be that there is an HTML API for it, but browser support is patchy and the API is possibly on its way out. You can only use it in Firefox and IE Edge, and in Chrome only from an https domain.
I would like to revive this question and ask if anyone knows of any web API that will successfully capture webcam images in all major browsers and devices.

Categories