Accessing device hardware
Types
- Camera
- Accelerometer
- Phone calls and text messages
- Geolocation
- Device motion
- Vibration
- Ambient light
Types
HTML/CSS3: getUserMedia
Trick for accessing the camera
Types
HTML/CSS3: getUserMedia
3 types of parameters:
constraints – This should be an object that specifies which media streams you would like to access. For example, to get both video and audio you would use: { video: true, audio: true }
successCallback – A function that will be called if the media stream is successfully loaded. The function will be passed a LocalMediaStream object.
errorCallback (optional) – A function that will be called if the media stream cannot be loaded.
Types
HTML/CSS3: getUserMedia
What about Safari?
<input type="file" accept="image/*" capture="camera"> <input type="file" accept="video/*" capture="camera">
Demo with camera
Types
Javascript API's
- Geolocation: supported in most major browsers
- Device Orientation: IE11 plus all major browser
- Media Capture:
- Vibration: Not supported in IE or Safari
- Ambient Light: Only supported by firefox
Types
PhoneGap Plugins:
Flashlight Demo
FORMS WITH jQuery Mobile
From scratch or using Dreamweaver
About
- Use Ajax: Allows for faster processing
- Form elements are part of the theme
- Certain form elements are unique to jQuery mobile including sliders and toggles
- You can opt out of the jQuery UI style by adding the attribute data-role="none" to the form element
- Form will not be styled, not be responsive and certain elements like toggles may not work correctly until you add styling to them.
- Form elements must have unique ID's
- Same HTML Form rules apply (must be wrapped in a form tag, have a label, use GET, POST for submission)
- http://demos.jquerymobile.com/1.4.3/forms/