Embed Size (px)
Citation preview
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
API
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
drag
dragenter
dragleave
dragover
drop
dragend
http://www.html5rocks.com/ru/tutorials/dnd/basics/
Data transfer
dataTransfer.effectAllowed
dataTransfer.dropEffect
e.dataTransfer.setDragImage(img element, x, y)
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
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
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)
navigator.bluetooth.requestDevice({
filters: [{
services: ['0009180d-0000-1000-8000-00705f9b34fb']
}]
});
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();
})
.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
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 (можно изменять динамически)
JS
source.connect(gainNode);
gainNode.connect(destination);
JS
source.start(0);
Geolocation API
Geolocation API
navigator.geolocation.getCurrentPosition(function(position) {
console.log(position.coords.latitude, position.coords.longitude);
});
http://webmap-blog.ru/obzors/ispolzuem-html5-geolocation-api
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/
Types
navigationStart
unloadEventStart
unloadEventEnd
redirectStart
redirectEnd
fetchStart
domainLookupStart
domainLookupEnd
connectStart
connectEnd
secureConnectionStart
requestStart
responseStart
responseEnd
domLoading
domInteractive
domContentLoadedEventStart
domContentLoadedEventEnd
domComplete
loadEventStart
loadEventEnd
Example
live
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
Demo
https://www.google.com/intl/en/chrome/demos/speech.html
Capturing audio and video
Why?
Get data from device
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.
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>
![[D2 오픈세미나]1.html5 api 옥상훈](https://img.dokumen.tips/doc/110x75/54b731c74a795916198b4970/d2-1html5-api-.jpg)
