Lecture for Binary Studio Academy PRO course about HTML5 API by Bohdan Rusinka (JS developer at Binary Studio) binary-studio.com

1. HTML5 API
multimedia
binary-studio.com

2. Navigator
object
Info about browser

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

4. 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

5. Browser

6. visibilityChange

7. 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.

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

10. Pointer lock

11. 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.

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

14. Full screen

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

17. Drag&Drop

18. Drag & Drop actions
dragstart
drag
dragenter
dragleave
dragover
drop

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

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

21. Notifications

22. 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/

23. 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"
});

25. Gamepad

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

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

28. 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/

29. 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
);
});

30. 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
);
});

33. Mobile

34. Vibration API

35. Try it

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

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

39. Battery status API

40. 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.

41. 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

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

43. 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!" );
}
}
}

45. Bluetooth API

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

47. HTTPS only!
Use TLS certificates

48. 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);
});
});

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

50. Connecting
navigator.bluetooth.requestDevice({
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();
})

51. .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));
})

53. Device orientation
API. Motion sensors

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

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

56. Device motion
accelerationIncludingGravity and acceleration

57. 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.

58. 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."
}

60. Ambient light API

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

62. 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/

64. General

65. Web audio API

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

67. Context
var context = new AudioContext();

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

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

70. Modules

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

73. Geolocation API

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

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

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

77. 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);

79. Navigation timing
API

80. 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/

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

82. Example
live

84. Web speech API

85. 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

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

88. Capturing audio and
video

89. Why?
Get data from device

90. 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/

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

92. 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.

93. Chrome allowance

94. 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>