6. BROWSER WARS
USER AGENTS
Mosaic/0.9 !// grandmother of all!
Mozilla/2.02 [fr] (WinNT; I) !// Netscapes first!
Mozilla/4.0 (compatible; MSIE 4.0; Windows 98) !// IE4!
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like
Gecko)
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_4) AppleWebKit/537.36 (KHTML, like
Gecko) Chrome/58.0.3029.110 Safari/537.36
26. WEBAPI IS A TERM USED TO REFER TO A SUITE OF
DEVICE COMPATIBILITY AND ACCESS APIS THAT
ALLOW WEB APPS AND CONTENT TO ACCESS
DEVICE HARDWARE […], AS WELL AS ACCESS TO
DATA STORED ON THE DEVICE
MDN
HTTPS://DEVELOPER.MOZILLA.ORG/EN-US/DOCS/WEBAPI
48. DEVICE ORIENTATION &
DEVICE MOTION
HTTPS://DEVELOPER.MOZILLA.ORG/EN-US/DOCS/WEB/API/DETECTING_DEVICE_ORIENTATION
By Svjo (Own work) [CC BY-SA 3.0 (http://creativecommons.org/licenses/by-sa/3.0)], via Wikimedia Commons
49. DEVICE ORIENTATION AND MOTION
DEVICE ORIENTATION
window.addEventListener("deviceorientation", handleOrientation, true);
function handleOrientation(event) {
var absolute = event.absolute;
var alpha = event.alpha;
var beta = event.beta;
var gamma = event.gamma;
!// Do stuff with the new orientation data
}
50. DEVICE ORIENTATION AND MOTION
DEVICE MOTION
window.addEventListener("devicemotion", handleMotion, true);
function handleMotion(event) {
console.log(event.acceleration.x + ' m/s2');
!// more stuff
}
53. WEB AUDIO API
TYPICAL WORKFLOW
// Create audio context
// Inside the context, create sources — such as
<audio>, oscillator, stream
// Create effects nodes, such as reverb, biquad filter,
panner, compressor
// Choose final destination of audio, for example your
system speakers
// Connect the sources up to the effects, and the
effects to the destination.
54.
55. WEB AUDIO
GREAT RESOURCES
// Talk:
// https://fronteers.nl/congres/2015/sessions/hands-
on-web-audio-soledad-penades
// Links:
// https://developer.mozilla.org/en-US/docs/Web/
API/Web_Audio_API
// https://github.com/notthetup/awesome-webaudio
// Awesome use case:
// https://learningmusic.ableton.com/index.html
77. WEB SPEECH
SPEECH SYNTHESIS
var msg = new SpeechSynthesisUtterance('Hi there.');
msg.onstart = function () { };
msg.onend = function () { };
window.speechSynthesis.speak(msg);
78. WEB SPEECH
SPEECH RECOGNITION
var recognition = new webkitSpeechRecognition();
recognition.continuous = true; !// keep processing input until stopped
recognition.interimResults = true; !// show interim results
recognition.lang = 'de-DE'; !// specify the language
recognition.onstart = function () { };
recognition.onerror = function (event) { };
recognition.onend = function () { };
recognition.onresult = function (event) {
var interimTranscript = '';
for (var i = event.resultIndex; i < event.results.length; !++i) {
if (event.results[i].isFinal) {
finalTranscript += event.results[i][0].transcript;
} else {
interimTranscript += event.results[i][0].transcript;
}
}
};
recognition.onspeechend = function () { }
81. SHAPE DETECTION
FACE DETECTION
let faceDetector = new FaceDetector({ fastMode: true, maxDetectedFaces: 1 });
!// Assuming |theImage| is e.g. a <img> content, or a Blob.
faceDetector.detect(theImage)
.then(detectedFaces !=> {
for (const face of detectedFaces) {
console.log('Face @ (${face.boundingBox.x}, ${face.boundingBox.y}),'
+ ' size ${face.boundingBox.width}x${face.boundingBox.height}');
}
}).catch(() !=> {
console.error("Face Detection failed, boo.");
})
82. SHAPE DETECTION
TEXT DETECTION
let textDetector = new TextDetector();
!// Assuming |theImage| is e.g. a <img> content, or a Blob.
textDetector.detect(theImage)
.then(detectedTextBlocks !=> {
for (const textBlock of detectedTextBlocks) {
console.log(
'text @ (${textBlock.boundingBox.x}, ${textBlock.boundingBox.y}), ' +
'size ${textBlock.boundingBox.width}x$
{textBlock.boundingBox.height}');
}
}).catch(() !=> {
console.error("Text Detection failed, boo.");
})
83. SHAPE DETECTION
BARCODE DETECTION
let barcodeDetector = new BarcodeDetector();
!// Assuming |theImage| is e.g. a <img> content, or a Blob.
barcodeDetector.detect(theImage)
.then(detectedCodes !=> {
for (const barcode of detectedCodes) {
console.log(' Barcode ${barcode.rawValue}' +
' @ (${barcode.boundingBox.x}, ${barcode.boundingBox.y}) with
size' +
' ${barcode.boundingBox.width}x${barcode.boundingBox.height}');
}
}).catch(() !=> {
console.error("Barcode Detection failed, boo.");
})