Accessing Mobile camera and microphone - javascript

I am going to develop a general application for mobile which will be used for video chatting.Therefore I need to access mobile camera and mic. Is there any functionality in javascript or jQuery by which I will be able to do that.
Note: as it is a general function, so it should be able to access the camera of any mobile device.

You can use PhoneGap functionality which uses JavaScript, it's platform independent. You can use the method navigator.device.capture.captureVideo of PhoneGap.

There is WebRTC.
But today, even if it aims at being the standard, it doesn't work on all browsers.
I don't think you'll find a standard (non flash or plugin based) and ready library enabling you to use the camera.

For a solution that actually just "works" and allows you to utilize the device's hardware properly, you'll need to code for native apps specific to the platform you're targeting. (ex. -> iOS, Android, etc.)

Related

Can I use javascript to record voice on a web app?

It seems I can only use Flash or Java to record voice on a web app. Is there a way of doing it via JavaScript?
It can be done but the solution won't work across all platforms at the moment.
<input type="file" accept="audio/*;capture=microphone">
See HTML5 Media Capture
Currently Supported By:
Android 3.0 browser, Chrome for Android (0.16), Firefox Mobile 10.0, iOS6 Safari and Chrome (partial support)
Links:
http://www.html5rocks.com/en/tutorials/getusermedia/intro/
Audio capturing with HTML5
Javascript cannot access your hardware directly. What you need, is a client side technology that can. Flash, for one.
Javascript can communicate quite easily with flash, so you can hide your flash recorder and construct your recorder ui with html/js/css.
Here's one example: https://github.com/jwagener/recorder.js/blob/master/examples/example-1.html
Here's another one:
http://blogupstairs.com/flashwavrecorder-javascript-flash-audio-recorder/
I realize this is not EXACTLY what you need, but you didn't tell why you want a JS solution. This doesn't fix the flash dependency problem but it solves the UI problem since you can construct the UI without flash.
Another wellknow solution is WAMI, I know it's not pure javascript but maybe it can help.
"As of this writing, most browsers still do not support WebRTC's getUserMedia(), which promises to give web developers microphone access via Javascript. This project achieves the next best thing for browsers that support Flash. Using the WAMI recorder, you can collect audio on your server without installing any proprietary media server software."
https://code.google.com/p/wami-recorder/
Another example using node.js
This example application is written in JavaScript and uses Node and Express for the web server and framework. You will need all three installed on your web server in order for this to work, as well as the Node.js WebAPI Library.
nodejs voice recording example
Yes there is a pure HTML/JavaScript way but it only works in Firefox and Chrome:
http://audior.ec/blog/recording-mp3-using-only-html5-and-javascript-recordmp3-js/
Direct demo: http://audior.ec/recordmp3js/

Can an HTML5/javascript Android app access the camera/voice recorder?

I'm thinking of getting into Android app development and I hear HTML5 apps are becoming more popular now. Can HTML5 + javascript be used to access media inputs on the phone, or is this only available to Java apps?
Thanks
Frameworks like Phonegap make this possible by providing a wrapper around the api of each device it supports, which can be called from your html5 application built using it. Check their site here or their api documentation for the camera api here.
In pure HTML5/JS, you can't.
But, you can use fameworks like Phonegap that provides JS libraries allowing you to access to the device capabilities such as GPS, camera, etc.

Which javascript framework should i choose if I'm making one site for both medium Desktop PC and mobile phone?

Which javascript framework is most compatible with mobile phones and desktop both?
javascript disabled user of desktop are very low but mobile phone users are high and i heard not all javascript functions work in mobile phones.
See this question (Available iPhone Web Application JavaScript UI Library/Frameworks) for some ideas. Several answers refer to JQTouch (a jQuery plugin), which implies that jQuery may work for you.
there is no js-framework that works on all mobile phones:
if your target is iphone, jqtouch does offer nice iphone-specific stuff on top of jquery
if you want to reach iphone and android (and possibly some other high-end handsets) you could try xui, which is a jquery-like lightweight js-framework (by one of the phonegap-guys)
if your goal is to work on as many phones as possible, you might want to consider building the core of you site/app in standard html and progressively enhancing it with javascript for those
hope this helps,
frank
PhoneGap is an open source development tool for building fast, easy mobile apps with JavaScript.
PhoneGap
Another option you can go for:
baseJS
As for desktop, you know you can use any jquery, prototype, etc
You may want to start with looking at this to get an idea what is supported on the phones you want to support.
http://www.quirksmode.org/m/table.html
On mobile phones you are going to be most concerned with download size, unless you are only targeting phones with a 3G connection, so you may want to write your own framework that is geared toward what you want, specifically.
You will want to write your phone page to work without javascript, then, if there is javascript, then you may want to have it d/l your new framework, so the basic thing that is downloaded is just a bootstrap javascript file that can d/l the real javascript file that will be used.
Your bootstrap file can look at what is available, and if, for example, onfocus is available on a div element then it is probably a desktop, so you d/l the versions that use jquery and d/l the jquery files themselves.

Is there access to the iPhone accelerometer using Javascript?

I'm starting to try and do some web based game programming for my iPhone, and other web enabled phones that my friends have, and was having a hard time finding information on accessing the accelerometer using Javascript in the browser.
With the latest release, I know I've got access to location information now but I was hoping that I could make use of the accelerometer for some of the games I plan on making.
Alternately, is this also possible with the Android phones?
In the latest iOS update (4.2) the accelorometer is now accessible from Javascript.
See: http://www.mobilexweb.com/blog/safari-ios-accelerometer-websockets-html5
iOS 4.2 provides Accelerometer & Gyroscope support through the DeviceOrientation API.
DeviceMotionEvent class
reference
DeviceOrientationEvent class
reference
Here a working javascript snippet.
If your are using iOS 4.2 or more, then you can do it: http://www.albertosarullo.com/blog/javascript-accelerometer-demo-source
jharlap is correct, however I'd be curious to know if this would work on the Palm Pre. Native development on the Pre is done using html and JavaScript, however there are special JavaScript APIs to access the phone's features that I believe only work for locally stored apps. I wonder if these are available through the browser. I doubt it, but it would be interesting.
Checkout PhoneGap project. It provides API to access the accelerometer and the GPS location from javascript.
"Regular" javascript cannot access the accelerometer info, it can access the geolocation using the W3C geolocation API supported by iPhone OS 3.0.
Yet, a project (e.g. PhoneGap) can be used to build a bridge between javascript and Objective-C capabilities to expose that functionality. This works if you want to deploy the app as a standalone application, that simply has one WebKit which loads the html content from the server.
I haven't played with their framework, but they provide templates for the iPhone and Android projects and you can work on developing your javascript game which would work almost-out-of-the-box on iPhone and Android. I cannot comment on the performance and the user experience though.

Accessing location information on iPhone from web application

Is there any way for a web application to access the location data of an iPhone without the installation of an additional iPhone client app?
If not, the next best thing would be if any can recommend an existing native app, preferably free to the end user and as lightweight as possible, that does expose this information to Mobile Safari.
Yes, in iPhone OS 3.0.
You can do that using the HTML5 Geolocation API.
I don't think this is possible. MobileSafari does not expose this information.
There is not. At the very least you will have to implement your own UIWebView based application, read the location from CLLocationManager and inject it into the WebView.
A good starting point is the iPhone-google-maps-component. it...
... uses a UIWebView in the background to load the HTML/Javascript version of Google Maps, and offers a set of Objective-C methods that mimic a subset of the original Javascript methods for controlling the map. It currently supports setting the center location, and zooming & panning using the touch interface
For jailbroken phones Locatable is exactly what you describe, it is available on cydia and very simple to integrate server-side.
PhoneGap takes an interesting approach, providing a native wrapper that allows Javascript access to hardware features. It's not exactly the answer to my question, but it is interesting in its own right, and it may end up getting the job done.
You can see a simple example of using the GeoLocation API in a web app to get your current location in the following URL: http://mrvautin.com/2010/01/06/iphone-web-application-get-current-location/

Categories