Few HTML 5 APIs you didn't know existed. Fullscreen API, WebSockets, WebRTC, Web Workers, History API, Link Prefetch, and other wonderful APIs

1. Few HTML5 APIs You Didn’t Know ExistedFew HTML5 APIs You Didn’t Know Existed

2. Few HTML5 APIs You Didn’t Know Existed
Fullscreen API
getUserMedia API
Battery API
Link Prefetch
MathML element
WebSockets
WebRTC
IndexedDB
WebGL
Web Workers
History API
The contentEditable Attribute
Pointer Lock API
Online and offline events
Using geolocation
New background styling
Detecting device orientation
The awesome Fullscreen API allows developers
to programmatically launch the browser
into fullscreen mode, pending user approval:
// Find the right method, call on correct element
function launchFullScreen(element) {
if(element.requestFullScreen) {
element.requestFullScreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}
}
// Launch fullscreen for browsers that support it!
launchFullScreen(document.documentElement);
// the whole page
launchFullScreen(document.getElementById("videoE
lement")); // any individual element

3. Few HTML5 APIs You Didn’t Know Existed
Fullscreen API
getUserMedia API
Battery API
Link Prefetch
MathML element
WebSockets
WebRTC
IndexedDB
WebGL
Web Workers
History API
The contentEditable Attribute
Pointer Lock API
Online and offline events
Using geolocation
New background styling
Detecting device orientation
The getUserMedia API is incredibly interesting; this
API provides access to device media, like your
MacBook's camera! Using this API, the <video> tag,
and canvas, you can take beautiful photos within your
browser!
var video = document.getElementById("video");
// Put video listeners into place
if(navigator.getUserMedia) { // Standard
navigator.getUserMedia({video: “true”},
function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-
prefixed
navigator.webkitGetUserMedia(videoObj,
function(stream){
video.src =
window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}

4. Few HTML5 APIs You Didn’t Know Existed
Fullscreen API
getUserMedia API
Battery API
Link Prefetch
MathML element
WebSockets
WebRTC
IndexedDB
WebGL
Web Workers
History API
The contentEditable Attribute
Pointer Lock API
Online and offline events
Using geolocation
New background styling
Detecting device orientation
This simple API provides you information about the
battery's current charge level, its charging status, and
allows you to be notified of changes via a few events.
Let's check it out!
navigator.getBattery().then(function(result) {
console.log(result);
// result:
BatteryManagery {
charging: false,
chargingTime: Infinity,
dischargingTime: 8940,
level: 0.59,
onchargingchange: null,
onchargingtimechange: null,
ondischargingtimechange: null,
onlevelchange: null
}
});

5. Few HTML5 APIs You Didn’t Know Existed
Fullscreen API
getUserMedia API
Battery API
Link Prefetch
MathML element
WebSockets
WebRTC
IndexedDB
WebGL
Web Workers
History API
The contentEditable Attribute
Pointer Lock API
Online and offline events
Using geolocation
New background styling
Detecting device orientation
Firefox introduces a new strategy for website
optimization: link prefetching.
Link prefetching is a browser mechanism, which
utilizes browser idle time to download or prefetch
documents that the user might visit in the near future. A
web page provides a set of prefetching hints to the
browser, and after the browser is finished loading the
page, it begins silently prefetching specified documents
and stores them in its cache. When the user visits one
of the prefetched documents, it can be served up
quickly out of the browser's cache
<!-- full page -->
<link rel="prefetch"
href="http://burnigroads.ro/race.php" />
<!-- just an image -->
<link rel="prefetch"
href="http://burningroads.ro/imagenec/cars/logan.png
" />

6. Few HTML5 APIs You Didn’t Know Existed
Fullscreen API
getUserMedia API
Battery API
Link Prefetch
MathML element
WebSockets
WebRTC
IndexedDB
WebGL
Web Workers
History API
The contentEditable Attribute
Pointer Lock API
Online and offline events
Using geolocation
New background styling
Detecting device orientation
Mathematical Markup Language (MathML) is an dialect
of XML for describing mathematical notation and
capturing both its structure and content. Here you'll find
links to documentation, examples, and tools to help
you work with this powerful technology
Use:
<math><msub><msup>...

7. Few HTML5 APIs You Didn’t Know Existed
Fullscreen API
getUserMedia API
Battery API
Link Prefetch
MathML element
WebSockets
WebRTC
IndexedDB
WebGL
Web Workers
History API
The contentEditable Attribute
Pointer Lock API
Online and offline events
Using geolocation
New background styling
Detecting device orientation
WebSockets is an advanced technology that makes it
possible to open an interactive communication session
between the user's browser and a server. With this
API, you can send messages to a server and receive
event-driven responses without having to poll the
server for a reply.
WebSocket WebSocket(
in DOMString url,
in optional DOMString protocols
);
void close(in optional unsigned long code, in optional
DOMString reason);
void send(in DOMString data);

8. Few HTML5 APIs You Didn’t Know Existed
Fullscreen API
getUserMedia API
Battery API
Link Prefetch
MathML element
WebSockets
WebRTC
IndexedDB
WebGL
Web Workers
History API
The contentEditable Attribute
Pointer Lock API
Online and offline events
Using geolocation
New background styling
Detecting device orientation
WebRTC (where RTC stands for Real-Time
Communications) is a technology that enables
audio/video streaming and data sharing between
browser clients (peers). As a set of standards,
WebRTC provides any browser with the ability to share
application data and perform teleconferencing peer to
peer, without the need to install plug-ins or third-party
software

9. Few HTML5 APIs You Didn’t Know Existed
Fullscreen API
getUserMedia API
Battery API
Link Prefetch
MathML element
WebSockets
WebRTC
IndexedDB
WebGL
Web Workers
History API
The contentEditable Attribute
Pointer Lock API
Online and offline events
Using geolocation
New background styling
Detecting device orientation
IndexedDB is a low-level API for client-side storage of
significant amounts of structured data, including
files/blobs. This API uses indexes to enable high
performance searches of this data. While DOM
Storage is useful for storing smaller amounts of data, it
is less useful for storing larger amounts of structured
data. IndexedDB provides a solution.
// Let us open our database
var request =
window.indexedDB.open("MyTestDatabase", 3);
request.onsuccess = function(event) {
db = event.target.result;
// Create an objectStore for this database
var objectStore = db.createObjectStore("name",
{ keyPath: "myKey" });
};

10. Few HTML5 APIs You Didn’t Know Existed
Fullscreen API
getUserMedia API
Battery API
Link Prefetch
MathML element
WebSockets
WebRTC
IndexedDB
WebGL
Web Workers
History API
The contentEditable Attribute
Pointer Lock API
Online and offline events
Using geolocation
New background styling
Detecting device orientation
WebGL (Web Graphics Library) is a JavaScript API for
rendering interactive 3D and 2D graphics within any
compatible web browser without the use of plug-ins.
WebGL does so by introducing an API that closely
conforms to OpenGL ES 2.0 that can be used in
HTML5 <canvas> elements.
var gl; // A global variable for the WebGL context
function start() {
var canvas =
document.getElementById("glcanvas");
// Initialize the GL context
gl = initWebGL(canvas);
if (gl) {
// Set clear color to black, fully opaque
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// Enable depth testing
gl.enable(gl.DEPTH_TEST);
// Near things obscure far things
gl.depthFunc(gl.LEQUAL);
// Clear the color as well as the depth buffer.
gl.clear(gl.COLOR_BUFFER_BIT |
gl.DEPTH_BUFFER_BIT);
}
}

11. Few HTML5 APIs You Didn’t Know Existed
Fullscreen API
getUserMedia API
Battery API
Link Prefetch
MathML element
WebSockets
WebRTC
IndexedDB
WebGL
Web Workers
History API
The contentEditable Attribute
Pointer Lock API
Online and offline events
Using geolocation
New background styling
Detecting device orientation
In HTML5 any element can be editable. Using some
JavaScript event handlers you can transform your web
page into a full and fast rich-text editor. This article
provides some information about this functionality.
<!DOCTYPE html>
<html>
<body>
<div contentEditable="true">
This text can be edited by the user.
</div>
</body>
</html>

12. Few HTML5 APIs You Didn’t Know Existed
Fullscreen API
getUserMedia API
Battery API
Link Prefetch
MathML element
WebSockets
WebRTC
IndexedDB
WebGL
Web Workers
History API
The contentEditable Attribute
Pointer Lock API
Online and offline events
Using geolocation
New background styling
Detecting device orientation
Web Workers provide a simple means for web content
to run scripts in background threads. The worker
thread can perform tasks without interfering with the
user interface. In addition, they can perform I/O using
XMLHttpRequest (although the responseXML and
channel attributes are always null). Once created, a
worker can send messages to the JavaScript code that
created it by posting messages to an event handler
specified by that code (and vice versa.)
var myWorker = new Worker("worker.js");
x.onchange = function() {
myWorker.postMessage([first.value,second.value]);
console.log('Message posted to worker');
}
myWorker.onmessage = function(e) {
result.textContent = e.data;
console.log('Message received from worker');
}

13. Few HTML5 APIs You Didn’t Know Existed
Fullscreen API
getUserMedia API
Battery API
Link Prefetch
MathML element
WebSockets
WebRTC
IndexedDB
WebGL
Web Workers
History API
The contentEditable Attribute
Pointer Lock API
Online and offline events
Using geolocation
New background styling
Detecting device orientation
The DOM window object provides access to the
browser's history through the history object. It exposes
useful methods and properties that let you move back
and forth through the user's history, as well as --
starting with HTML5 -- manipulate the contents of the
history stack.
window.history.back();
window.history.forward();
var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");

14. Few HTML5 APIs You Didn’t Know Existed
Fullscreen API
getUserMedia API
Battery API
Link Prefetch
MathML element
WebSockets
WebRTC
IndexedDB
WebGL
Web Workers
History API
The contentEditable Attribute
Pointer Lock API
Online and offline events
Using geolocation
New background styling
Detecting device orientation
In order to build a good offline-capable web application,
you need to know when your application is actually
offline. Incidentally, you also need to know when your
application has returned to an 'online' status again.
You need to know when the user comes back online,
so that you can re-synchronize with the server.
You need to know when the user is offline, so that you
can be sure to queue your server requests for a later
time.
function updateOnlineStatus(event) {
var condition = navigator.onLine ? "online" :
"offline";
status.className = condition;
status.innerHTML = condition.toUpperCase();
log.insertAdjacentHTML("beforeend", "Event: " +
event.type + "; Status: " + condition);
}
window.addEventListener('online',
updateOnlineStatus);

15. Few HTML5 APIs You Didn’t Know Existed
Fullscreen API
getUserMedia API
Battery API
Link Prefetch
MathML element
WebSockets
WebRTC
IndexedDB
WebGL
Web Workers
History API
The contentEditable Attribute
Pointer Lock API
Online and offline events
Using geolocation
New background styling
Detecting device orientation
The Pointer Lock API (formerly called Mouse Lock API)
provides input methods based on the movement of the
mouse over time (i.e., deltas), not just the absolute
position of the mouse cursor in the viewport. It gives
you access to raw mouse movement, locks the target
of mouse events to a single element, eliminates limits
on how far mouse movement can go in a single
direction, and removes the cursor from view.
canvas.requestPointerLock =
canvas.requestPointerLock ||
canvas.mozRequestPointerLock;
canvas.requestPointerLock()
if(document.pointerLockElement === canvas ||
document.mozPointerLockElement === canvas) {
console.log('The pointer lock status is now
locked');
} else {
console.log('The pointer lock status is now
unlocked');
}

16. Few HTML5 APIs You Didn’t Know Existed
Fullscreen API
getUserMedia API
Battery API
Link Prefetch
MathML element
WebSockets
WebRTC
IndexedDB
WebGL
Web Workers
History API
The contentEditable Attribute
Pointer Lock API
Online and offline events
Using geolocation
New background styling
Detecting device orientation
The geolocation API allows the user to provide their
location to web applications if they so desire. For
privacy reasons, the user is asked for permission to
report location information.
if ("geolocation" in navigator) {
/* geolocation is available */
} else {
/* geolocation IS NOT available */
}
navigator.geolocation.getCurrentPosition(function(po
sition) {
do_something(position.coords.latitude,
position.coords.longitude);
});
var watchID =
navigator.geolocation.watchPosition(function(position
) {
do_something(position.coords.latitude,
position.coords.longitude);
});

17. Few HTML5 APIs You Didn’t Know Existed
Fullscreen API
getUserMedia API
Battery API
Link Prefetch
MathML element
WebSockets
WebRTC
IndexedDB
WebGL
Web Workers
History API
The contentEditable Attribute
Pointer Lock API
Online and offline events
Using geolocation
New background styling
Detecting device orientation
It is now possible to put a shadow to a box, using box-
shadow and multiple backgrounds can be set.
.multi_bg_example {
width: 100%;
height: 400px;
background-image:
url(https://mdn.mozillademos.org/files/11305/firefox.p
ng),
url(https://mdn.mozillademos.org/files/11307/bubbles
.png), linear-gradient(to right, rgba(30, 75, 115, 1),
rgba(255, 255, 255, 0));
background-repeat: no-repeat, no-repeat, no-
repeat;
background-position: bottom right, left, right;
background: -moz-linear-gradient(to right, rgba(30,
75, 115, 1), rgba(255, 255, 255, 0)), -webkit-
gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255,
255, 0)), -ms-linear-gradient(to right, rgba(30, 75,
115, 1), rgba(255, 255, 255, 0)), linear-gradient(to
right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
}

18. Few HTML5 APIs You Didn’t Know Existed
Fullscreen API
getUserMedia API
Battery API
Link Prefetch
MathML element
WebSockets
WebRTC
IndexedDB
WebGL
Web Workers
History API
The contentEditable Attribute
Pointer Lock API
Online and offline events
Using geolocation
New background styling
Detecting device orientation
Increasingly, web-enabled devices are capable of
determining their orientation; that is, they can report
data indicating changes to their orientation with relation
to the pull of gravity. In particular, hand-held devices
such as mobile phones can use this information to
automatically rotate the display to remain upright,
presenting a wide-screen view of the web content
when the device is rotated so that its width is greater
than its height.
window.addEventListener("deviceorientation",
handleOrientation, true);
function handleOrientation(event) {
var absolute = event.absolute;
var alpha = event.alpha;
var beta = event.beta;
var gamma = event.gamma;
// Do stuff with the new orientation data
}

19. Few HTML5 APIs You Didn’t Know ExistedFew HTML5 APIs You Didn’t Know Existed
Dragos Ionita
Software Engineer
https://ro.linkedin.com/in/dragos-ionita-8ab20756
Thanks for watching!Thanks for watching!