November 5, 2012

Unless you’ve been keeping a very close eye on the new features appearing in web browsers, you may not have heard about some of the powerful new capabilities on their way to a browser near you.

Some of these features are probably only interesting to people who immediately view the source code on cool-looking websites – things like standard APIs (Application Programming Interfaces) for saving files, storing data offline and communication between web apps, to name a few.

Others, however, are going to change the way you interact with the web in the next few years.

Video and audio, no plugins required

Annoying photo and video effects in your browser, no Instagram required!

The media API includes two of the coolest new elements to emerge from HTML5 – <video> and <audio>.The video element is already gaining widespread acceptance with sites like Youtube trialling HTML5 versions of their offerings.

Check out this cool demo which will use your webcam (with your permission) to accept live video and apply CSS effects in real time*.

*Browser support is still patchy for most of these APIs, so make sure you’re using an up-to-date version of a decent browser like Google Chrome.

Audio is a bit more primitive at the moment, but you’ll eventually be able to use your computer or device’s microphone to record sound straight onto the web.

3D graphics

WebGL provides a way for web browsers to use your computer’s hardware to render proper 3D graphics.

Some of the demos out there are pretty impressive – what about a full 3D game right in your browser?

Another neat example is Chrysaora.com – you might want to resize your browser window down if your computer struggles with this one.

Location, location, (geo)location

Location-based applications make the most sense on mobile devices, when you need information related to your current position.

The specification does address the immediate concerns you might have around privacy – browsers must ask your permission before sending your location to a website.

Check out http://html5demos.com/geo on your phone or tablet and see how close Google can get!

Augmented reality

Yes, seriously. This one uses an extra javascript library, but it’s an interesting experiment using video.

Step 1. Print out this image, or view it on your tablet or phone.

Step 2. Visit this page and hold up your printout / device screen to your webcam. You should see images being overlaid on the printout or device you’re holding.

This is a basic demo of ‘augmented reality’, which is about overlaying visual data on top of the world you see (Google’s Project Glass is trying to do the same thing).

(Not working? Again, these are cutting-edge experimental features which are not well supported everywhere, but here’s a video showing what should happen.)

Want more?

This post doesn’t even scratch the surface of what people are doing with new browser technologies already. Check out the following links for more amazing demos and experiments.