This document discusses several JavaScript APIs available in modern browsers including fullscreen API, camera API, pointer lock API, IndexedDB, battery status API, vibration API, and developer tools. It provides code examples for how to use these APIs to enable fullscreen mode, access camera and files, track mouse movement, store data in IndexedDB, get battery information, trigger vibrations, and open developer tools.
Report
Share
Report
Share
1 of 56
Download to read offline
More Related Content
JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires
19. 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);
}
};
26. createObjectStore = function (dataBase) {
// Create an objectStore
dataBase.createObjectStore("elephants");
}
// Currently only in latest Firefox versions
request.onupgradeneeded = function (event) {
createObjectStore(event.target.result);
};
27. 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();
}
28. 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);
};
};
31. // 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;
32. 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);
39. // 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");
40. // 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();
41. // SMS object
var sms = navigator.mozSMS;
// Send a message
sms.send("123456789", "Hello world!");
// Recieve a message
sms.onrecieved = function (event) {
// Read message
console.log(event.message);
};