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.
Related
I work developing advanced browser based applications, using technologies like WebGL to create training and simulator tools.
Is it possible for such applications to access and interact with external devices connected to the Windows/Mac? If so what options are there?
A good example is: say we're creating a simulator for a surgical robot which is operated using a special joystick-type control. In a desktop application we could create a controller which has USB (serial port in the old days) and write custom code to interrogate this. But I don't know if browsers have any way to do the same.
In the days of plugins you could write a C++ plugin which acted as a bridge to the browser sandbox but this is not really an option in modern browsers.
What options exist, please? Our target is primarily Chrome though it doesn't have to be.
I am trying to make use of a few visualization libraries for a mobile app I am making (with phonegap).
The libraries are: https://github.com/jsantell/dancer.js and http://www.michaelbromley.co.uk/blog/42/audio-visualization-with-web-audio-canvas-and-the-soundcloud-api
However, they do not seem to work in mobile. Is there a way you could integrate these into an app? Or is the support for some of the tech these make use of now supported yet. I have only tested on iOS.
Thanks.
The problem as for right now is that the Web Audio API is not supported in mobile other than iOS 6+
Check this:
http://caniuse.com/#feat=audio-api
This API is the base for building an audio visualizer.
If you are working with Phonegap you could make part of the application web and the visualizer part native and use ir as a Phonegap plugin. It is justified to do this depending how much % of the application the visualizer is.
You might be able to use the Intel XDK for this. It allows you to make mobile applications using jQuery/JS/HTML5. Assuming you have all the code, it shouldn't be too difficult to port.
HTH.
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/
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.
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/