PROVES Camera

HTML5 APIs

getUserMedia API

The getUserMedia API is incredibly interesting;  this API provides access to device media, like your MacBook's camera!  

Using this API, the <video> tag, and canvas, you can take beautiful photos within your browser!// Put event listeners into place window.addEventListener("DOMContentLoaded", function() { // Grab elements, create settings, etc. var canvas = document.getElementById("canvas"), context = canvas.getContext("2d"), video = document.getElementById("video"), videoObj = { "video": true }, errBack = function(error) { console.log("Video capture error: ", error.code); }; // Put video listeners into place if(navigator.getUserMedia)

{ // Standard navigator.getUserMedia(videoObj, function(stream) { video.src = stream; video.play(); }, errBack); } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed navigator.webkitGetUserMedia(videoObj, function(stream){ video.src = window.webkitURL.createObjectURL(stream); video.play(); }, errBack); } }, false);Look forward to using this API quite a bit in the future -- interactivity within the browser will be the norm a year from now!


Fullscreen API

The awesome Fullscreen API allows developers to programmatically launch the browser into fullscreen mode, pending user approval:// Find the right method, call on correct element function launchFullScreen(element) { if(element.requestFullScreen) { element.requestFullScreen(); } else if(element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if(element.webkitRequestFullScreen) { element.webkitRequestFullScreen(); } } // Launch fullscreen for browsers that support it! launchFullScreen(document.documentElement); // the whole page launchFullScreen(document.getElementById("videoElement")); // any individual elementAny element can be pushed to fullscreen, and there's even a CSS pseudo-class to allow some control over the screen while in fullscreen mode.  This API is especially useful for JavaScript game development;  especially first person shooters like BananaBread!Read Tutorial View Demo

Page Visibility API

The Page Visibility API provides developers an event to listen in on, telling developers when the user focuses on a page's tab, and also when the user moves to another tab or window:// Adapted slightly from Sam Dutton // Set name of hidden property and visibility change event // since some browsers only offer vendor-prefixed support var hidden, state, visibilityChange; if (typeof document.hidden !== "undefined") { hidden = "hidden"; visibilityChange = "visibilitychange"; state = "visibilityState"; } else if (typeof document.mozHidden !== "undefined") { hidden = "mozHidden"; visibilityChange = "mozvisibilitychange"; state = "mozVisibilityState"; } else if (typeof document.msHidden !== "undefined") { hidden = "msHidden"; visibilityChange = "msvisibilitychange"; state = "msVisibilityState"; } else if (typeof document.webkitHidden !== "undefined") { hidden = "webkitHidden"; visibilityChange = "webkitvisibilitychange"; state = "webkitVisibilityState"; } // Add a listener that constantly changes the title document.addEventListener(visibilityChange, function(e) { // Start or stop processing depending on state }, false);When used properly, a developer can avoid expensive tasks (like AJAX polling or animating) when the tab isn't in focus.Read Tutorial View Demo


Battery API

The Battery API is obviously a mobile-targeted API providing insight into the device's battery level and status:// Get the battery! var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery; // A few useful battery properties console.warn("Battery charging: ", battery.charging); // true console.warn("Battery level: ", battery.level); // 0.58 console.warn("Battery discharging time: ", battery.dischargingTime); // Add a few event listeners battery.addEventListener("chargingchange", function(e) { console.warn("Battery charge change: ", battery.charging); }, false);Knowing battery API and status can signal to the web application not to use battery-intensive processes and the like.  Not a groundbreaking API but surely a helpful one.Read Tutorial

Link Prefetching

Link prefetching allows developers to silently preload site contents to project a more fluid, seamless web experience:<!-- full page --> <link rel="prefetch" href="

" /> <!-- just an image --> <link rel="prefetch" href="http://cdn.davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png" />Read TutorialThere's five more HTML5 APIs to research and tinker with.  Keep in mind that these APIs will be used widely in a few years, so the sooner you get acquainted with them, the better you'll be equipped to create world-class web applications.  Take a few moments to explore these APIs and see what you can put together!

Comments

Allow me a shameless self-plug, but I wrote a tutorial-ish demo and the photobooth app you mentioned with getUserMedia() + video + HTML5 and I guess more than one reader, and possibly you, will find them interesting:Demo + tutorial-ish thing:

https://github.com/cbrandolino/camvasPhotobooth app:https://github.com/cbrandolino/camvasReplyBillNovember 9, 2012 @ 11:08 am


Thx David this is very interesting and useful, regards from spain.ReplyZeccNovember 10, 2012 @ 6:04 amWeb MIDI: http://www.w3.org/TR/webmidi/ReplyZeccNovember 10, 2012 @ 6:13 amApologies if this comes out repeated, but my first comment seems to have been swallowed.There is also an API for using MIDI devices:

http://www.w3.org/TR/webmidi/ReplyfdgdfgNovember 11, 2012 @ 6:49 amif($type == 'rssfeed'){$feed_url = 'DBTutorBlog';if (false === ($subscribers = get_transient('rss-subscribers-count'))) {$feed_url = urlencode($feed_url);$response = wp_remote_get("http://feedburner.google.com/api/awareness/1.0/GetFeedData?uri={$feed_url}&dates=" . date('Y-m-d', strtotime('-2 days', time())).'&format=xml');if (is_wp_error($response)) {$subscribers = 97;} else {$body = wp_remote_retrieve_body($response);@$xml = new SimpleXMLElement($body);$status = $xml->attributes();if ($status == 'ok') {$subscribers = $xml->feed->entry->attributes()->circulation;} else {$subscribers = 98;}}$subscribers = (int) $subscribers;set_transient('rss-subscribers-count', $subscribers, 60*60*24);}echo $subscribers;}



http://davidwalsh.name/css-enhancements-user-experience