Academy PRO: HTML5 API multimedia

transcript

HTML5 APImultimedia

binary-studio.com

Navigatorobject

Info about browser

Modernizr(на правах рекламы)

https://modernizr.com/docs

Just cool thing to check API availability

PlanBrowser

1. visibilityChange

2. pointerLock3. fullScreen API4. Drag & Drop5. Notification

API6. GamePad

Mobile

1. Vibration API2. Battery status

API3. Bluetooth API4. Device

orientation API

5. Motion sensors6. Ambient light

Common

1. Web audio API2. Geolocation

API3. Navigation

timing API4. Web speech API5. Capturing

audio and video

Browser

visibilityChange

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

Pointer lock

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/

Full screen

Properties

2 methods: requestFullScreen and cancelFullScreen

2 object document: fullscreenElement and fullscreenEnabled

1 event fullscreenchange

http://html5.by/blog/fullscreen-javascript-api/

Drag&Drop

Drag & Drop actions

dragstart

dragenter

dragleave

dragover

dragend

http://www.html5rocks.com/ru/tutorials/dnd/basics/

Data transfer

dataTransfer.effectAllowed

dataTransfer.dropEffect

e.dataTransfer.setDragImage(img element, x, y)

Example

Drag&Dog

http://codepen.io/anon/pen/eZBPgg

Notifications

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

Gamepad object

var gamepads = navigator.getGamepads();

GamepadList {0: Gamepad, 1: Gamepad, 2: undefined, 3: undefined}

Gamepad object

axes: Array[4]buttons: Array[16]connected: trueid: "Xbox 360 Controller (XInput STANDARD GAMEPAD)"index: 0mapping: "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

Mobile

Vibration API

Try it

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.

http://www.sitepoint.com/html5-battery-status-api/

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

Exampleif (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."}

Ambient light API

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/

General

Web audio 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);node1.connect(node2);node2.connect(destination);node3.connect(node1);node4.connect(destination);node4.connect(node3);

Source & Destination

AudioBufferSourceNode

MediaElementAudioSourceNode – <audio> or <video>

MediaStreamAudioSourceNode

context.destination

MediaStreamAudioDestinationNode

Modules

Using modules

var gainNode = context.createGain();

gainNode.gain.value = 0.4; // значение 0..1 (можно изменять динамически)

source.connect(gainNode);

gainNode.connect(destination);

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 callbacksfunction 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);

Navigation timing API

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/

navigationStart

unloadEventStart

unloadEventEnd

redirectStart

redirectEnd

fetchStart

domainLookupStart

domainLookupEnd

connectStart

connectEnd

secureConnectionStart

requestStart

responseStart

responseEnd

domLoading

domInteractive

domContentLoadedEventStart

domContentLoadedEventEnd

domComplete

loadEventStart

loadEventEnd

Example

Web speech API

Web speech API usageif (!('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

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

Capturing audio and video

Get data from device

Capturing audio and video history

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.

Chrome allowance

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

Software