Archive for the ‘Web Standards’ Category

Add an HTML5 Webcam to Your Site With Photobooth.js

WT Monkey is in your photobooth.js, changin’ hues. Image: Screenshot/Webmonkey

The big web development news for 2013 is shaping up to be WebRTC, a set of APIs being developed by Mozilla, Google and others at the W3C that allows web developers to access device hardware — your camera, microphone, accelerometer and so on. Even now hardly a day goes by without a new demo showcasing WebRTC in some way.

The latest WebRTC hotness to catch our eye is developer Wolfram Hempel’s Photobooth.js, a JavaScript library for working with a device’s camera. Photobooth.js allows users to take pictures directly on your website, for example, to add an avatar. It also acts a bit like the OS X Photobooth app, offering real-time adjustments for hue, saturation and brightness (one word of warning, hue can really slow down Firefox).

Want to add a Photobooth-style camera app to your site? Just download Photobooth.js and add this code to your page:

myPhotobooth = new Photobooth( document.getElementById( "container" ) ); 

That’s it. Of course there’s a little more to do if you actually want to do something with your newly instantiated Photobooth — like capture images or resize and save them. But Photobooth.js makes the whole process pretty simple; see the documentation for more details.

Photobooth.js works in current versions of Chrome, Firefox, Opera, and any other browser that supports the WebRTC getUserMedia method. You can see a complete list of browsers that support getUserMedia over on caniuse.

Hempel’s code is available on GitHub (BSD license) and can be used as a standalone app or a JQuery plugin.

File Under: CSS, Web Standards

A Look at the Future of CSS

CSS Blend Modes demo. Image: Screenshot/Webmonkey.

We use the term “CSS 3″ all the time on Webmonkey, but technically that’s something of a misnomer. There is no spoon, you see.

In fact, the CSS Working Group, which oversees the CSS specification at the W3C, is cranking out draft specs of new features all the time — the monolithic “3.0″ or “4.0″ versioning was tossed out after CSS 2.1. Instead new features are developed as “modules” so that, for example, the Selector Module can be published without waiting for the Layout Module.

That means there are new CSS features coming all the time.

Adobe’s Divya Manian — who is also one of the developers behind HTML5 Boilerplate — recently gave a talk titled “CSS Next“, which highlights some of the exciting new CSS features coming soon to a browser near you.

Among the cool things Manian highlights are some impressive new tricks for web fonts, including better tools for working with ligatures, unicode and icon fonts.

There are also some impressive new layout tools in the works, namely CSS Regions and Exclusions. We looked at both back when Adobe first proposed them, but since then not only have they progressed to actual draft specs, but they’re now supported in Chrome’s Canary builds (rather than requiring a custom build from Adobe).

It’s still going to be a while before either can claim a spot in your CSS layout toolkit, but there are already a few demos you can check out to see the new layout possibilities Regions and Exclusions offer. Grab a copy of Chrome Canary and turn on “Enable Experimental WebKit Features” in chrome:flags and then point your browser to this demo of Regions and this “shape inside” demo of Exclusions.

Other things Manian covers that we’re looking forward to include CSS Filters and Blend modes. CSS Filters already work in WebKit browsers and allow you to apply effects like blur or grayscale to any HTML element. CSS Blend Modes work just like layer-blending modes in Photoshop and other graphics apps — allowing you to blend layers using modes like “difference,” “overlay,” “multiply” and so on. As of right now you still need a special build of Chromium to see Blend Modes in action.

Manian also covers two intriguing WebKit-only features that aren’t yet a part of any CSS spec, but could be one day. Be sure to read through Manian’s post for more info and a few other new things, including two Webmonkey has covered recently — CSS @supports and CSS Variables.

File Under: APIs, HTML5, Web Standards

BBC Taps the Past to Showcase the Future of Web Audio

Mixing old school tape loops with the BBC’s Web Audio API demo. Image: Screenshot/Webmonkey

HTML5 offers developers new ways to display and work with both audio and video on the web. The HTML5 <video> element tends to get more attention, but the HTML5 audio element is equally revolutionary, perhaps even more so thanks to the work-in-progress Web Audio API (currently in the draft stages).

Developers at the BBC recently set out to push the limits of what you can do with HTML5 <audio> and the Web Audio API. The result is a new audio playground site that recreates the sounds of the BBC Radiophonic Workshop using the Web Audio API. Note that right now only WebKit browsers support the Web Audio API. (Firefox supports the older, deprecated, Audio Data API, but plans to ship support for Web Audio in 2013.)

The BBC’s Radiophonic Workshop project is one part cool demo, one part tutorial. It’s fun to play around with, sure, but another reason behind the experiment is to document how to use <audio> and the Web Audio API. The developers also wanted to put the API through some real-world use cases, to see if there are any limitations that could be addressed before the Web Audio API becomes an official standard.

Each of the four demos has a thorough code walk-through showing exactly how it works and which elements of the Web Audio API are being used. There are a couple of dependencies, namely JQuery and Backbone.js, but most of the code is working directly with the Web Audio API.

If you’ve ever wanted to explore the Web Audio API, these demos make a great introduction to how everything works. For more background on the project, see the BBC’s Research and Development blog.

So far the code doesn’t seem to be available through the BBC’s R&D GitHub account. You can always copy and paste from the demo site, but it would be nice if it was available for easy forking and experimentation.

Mozilla Blends Social API, WebRTC for More Social Apps

Mozilla is making good on its promise to take its fledgling Social API beyond the simple Facebook integration it showcased for the launch of Firefox 17. In fact, the company’s newest Social API demo removes the need for social websites entirely, tapping emerging web standards to create a real-time video calling, data sharing app — one part Skype, one part Facebook, all parts web-native.

The direct peer-to-peer video calls and file sharing features come from WebRTC, a proposed web standard that Mozilla and others are working on in conjunction with the W3C. The RTC in WebRTC stands for Real-Time Communications, and the core of WebRTC is the getUserMedia JavaScript API, which gives the browser access to hardware features like the camera and microphone.

Much of the enthusiasm around WebRTC comes from the fact that it enables web apps to do many of the same things that, without WebRTC support, require platform-native APIs. WebRTC will help developers build web apps that can compete with native apps, but it has other tricks up its sleeve — like a whole new way to connect with your friends on the web.

“While many of us are excited about WebRTC because it will enable several cool gaming applications and improve the performance and availability of video conferencing apps, WebRTC is proving to be a great tool for social apps,” writes Mozilla’s Maire Reavy on the Mozilla blog.

Reavy goes on to paint a picture of seamless social sharing through WebRTC and Mozilla’s Social API:

Sometimes when you’re chatting with a friend, you just want to click on their name and see and talk with them in real-time. Imagine being able to do that without any glitches or hassles, and then while talking with them, easily share almost anything on your computer or device: vacation photos, memorable videos — or even just a link to a news story you thought they might be interested in — simply by dragging the item into your video chat window.

Mozilla’s Social API-WebRTC mashup goes beyond previous demos, using a new WebRTC feature, one which Firefox is the first to support, DataChannels. DataChannels offer a way to send data from one WebRTC-enabled browser to another. DataChannels can send pretty much any data the browser can access, be it images, videos, webpages or local files.

For more details on how the DataChannel API works, check out this earlier post on the Mozilla Hacks blog. If you’d like to see exactly what’s happening behind the scenes of Mozilla’s Social API-WebRTC demo, the code is available on GitHub.

File Under: CSS, Web Standards

Exercise Better Web Typography With CSS Hyphens

Forget The Homer; look at those sweet, sweet hyphens. Image: Screenshot/Webmonkey.

Last night, while reading Craig Mod’s excellent article, Subcompact Publishing, I noticed something that only type-obsessed nerds probably notice: some really good-looking hyphenation. A quick right-click to “inspect element” revealed this gem: -moz-hyphens: auto;.

It’s true; while we were sleeping Firefox, IE 10 and Safari all implemented the CSS hyphenation spec. In fact, Firefox has had hyphenation support for over year (starting with version 6). Sadly, Chrome doesn’t support hyphens just yet, nor does Opera. Still, if you’d like to do something really simple that will vastly improve the readability of your text for Firefox, IE 10 and Safari users, add this to your site’s stylesheet:

p {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    -o-hyphens: auto;
    hyphens: auto;
}

Right now the -o- prefix isn’t doing anything, but it future-proofs the code a bit for when Opera adds support. The only catch to hyphenation is that not only does the browser need to support it, it also needs to have a hyphenation dictionary for the language you’re using. The Mozilla Developer Network has a good rundown of which browsers support which languages.

There’s no real need for a fallback since the web has never had any hyphenation. Browsers that don’t support the CSS hyphens rule will simply render the page as they always have, but those that do will now be a bit more readable.

And, as a kind of footnote, if you have any interest in the future of publishing, Subcompact Publishing is well worth a read.

[Update: It looks like developer Peter Paul Koch just noticed hyphenation support as well. He’s got a short post that notes one potential problem with hyphens that I missed: you need to explicitly declare a language, as in <html lang="en"> in order to trigger hyphenation. See Koch’s post for more details.]