(Mobile) Device APIs James Pearce @jamespearce http://tripleodeon.com
What are Device APIs? “Client-side APIs that enable the development of Web Applications that interact with device hardware” ...and other capabilities outside of the browser’s traditional remit
Why are they important?• They’re not... ...if you’re happy with a web of documents• They are... ... if you want the the web to be competitive with native app platforms
HistoryCurrent Work Use Cases
WTAI Make Call<a href="wtai://wp/mc;16505551234"> Call us</a><a href="call.wmls#makeCall()"> Call us</a>// call.wmlsextern function makeCall() { WTAPublic.makeCall("16505551234");} http://www.wapforum.org/what/technical/wtai-30-apr-98.pdf
WTAI Call Control<a href="calls.wmls#setupCall()">Call us!</a><a href="calls.wmls#acceptCall()">Brring!</a><a href="wtai://cc/sd;1*2*3456">Enter code</a>// calls.wmlsextern function setupCall() { WTACallCont.setup("16505551234", 1);}extern function acceptCall() { WTACallCont.accept("1", 1);}
WTAI Messaging// sms.wmlsextern function sendMsg() { WTANetText.send("16505551234", "WML rocks");}extern function readMsg(i) { var sms = WTANetText.read(i); return WTANetText.getFieldValue( sms, "body" );}
WTAI Contacts// contacts.wmlsextern function addFriend(i, num, name) { WTAPhoneBook.write(i, num, name);}// return structs of contact detailsextern function getFriendById(i) { return WTAPhoneBook.read("i", i);}extern function getFriendByName(name) { return WTAPhoneBook.read("t", name);}
I may be laboring the point But that was 1998... ... and you still can’t do any of this with a contemporary mobile browser
BONDI“enables web based content to access nativedevice capability, intermediated through arobust, but flexible security framework” http://www.omtp.org/1.11
Messagingvar sms = bondi.messaging.createSMS({ to: ["16505551234"], body: "Home soon"});var mms = bondi.messaging.createMMS({ to: ["16505551234"], subject: "I will be...", body: "...home soon"});
Messagingbondi.messaging.sendSMS( function () {}, // success function () {}, // error sms, true);bondi.messaging.sendMMS( function () {}, // success function () {}, // error mms, true);
Messagingbondi.messaging.subscribeToSMS( function () {}, // success function () {}, // error function () { // listener alert("They replied!"); }, { from: "16505551234" // filter }, true // exclusive);
Contactsbondi.pim.contact.getAddressBooks( function(books) { // success var contact = books[0].createContact({ name: James Pearce, emails: [{email:j@tripleodeon.com}], phoneNumbers: [{number:16505551234}] }); }, function () {} // error);
Telephonybondi.telephonyLog.findLogEntries( function () {}, // success function () {}, // error, [ bondi.telephonyLog.MISSED_CALLS_FOLDER, bondi.telephonyLog.RECEIVED_CALLS_FOLDER ], { phoneNumber: "16505551234" }); * Yes, it’s true: you can’t actually make or receive calls
App Launcherbondi.applauncher.launchApplication( function () {}, // success function () {}, // error "tel:16505551234");// mailto:...// sms:...// file:...
On one hand...• Security-conscious architecture• Comprehensive API support• Consistent API patterns• Conformance specifications• Reasonable test coverage http://www.omtp.org/1.11/apis
Device APIs Working Group “to create client-side APIs that enable the development of Web Applications and Web Widgets that interact with devices services such as Calendar, Contacts, Camera, etc” Joint efforts with WebRTC Working Group, WebApps Working Group http://www.w3.org/2009/dap/
W3C Device APIs• Media Capture(HTML) • Vibration• Media Capture(gUM) • Calendar• Contact • Permissions• Messaging • Menu• Battery Status • Gallery• Network Information • System info• Sensor • Media Stream
Media Capture (HTML)<input type="file" accept="image/*" /><!-‐-‐ The accept attribute is a hint. Specification suggests that it can be used to offer alternative picker UIs.-‐-‐> Public working draft, http://www.w3.org/TR/2011/WD-html-media-capture-20110414
Brad Lassey, September 2008
Media Capture (HTML)<input type="file" accept="image/*" capture="camera"/><!-‐-‐ Again, a hint. Valid options are: camera, camcorder, microphone, filesystem-‐-‐>
Media Capture (HTML)<input type="file" accept="image/*" capture="camera" id="photo"/>var photo = document.getElementById(photo);photo.files[0].getFormatData( function (data) {}, // success function () {} // error);// file is a MediaFile, extending File// data is a MediaFileData
MediaFileDatainterface MediaFileData { attribute DOMString codecs; attribute unsigned long bitrate; attribute unsigned long height; attribute unsigned long width; attribute float duration;}; ...seems to be under discussion
Media capture (gUM)navigator.getUserMedia( { audio: true, video: false }, function (stream) {}, // success function () {} // error);// stream is a LocalMediaStream Editors draft, http://dev.w3.org/2011/webrtc/editor/getusermedia.html
LocalMediaStreamvar recorder = stream.record();// recorder is a MediaStreamRecorderrecorder.getRecordedData( function (file) {} // success);// file is a FileURL.createObjectURL(stream);// a Blob URI for, say <video src=... />
Messagingnavigator.sendMessage( "sms:16505551234?" + "body=JavaScript%20says%20hi", [], // attachments as File array function () {}, // success function () {} // error);// also mms: and mailto:// oh... were you looking for receipt? Editors draft, http://dev.w3.org/2009/dap/messaging/
WebAPI “We are aiming at providing all the necessary APIs to build a basic HTML5 phone experience within the next 3-6 months” https://wiki.mozilla.org/WebAPI
USBvar usb = new MozUSBManager();usb.addEventListener("attachdevice", function () {});usb.addEventListener("detachdevice", function () {});usb.claimDevice({ deviceClass: ..., deviceSubClass: ...});
We deserve Device APIs...• As forward-looking as WTAI• As well-structured as BONDI• As comprehensive as WAC• As respectable as W3C DAP• As agile as WebAPI
Contacts & calendaring• Add business details to address book• Web-based messaging• Facial recognition again...• Presence• Context-sensitivity of content
Messaging• Sharing• Notifications• Offline transport fallback• Frictionless web sign-on
Expect more
I still want... • Audio processing • Bluetooth • RFID & NFC • Both cameras • Memory & power • Native recognition
window.addEventListener( appointmentdue, function(appt) { if (device.near(WORK)) { siri.remind( contacts.get(Peter), calendar.getDetails(appt) ); } }, false); PS: does not work
Francesco Iovine
1–1 of 1 previous next