Upload
robert-nyman
View
1.949
Download
1
Embed Size (px)
Citation preview
JavaScript APIs - The Web is the
Platform
pdf.js
Fullscreen
<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>
mozRequestFullScreenWithKeys?
html:-moz-full-screen { background: red;}
html:-webkit-full-screen { background: red;}
<input type="file" id="take-picture" accept="image/*">
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); }};
WebRTC
var liveVideo = document.querySelector("#live-video");navigator.getUserMedia( {video: true}, function (stream) { liveVideo.src = stream; }, function (error) { console.log("An error occurred: " + error); });
Pointer Lock API
var docElm = document.documentElement; // Requesting Pointer LockdocElm.requestPointerLock = elem.requestPointerLock || elem.mozRequestPointerLock || elem.webkitRequestPointerLock; docElm.requestPointerLock();
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);
IndexedDB
// IndexedDBvar indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.OIndexedDB || window.msIndexedDB, IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.OIDBTransaction || window.msIDBTransaction, dbVersion = 1;
// Create/open databasevar request = indexedDB.open("elephantFiles", dbVersion);
createObjectStore = function (dataBase) { // Create an objectStore dataBase.createObjectStore("elephants");}
// Currently only in latest Firefox versionsrequest.onupgradeneeded = function (event) { createObjectStore(event.target.result);};
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();}
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); };};
Battery
// Get battery level in percentagevar batteryLevel = battery.level * 100 + "%";
// Get whether device is charging or notvar chargingStatus = battery.charging;
// Time until the device is fully chargedvar batteryCharged = battery.chargingTime;
// Time until the device is dischargedvar batteryDischarged = battery.dischargingTime;
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);
Boot to Gecko
https://github.com/andreasgal/B2G
https://github.com/andreasgal/gaia
Telephony & SMS
// Telephony objectvar 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 callvar call = tel.dial("123456789");
// Receiving a calltel.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 callcall.hangUp();
// SMS objectvar sms = navigator.mozSMS;
// Send a messagesms.send("123456789", "Hello world!");
// Receive a messagesms.onreceived = function (event) { // Read message console.log(event.message);};
Vibration
(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);})();
WebAPI
Dev tools
Try new things
"So we saved the world together for a while, and that was lovely."
-Lost
Robert [email protected]: @robertnyman
robertnyman.com/speaking/robertnyman.com/html5/robertnyman.com/css3/