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
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
NETWORK CONNECTION API NETWORK CONNECTION var connection = navigator.connection !|| navigator.mozConnection !|| navigator.webkitConnection; var type = connection.type; function updateConnectionStatus() { console.log("Connection type changed " + type + " !-> " + connection.type); } connection.addEventListener('typechange', updateConnectionStatus);
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 }
WEB AUDIO API TYPICAL WORKFLOW // Create audio context // Inside the context, create sources — such as , 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.
WEB SPEECH SPEECH SYNTHESIS var msg = new SpeechSynthesisUtterance('Hi there.'); msg.onstart = function () { }; msg.onend = function () { }; window.speechSynthesis.speak(msg);
SHAPE DETECTION FACE DETECTION let faceDetector = new FaceDetector({ fastMode: true, maxDetectedFaces: 1 }); !// Assuming |theImage| is e.g. a 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."); })
SHAPE DETECTION TEXT DETECTION let textDetector = new TextDetector(); !// Assuming |theImage| is e.g. a 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."); })