2. 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
3. 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
7. WTAI Make Call
<a
href="wtai://wp/mc;16505551234">
Call
us
</a>
<a
href="call.wmls#makeCall()">
Call
us
</a>
//
call.wmls
extern
function
makeCall()
{
WTAPublic.makeCall("16505551234");
}
http://www.wapforum.org/what/technical/wtai-30-apr-98.pdf
8. 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.wmls
extern
function
setupCall()
{
WTACallCont.setup("16505551234",
1);
}
extern
function
acceptCall()
{
WTACallCont.accept("1",
1);
}
9. WTAI Messaging
//
sms.wmls
extern
function
sendMsg()
{
WTANetText.send("16505551234",
"WML
rocks");
}
extern
function
readMsg(i)
{
var
sms
=
WTANetText.read(i);
return
WTANetText.getFieldValue(
sms,
"body"
);
}
10. WTAI Contacts
//
contacts.wmls
extern
function
addFriend(i,
num,
name)
{
WTAPhoneBook.write(i,
num,
name);
}
//
return
structs
of
contact
details
extern
function
getFriendById(i)
{
return
WTAPhoneBook.read("i",
i);
}
extern
function
getFriendByName(name)
{
return
WTAPhoneBook.read("t",
name);
}
11. I may be laboring the point
But that was 1998...
... and you still can’t do any of this with a
contemporary mobile browser
12.
13. BONDI
“enables web based content to access native
device capability, intermediated through a
robust, but flexible security framework”
http://www.omtp.org/1.11
14. Messaging
var
sms
=
bondi.messaging.createSMS({
to:
["16505551234"],
body:
"Home
soon"
});
var
mms
=
bondi.messaging.createMMS({
to:
["16505551234"],
subject:
"I
will
be...",
body:
"...home
soon"
});
15. Messaging
bondi.messaging.sendSMS(
function
()
{},
//
success
function
()
{},
//
error
sms,
true
);
bondi.messaging.sendMMS(
function
()
{},
//
success
function
()
{},
//
error
mms,
true
);
20. On one hand...
• Security-conscious architecture
• Comprehensive API support
• Consistent API patterns
• Conformance specifications
• Reasonable test coverage
http://www.omtp.org/1.11/apis
27. 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/
28. 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
29. 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
33. 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
34. MediaFileData
interface
MediaFileData
{
attribute
DOMString
codecs;
attribute
unsigned
long
bitrate;
attribute
unsigned
long
height;
attribute
unsigned
long
width;
attribute
float
duration;
};
...seems to be under discussion
35. Media capture (gUM)
navigator.getUserMedia(
{
audio:
true,
video:
false
},
function
(stream)
{},
//
success
function
()
{}
//
error
);
//
stream
is
a
LocalMediaStream
Editor's draft, http://dev.w3.org/2011/webrtc/editor/getusermedia.html
36. LocalMediaStream
var
recorder
=
stream.record();
//
recorder
is
a
MediaStreamRecorder
recorder.getRecordedData(
function
(file)
{}
//
success
);
//
file
is
a
File
URL.createObjectURL(stream);
//
a
Blob
URI
for,
say
<video
src='...'
/>
37. Messaging
navigator.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?
Editor's draft, http://dev.w3.org/2009/dap/messaging/
46. 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
47. WebAPI
• Telephony • Embedded browser
• Messaging • Battery
• Contacts • Device Status
• Camera • Settings
• Network • Mouse Lock
• USB • Vibrator
51. USB
var
usb
=
new
MozUSBManager();
usb.addEventListener("attachdevice",
function
()
{}
);
usb.addEventListener("detachdevice",
function
()
{}
);
usb.claimDevice({
deviceClass:
...,
deviceSubClass:
...
});
52.
53. 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
65. I still want...
• Audio processing
• Bluetooth
• RFID & NFC
• Both cameras
• Memory & power
• Native recognition
66. window.addEventListener(
'appointmentdue',
function(appt)
{
if
(device.near(WORK))
{
siri.remind(
contacts.get('Peter'),
calendar.getDetails(appt)
);
}
},
false
);
PS: does not work
67. James Pearce
@jamespearce
http://tripleodeon.com