Academy PRO: HTML5 API multimedia

HTML5 API
multimedia
binary-studio.com

Navigator
object
Info about browser

Modernizr
(на правах рекламы)
https://modernizr.com/docs
Just cool thing to check
API availability

Plan
Browser
1. visibilityChan
ge
2. pointerLock
3. fullScreen API
4. Drag & Drop
5. Notification
API
6. GamePad
Mobile
1. Vibration API
2. Battery status
API
3. Bluetooth API
4. Device
orientation
API
5. Motion sensors
6. Ambient light
API
Common
1. Web audio API
2. Geolocation
API
3. Navigation
timing API
4. Web speech API
5. Capturing
audio and
video

Benefits
The API is particularly useful for saving resources by giving developers the opportunity to not
perform unnecessary tasks when the webpage is not visible.

Properties
document.visibilityState – "visible", "hidden" or"prerender"
document.hidden – true or false.
https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API

Academy PRO: HTML5 API multimedia

Benefits
It is persistent: Pointer lock does not release the mouse until an explicit API call is made or the user
uses a specific release gesture.
It is not limited by browser or screen boundaries.
It continues to send events regardless of mouse button state.
It hides the cursor.

Properties
document.addEventListener('pointerlockchange', function(e){}
element.requestPointerLock();
document.exitPointerLock();
document.pointerLockElement
http://html5.by/blog/pointer-lock-api/

Properties
2 methods: requestFullScreen and cancelFullScreen
2 object document: fullscreenElement and fullscreenEnabled
1 event fullscreenchange

Drag & Drop actions
dragstart
drag
dragenter
dragleave
dragover
drop

Data transfer
dataTransfer.effectAllowed
dataTransfer.dropEffect
e.dataTransfer.setDragImage(img element, x, y)

Example
Drag&Dog
http://codepen.io/anon/pen/eZBPgg

Permission request
Notification.requestPermission( newMessage );
function newMessage(permission) {
if( permission != "granted" ) return false;
var notify = new Notification("Thanks for letting notify you");
};
https://habrahabr.ru/post/183630/

Notification
var mailNotification = new Notification("Bogdan Rusinka", {
tag : "ache-mail",
body : "Привет, высылаю материалы по проекту...",
icon : "https://www.royalcanin.com/~/media/Royal-Canin/Product-Categories/dog-maxi-landing-
hero.ashx"
});

Gamepad object
var gamepads = navigator.getGamepads();
GamepadList {0: Gamepad, 1: Gamepad, 2: undefined, 3: undefined}

Gamepad object
axes: Array[4]
buttons: Array[16]
connected: true
id: "Xbox 360 Controller (XInput STANDARD GAMEPAD)"
index: 0
mapping: "standard"
timestamp: 12

Gamepad API events
window.addEventListener("gamepadconnected", function(e) {
// Gamepad connected
console.log("Gamepad connected", e.gamepad);
});
window.addEventListener("gamepaddisconnected", function(e) {
// Gamepad disconnected
console.log("Gamepad disconnected", e.gamepad);
});
https://www.smashingmagazine.com/2015/11/gamepad-api-in-web-games/

window.addEventListener("gamepadbuttondown", function(e){
// Button down
console.log(
"Button down",
e.button, // Index of button in buttons array
e.gamepad
);
});
window.addEventListener("gamepadbuttonup", function(e){
// Button up
console.log(
"Button up",
e.button, // Index of button in buttons array
e.gamepad
);
});

Axis move
window.addEventListener("gamepadaxismove", function(e){
// Axis move
console.log(
"Axes move",
e.axis, // Index of axis in axes array
e.value,
e.gamepad
);
});

Only one method
window.navigator.vibrate(1000);
window.navigator.vibrate([3000, 2000, 1000]);
window.navigator.vibrate (0);
window.navigator.vibrate ([]);

Infinite vibration
function infiniteVibrate(duration, interval) {
vInterval = setInterval(function() {
vibrate(duration);
}, interval);
}

Battery status API
switch to a light-on-dark theme
disable non-critical CSS3 and JavaScript animations
avoid DOM changes where possible
slowing down or stopping frequent Ajax polls
using the AppCache and creating an offline app
storing data on the client using Web Storage
avoiding requests for non-critical assets such as images.
Sound and vibration will kill a battery dead; you could use shorter effects or disable it completely.

Events
chargingchange — the device has changed from being charged to being discharged or vice versa
levelchange — the battery level has changed
chargingtimechange — the time until the battery is fully charged has changed
dischargingtimechange — the time until the battery is fully discharged has changed

Properties
navigator.battery.chargingTime
navigator.battery.dischargingTime
navigator.battery.level
navigator.battery.charging

Some example
battery.onlevelchange = function() {
var ee = enableEffects;
enableEffects = (battery.charging || battery.level > 0.25);
if (enableEffects != ee) {
if (enableEffects) {
console.log( "Battery power is OK." );
}
else {
console.log( "Battery power is critical!" );
}
}
}

Bluetooth API
https://developers.google.com/web/updates/2015/07/interact-
with-ble-devices-on-the-web

HTTPS only!
Use TLS certificates

Requesting devices
const button = document.querySelector('#the-button');
button.addEventListener('click', function() {
navigator.bluetooth.requestDevice({
filters: [{
services: ['battery_service']
}]
}).then(device => {
console.log('Got device:', device.name);
console.log('id:', device.id);
});
});

GATT (Generic Attribute Profile)
filters: [{
services: ['0009180d-0000-1000-8000-00705f9b34fb']
}]
});

Connecting
filters: [{
services: ['battery_service']
}]
}).then(device => {
console.log('Got device:', device.name);
console.log('id:', device.id);
return device.gatt.connect(); // Chromium 49 and below use `connectGATT()` but from
Chromium 50 it will use gatt.connect();
})

.then(server => {
console.log('Getting Battery Service…');
return server.getPrimaryService('battery_service');
})
.then(service => {
console.log('Getting Battery Characteristic…');
return service.getCharacteristic('battery_level');
})
.then(characteristic => {
console.log('Reading battery level…');
return characteristic.readValue();
})
.then(value => {
value = value.buffer ? value : new DataView(value);
console.log('Battery percentage:', value.getUint8(0));
})

Device orientation
API. Motion sensors

Device orientation API example
https://codepen.io/anon/pen/LNbMGN
https://developer.mozilla.org/en-
US/docs/Web/API/Detecting_device_orientation

Motion sensors
http://www.html5rocks.com/en/tutorials/device/orientation/

Device motion
accelerationIncludingGravity and acceleration

Motion angles
alpha the direction the device is facing according to the compass
beta the angle in degrees the device is tilted front-to-back
gamma the angle in degrees the device is tilted left-to-right.

Example
if (window.DeviceOrientationEvent) {
document.getElementById("doEvent").innerHTML = "DeviceOrientation";
// Listen for the deviceorientation event and handle the raw data
window.addEventListener('deviceorientation', function(eventData) {
// gamma is the left-to-right tilt in degrees, where right is positive
var tiltLR = eventData.gamma;
// beta is the front-to-back tilt in degrees, where front is positive
var tiltFB = eventData.beta;
// alpha is the compass direction the device is facing in degrees
var dir = eventData.alpha
// call our orientation event handler
deviceOrientationHandler(tiltLR, tiltFB, dir);
}, false);
} else {
document.getElementById("doEvent").innerHTML = "Not supported."
}

How it works?
Once captured, the event object gives access to the light intensity expressed in lux through the
DeviceLightEvent.value property.

Ambient light API example
window.addEventListener('devicelight', function(event) {
var html = document.getElementsByTagName('html')[0];
if (event.value < 50) {
html.classList.add('darklight');
html.classList.remove('brightlight');
} else {
html.classList.add('brightlight');
html.classList.remove('darklight');
}
});
http://modernweb.com/2014/05/27/introduction-to-the-ambient-
light-api/

Web audio API history
http://html5.by/blog/audio/

Context
var context = new AudioContext();

Connection
source1.connect(node1);
source2.connect(node3);
node1.connect(node4);
node2.connect(destination);
node4.connect(destination);

Source & Destination
AudioBufferSourceNode
MediaElementAudioSourceNode – <audio> or <video>
MediaStreamAudioSourceNode
context.destination
MediaStreamAudioDestinationNode

Using modules
var gainNode = context.createGain();
gainNode.gain.value = 0.4; // значение 0..1 (можно изменять динамически)
JS
source.connect(gainNode);
gainNode.connect(destination);
JS
source.start(0);

Geolocation API
navigator.geolocation.getCurrentPosition(function(position) {
console.log(position.coords.latitude, position.coords.longitude);
});
http://webmap-blog.ru/obzors/ispolzuem-html5-geolocation-api

Some example
https://codepen.io/anon/pen/ONbaag

Track changes
var watchID = navigator.geolocation.watchPosition(function(position) {
do_something(position.coords.latitude, position.coords.longitude);
});

Settings and callbacks
function geo_success(position) {
do_something(position.coords.latitude, position.coords.longitude);
}
function geo_error() {
alert("Sorry, no position available.");
}
var geo_options = {
enableHighAccuracy: true,
maximumAge : 30000,
timeout : 27000
};
var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, geo_options);

Purpose
The Navigation Timing API provides data that can be used to measure the performance of a
website. Unlike other JavaScript-based mechanisms that have been used for the same purpose, this
API can provide end-to-end latency data that can be more useful and accurate.
http://webperformance.ru/2011/08/22/navigation-timing-api/

Types
navigationStart
unloadEventStart
unloadEventEnd
redirectStart
redirectEnd
fetchStart
domainLookupStart
secureConnectionStart
requestStart
responseStart
responseEnd
domLoading
domInteractive
domContentLoadedEventStart
domContentLoadedEventEnd
domComplete

Web speech API usage
if (!('webkitSpeechRecognition' in window)) {
upgrade();
} else {
var recognition = new webkitSpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;
recognition.onstart = function() { ... }
recognition.onresult = function(event) { ... }
recognition.onerror = function(event) { ... }
recognition.onend = function() { ... }
https://developers.google.com/web/updates/2013/01/Voice-
Driven-Web-Apps-Introduction-to-the-Web-Speech-API

Demo
https://www.google.com/intl/en/chrome/demos/speech.html

Capturing audio and video history
<input type="file" accept="image/*;capture=camera">
input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">
http://www.html5rocks.com/ru/tutorials/getusermedia/intro/

Device
<device type="media" onchange="update(this.data)"></device>
<video autoplay></video>
<script>
function update(stream) {
document.querySelector('video').src = stream.url;
}
</script>

WebRTC
This document defines a set of ECMAScript APIs in WebIDL to allow media to be sent to and received
from another browser or device implementing the appropriate set of real-time protocols.

A little bit code
<video autoplay></video>
<script>
var onFailSoHard = function(e) {
console.log('Reeeejected!', e);
};
// Not showing vendor prefixes.
navigator.getUserMedia('video, audio', function(localMediaStream) {
var video = document.querySelector('video');
video.src = window.URL.createObjectURL(localMediaStream);
// Note: onloadedmetadata doesn't fire in Chrome when using it with getUserMedia.
// See crbug.com/110938.
video.onloadedmetadata = function(e) {
// Ready to go. Do some stuff.
};
}, onFailSoHard);
</script>

Academy PRO: HTML5 API multimedia

More Related Content

Viewers also liked (20)

Similar to Academy PRO: HTML5 API multimedia (20)

More from Binary Studio (20)

Recently uploaded (20)

Academy PRO: HTML5 API multimedia