1. JavaScript APIs -
The Web is the
Platform

6. @robertnyman

10. pdf.js

11. Fullscreen

14. <button id="view-fullscreen">Fullscreen</button>
<script type="text/javascript">
(function () {
var viewFullScreen = document.getElementById("view-fullscreen");
if (viewFullScreen) {
viewFullScreen.addEventListener("click", function () {
var docElm = document.documentElement;
if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
}, false);
}
})();
</script>

15. mozRequestFullScreenWithKeys?

16. html:-moz-full-screen {
background: red;
}
html:-webkit-full-screen {
background: red;
}

17. Camera

19. <input type="file" id="take-picture" accept="image/*">

20. takePicture.onchange = function (event) {
// Get a reference to the taken picture or chosen file
var files = event.target.files,
file;
if (files && files.length > 0) {
file = files[0];
// Get window.URL object
var URL = window.URL || window.webkitURL;
// Create ObjectURL
var imgURL = URL.createObjectURL(file);
// Set img src to ObjectURL
showPicture.src = imgURL;
// Revoke ObjectURL
URL.revokeObjectURL(imgURL);
}
};

21. WebRTC

22. var liveVideo = document.querySelector("#live-video");
navigator.getUserMedia(
{video: true},
function (stream) {
liveVideo.src = stream;
},
function (error) {
console.log("An error occurred: " + error);
}
);

23. Pointer Lock API

24. var docElm = document.documentElement;
// Requesting Pointer Lock
docElm.requestPointerLock = elem.requestPointerLock ||
elem.mozRequestPointerLock ||
elem.webkitRequestPointerLock;
docElm.requestPointerLock();

25. document.addEventListener("mousemove", function(e) {
var movementX = e.movementX ||
e.mozMovementX ||
e.webkitMovementX ||
0,
movementY = e.movementY ||
e.mozMovementY ||
e.webkitMovementY ||
0;
// Print the mouse movement delta values
console.log("movementX=" + movementX, "movementY="
+ movementY);
}, false);

27. IndexedDB

28. // IndexedDB
var indexedDB = window.indexedDB || window.webkitIndexedDB ||
window.mozIndexedDB || window.OIndexedDB || window.msIndexedDB,
IDBTransaction = window.IDBTransaction ||
window.webkitIDBTransaction || window.OIDBTransaction ||
window.msIDBTransaction,
dbVersion = 1;
// Create/open database
var request = indexedDB.open("elephantFiles", dbVersion);

29. createObjectStore = function (dataBase) {
// Create an objectStore
dataBase.createObjectStore("elephants");
}
// Currently only in latest Firefox versions
request.onupgradeneeded = function (event) {
createObjectStore(event.target.result);
};

30. request.onsuccess = function (event) {
// Create XHR
var xhr = new XMLHttpRequest(),
blob;
xhr.open("GET", "elephant.png", true);
// Set the responseType to blob
xhr.responseType = "blob";
xhr.addEventListener("load", function () {
if (xhr.status === 200) {
// Blob as response
blob = xhr.response;
// Put the received blob into IndexedDB
putElephantInDb(blob);
}
}, false);
// Send XHR
xhr.send();
}

31. putElephantInDb = function (blob) {
// Open a transaction to the database
var transaction = db.transaction(["elephants"], IDBTransaction.READ_WRITE);
// Put the blob into the dabase
var put = transaction.objectStore("elephants").put(blob, "image");
// Retrieve the file that was just stored
transaction.objectStore("elephants").get("image").onsuccess = function (event) {
var imgFile = event.target.result;
// Get window.URL object
var URL = window.URL || window.webkitURL;
// Create and revoke ObjectURL
var imgURL = URL.createObjectURL(imgFile);
// Set img src to ObjectURL
var imgElephant = document.getElementById("elephant");
imgElephant.setAttribute("src", imgURL);
// Revoking ObjectURL
URL.revokeObjectURL(imgURL);
};
};

32. Battery

34. // Get battery level in percentage
var batteryLevel = battery.level * 100 + "%";
// Get whether device is charging or not
var chargingStatus = battery.charging;
// Time until the device is fully charged
var batteryCharged = battery.chargingTime;
// Time until the device is discharged
var batteryDischarged = battery.dischargingTime;

35. battery.addEventLister("levelchange", function () {
// Device's battery level changed
}, false);
battery.addEventListener("chargingchange", function () {
// Device got plugged in to power, or unplugged
}, false);
battery.addEventListener("chargingtimechange", function () {
// Device's charging time changed
}, false);
battery.addEventListener("dischargingtimechange", function () {
// Device's discharging time changed
}, false);

36. Boot to Gecko

39. https://github.com/andreasgal/B2G
https://github.com/andreasgal/gaia

41. Telephony & SMS

42. // Telephony object
var tel = navigator.mozTelephony;
// Check if the phone is muted (read/write property)
console.log(tel.muted);
// Check if the speaker is enabled (read/write property)
console.log(tel.speakerEnabled);
// Place a call
var call = tel.dial("123456789");

43. // Receiving a call
tel.onincoming = function (event) {
var incomingCall = event.call;
// Get the number of the incoming call
console.log(incomingCall.number);
// Answer the call
incomingCall.answer();
};
// Disconnect a call
call.hangUp();

44. // SMS object
var sms = navigator.mozSMS;
// Send a message
sms.send("123456789", "Hello world!");
// Receive a message
sms.onreceived = function (event) {
// Read message
console.log(event.message);
};

45. Vibration

46. (function () {
document.querySelector("#vibrate-one-second").addEventListener("click",
function () {
navigator.mozVibrate(1000);
}, false);
document.querySelector("#vibrate-twice").addEventListener("click",
function () {
navigator.mozVibrate([200, 100, 200, 100]);
}, false);
document.querySelector("#vibrate-long-time").addEventListener("click",
function () {
navigator.mozVibrate(5000);
}, false);
document.querySelector("#vibrate-off").addEventListener("click",
function () {
navigator.mozVibrate(0);
}, false);
})();

47. WebAPI

48. Dev tools

52. Try new things

59. "So we saved the world
together for a while,
and that was lovely."
-Lost

60. Robert Nyman
robertnyman.com/speaking/ robnyman@mozilla.com
robertnyman.com/html5/ Twitter: @robertnyman
robertnyman.com/css3/