Download - Academy PRO: HTML5 API multimedia
![Page 1: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/1.jpg)
HTML5 APImultimedia
binary-studio.com
![Page 2: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/2.jpg)
Navigatorobject
Info about browser
![Page 3: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/3.jpg)
Modernizr(на правах рекламы)
https://modernizr.com/docs
Just cool thing to check API availability
![Page 4: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/4.jpg)
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
![Page 5: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/5.jpg)
Browser
![Page 6: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/6.jpg)
visibilityChange
![Page 7: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/7.jpg)
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.
![Page 8: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/8.jpg)
Properties
document.visibilityState – "visible", "hidden" or"prerender"
document.hidden – true or false.
https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API
![Page 9: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/9.jpg)
![Page 10: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/10.jpg)
Pointer lock
![Page 11: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/11.jpg)
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.
![Page 12: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/12.jpg)
Properties
document.addEventListener('pointerlockchange', function(e){}
element.requestPointerLock();
document.exitPointerLock();
document.pointerLockElement
http://html5.by/blog/pointer-lock-api/
![Page 13: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/13.jpg)
![Page 14: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/14.jpg)
Full screen
![Page 15: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/15.jpg)
Properties
2 methods: requestFullScreen and cancelFullScreen
2 object document: fullscreenElement and fullscreenEnabled
1 event fullscreenchange
http://html5.by/blog/fullscreen-javascript-api/
![Page 16: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/16.jpg)
![Page 17: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/17.jpg)
Drag&Drop
![Page 18: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/18.jpg)
Drag & Drop actions
dragstart
drag
dragenter
dragleave
dragover
drop
dragend
http://www.html5rocks.com/ru/tutorials/dnd/basics/
![Page 19: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/19.jpg)
Data transfer
dataTransfer.effectAllowed
dataTransfer.dropEffect
e.dataTransfer.setDragImage(img element, x, y)
![Page 21: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/21.jpg)
Notifications
![Page 22: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/22.jpg)
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/
![Page 23: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/23.jpg)
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"});
![Page 24: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/24.jpg)
![Page 25: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/25.jpg)
Gamepad
![Page 26: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/26.jpg)
Gamepad object
var gamepads = navigator.getGamepads();
GamepadList {0: Gamepad, 1: Gamepad, 2: undefined, 3: undefined}
![Page 27: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/27.jpg)
Gamepad object
axes: Array[4]buttons: Array[16]connected: trueid: "Xbox 360 Controller (XInput STANDARD GAMEPAD)"index: 0mapping: "standard"timestamp: 12
![Page 28: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/28.jpg)
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/
![Page 29: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/29.jpg)
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
);});
![Page 30: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/30.jpg)
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
);});
![Page 31: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/31.jpg)
![Page 32: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/32.jpg)
![Page 33: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/33.jpg)
Mobile
![Page 34: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/34.jpg)
Vibration API
![Page 35: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/35.jpg)
Try it
![Page 36: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/36.jpg)
Only one method
window.navigator.vibrate(1000);
window.navigator.vibrate([3000, 2000, 1000]);
window.navigator.vibrate (0); window.navigator.vibrate ([]);
![Page 37: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/37.jpg)
Infinite vibration
function infiniteVibrate(duration, interval) { vInterval = setInterval(function() { vibrate(duration); }, interval);}
![Page 38: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/38.jpg)
![Page 39: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/39.jpg)
Battery status API
![Page 40: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/40.jpg)
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/
![Page 41: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/41.jpg)
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
![Page 42: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/42.jpg)
Properties
navigator.battery.chargingTime
navigator.battery.dischargingTime
navigator.battery.level
navigator.battery.charging
![Page 43: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/43.jpg)
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!" );
}
}
}
![Page 44: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/44.jpg)
![Page 45: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/45.jpg)
Bluetooth API
![Page 46: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/46.jpg)
Bluetooth API
https://developers.google.com/web/updates/2015/07/interact-with-ble-devices-on-the-web
![Page 47: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/47.jpg)
HTTPS only!
Use TLS certificates
![Page 48: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/48.jpg)
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);
});
});
![Page 49: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/49.jpg)
GATT (Generic Attribute Profile)
navigator.bluetooth.requestDevice({
filters: [{
services: ['0009180d-0000-1000-8000-00705f9b34fb']
}]
});
![Page 50: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/50.jpg)
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();
})
![Page 51: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/51.jpg)
.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));
})
![Page 52: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/52.jpg)
![Page 53: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/53.jpg)
Device orientation API. Motion sensors
![Page 54: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/54.jpg)
Device orientation API example
https://codepen.io/anon/pen/LNbMGN
https://developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation
![Page 55: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/55.jpg)
Motion sensors
http://www.html5rocks.com/en/tutorials/device/orientation/
![Page 56: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/56.jpg)
Device motionaccelerationIncludingGravity and acceleration
![Page 57: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/57.jpg)
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.
![Page 58: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/58.jpg)
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."}
![Page 59: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/59.jpg)
![Page 60: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/60.jpg)
Ambient light API
![Page 61: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/61.jpg)
How it works?
Once captured, the event object gives access to the light intensity expressed in lux through the DeviceLightEvent.value property.
![Page 62: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/62.jpg)
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/
![Page 63: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/63.jpg)
![Page 64: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/64.jpg)
General
![Page 65: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/65.jpg)
Web audio API
![Page 67: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/67.jpg)
Context
var context = new AudioContext();
![Page 68: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/68.jpg)
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);
![Page 69: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/69.jpg)
Source & Destination
AudioBufferSourceNode
MediaElementAudioSourceNode – <audio> or <video>
MediaStreamAudioSourceNode
context.destination
MediaStreamAudioDestinationNode
![Page 70: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/70.jpg)
Modules
![Page 71: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/71.jpg)
Using modules
var gainNode = context.createGain();
gainNode.gain.value = 0.4; // значение 0..1 (можно изменять динамически)
JS
source.connect(gainNode);
gainNode.connect(destination);
JS
source.start(0);
![Page 72: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/72.jpg)
![Page 73: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/73.jpg)
Geolocation API
![Page 74: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/74.jpg)
Geolocation API
navigator.geolocation.getCurrentPosition(function(position) {
console.log(position.coords.latitude, position.coords.longitude);
});
http://webmap-blog.ru/obzors/ispolzuem-html5-geolocation-api
![Page 76: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/76.jpg)
Track changes
var watchID = navigator.geolocation.watchPosition(function(position) {
do_something(position.coords.latitude, position.coords.longitude);
});
![Page 77: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/77.jpg)
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);
![Page 78: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/78.jpg)
![Page 79: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/79.jpg)
Navigation timing API
![Page 80: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/80.jpg)
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/
![Page 81: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/81.jpg)
Types
navigationStart
unloadEventStart
unloadEventEnd
redirectStart
redirectEnd
fetchStart
domainLookupStart
domainLookupEnd
connectStart
connectEnd
secureConnectionStart
requestStart
responseStart
responseEnd
domLoading
domInteractive
domContentLoadedEventStart
domContentLoadedEventEnd
domComplete
loadEventStart
loadEventEnd
![Page 82: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/82.jpg)
Example
live
![Page 83: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/83.jpg)
![Page 84: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/84.jpg)
Web speech API
![Page 85: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/85.jpg)
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
![Page 86: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/86.jpg)
Demo
https://www.google.com/intl/en/chrome/demos/speech.html
![Page 87: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/87.jpg)
![Page 88: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/88.jpg)
Capturing audio and video
![Page 89: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/89.jpg)
Why?
Get data from device
![Page 90: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/90.jpg)
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/
![Page 91: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/91.jpg)
Device
<device type="media" onchange="update(this.data)"></device><video autoplay></video><script> function update(stream) { document.querySelector('video').src = stream.url; }</script>
![Page 92: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/92.jpg)
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.
![Page 93: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/93.jpg)
Chrome allowance
![Page 94: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/94.jpg)
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>
![Page 95: Academy PRO: HTML5 API multimedia](https://reader034.vdocuments.pub/reader034/viewer/2022052206/586fbbbd1a28abe57d8b8b07/html5/thumbnails/95.jpg)