How to integrate various devices with browser using HTML5? - html

I am working on a POS kind of application and now the requirement is to integrate various devices with the application like camera,Magnetic card reader,Printers etc. Can any one share link that How to use HTML5 to integrate various devices with the application built using HTML5. ?

There is no HTML5 API for cameras, card readers or the other hardware devices you mention. Probably the best option is to create a 'hybrid' application using technologies such as PhoneGap.
PhoneGap executes your HTML5 application within a native wrapper. This allows it to expose hardware functionality to your code via JavaScript API.

Related

Can I deploy an HTML5 game with Xamarin products?

I have an HTML5 game in the works and was wondering if it would make sense to try and use Xamarin products for deploying my app to iOS, Android and Windows Phone.
Do Xamarin products support this?
Would I gain anything from using Xamarin products as a wrapper? Ease of deployment, native API access, etc.
How would performance be for a simple side scrolling 2D platformer?
Xamarin could be used to wrap an HTML game, but I don't think it makes sense. Bear in mind that with Xamarin you would have to rewrite the UI component for each platform, so in your case you'd manually have to render within a UIWebView on iOS, a WebView on Android, and so on for each platform you want to support.
Possibly look into other solutions, such as PhoneGap, which are squarely aimed at wrapping applications written using the HTML stack. These are likely to have solved many of the problems that you would encounter by trying, using Xamarin or otherwise, to make a wrapper yourself.

OpenGL usage on mobile HTML5 games

I have an HTML5 game running in desktop web browsers using WebGL. Obviously HTML5 and jscript can be built out to the mobile platform, but then what happens to the WebGL code?
I assume WebGL doesn't work very well in mobile apps.
Then how do you use OpenGL in mobile HTML5? Is there a jscript binding to OpenGL ES?
Thanks
EDIT: Just to be clear I am talking about native installed mobile apps not browsers. As in using something like PhoneGap
Nicol,
appMobi has integrated WebGL into its iOS and Android native wrappers, giving roughly 10x performance boost for HTML5 canvas drawing. appMobi is similar to PhoneGap, in building a native "wrapper" that your HTML5 lives inside, with a JS API that lets your game access all of the operating system functions. Here's a page describing the acceleration, which we call directCanvas. http://www.appmobi.com/index.php?q=content/directcanvas-accelerates-html5-game-performance
Hope this is helpful!
Roy
I assume WebGL doesn't work very well in mobile apps.
What does you make think this? WebGL has been based on OpenGL-ES 2.0, which is the OpenGL-ES profile supported by most mobile devices out there. So WebGL maps nicely to mobile devices' GPU capabilities. It's more a question of browser suppport, than performance.

What are the advantages and disadvantages of building a tablet / smartphone app in html 5?

I wrote a kids' storybook/picture book which I want to get made into an app for iPad, iPhone, and other tablets and smartphones.
I don't know much on the tech side of this.
I heard that it could be a good idea to create the app in html 5 and then 'wrap' it for each different device, rather than creating the app as a native app for each different device.
Are there any disadvantages to doing it this way?
I guess the main advantage of doing it this way, is that it's more efficient to build the app for lots of devices, but are there any other advantages?
Advantages:
"Write once and run anywere " is the main advantage of writing your mobile/table app using HTML5.
Build your app with open web standards to run on many platforms (e.g. Flash is a bad idea and even Adobe started supporting HTML5 in mobile devices over flash)
You can easily find developers with HTML, CSS, Javascript knowledge or you may already have.
Disdvantages:
Performance - Native application wins over HTML5 applications in this. But you don't need native performance for all applications. So its a disadvantage only in some cases.
Look and feel - Native look and feel is better than HTML5 app in some cases.
You may check phonegap, senchatouch, titanium.
If you want to make money on your app it can be harder with an html5 app. The infrastructure like app store/marketplace/android market is not as good for html5 apps.

Does Sencha Touch, or any other HTML5 javascript framework, allow access to a mobile phone's media library for uploading video to a server?

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.

Can HTML5 access NFC chips on mobile phones

I'm not too familiar with HTML5 so does anyone know if HTML5 will be able to access NFC chips built into mobile devices? Or, can someone suggest another way to do this using some other method? My goal is to produce a cross platform HTML5 web app that can access NFC functionality on NFC equipped phones. I have looked into mobile frameworks like PhoneGap but although they have NFC on their roadmap, they do not have any timelines nor implementation details to offer.
Thanks.
NFC access via some proprietary framework may be possible, but I don't think it's currently built into the HTML 5 spec itself.
PhoneGap uses HTML5 for the main UI of the mobile application, and then takes specific code that you write (javascript API I think), which is then translated into native code for each of the mobile devices it is ported to. So, one option you have is building your main UI in HTML5, and then displaying that in a WebView or equivalent inside a native application, then accessing NFC specific features via the native application and passing it to your webapp via a dynamic URL like http://mysampleapp.com/NFC/somestringofdatafromthenfcthatiwillparsetouseinmyhtml5app
If you are using Phonegap 3.0 and the Cordova CLI you can easily integrate RFID reading capabilities through NFC by using Chariot Solutions Phonegap NFC plugin from Github and following the steps laid out by Øystein Heimark/Dogu in the referenced blog post.
Github: Github repository
Blog:
ADDING RFID CAPABILITIES TO YOUR ANDROID PHONEGAP APPLICATION