Archive for the ‘HTML5’ 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: 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.

File Under: Browsers, HTML5, Mobile

Mozilla Tempts Mobile Developers With Firefox OS Simulator

Firefox OS’s home screen, dialer and web browser. Image: Screenshot/Webmonkey

Mozilla has released a new version of its experimental Firefox OS Simulator. The Firefox OS Simulator (which also goes by the nerdtastic nickname r2d2b2g) is a new add-on for Firefox that makes it easy for web developers who would like to get their hands dirty building apps for Mozilla’s coming mobile Firefox OS.

Mozilla’s Firefox OS is still in the very early alpha stages, but if you’d like to test your apps in the latest version of the Simulator, head on over to the download page (note that there are known issues running the simulator on Linux and Windows XP).

Firefox OS is Mozilla’s answer to the question how does Firefox stay relevant in an increasingly mobile world? Locked out of Apple’s iOS due to the platform’s developer limitations and only recently beginning to create a truly competitive browser on Android, Mozilla’s long term mobile plan is to create its own mobile operating system built entirely on open web technologies.

Although the company has since switched to the “Firefox OS” moniker, the original name, Boot2Gecko, neatly captures Mozilla’s take on the mobile operating system — essentially turning the Firefox web browser into an operating system.

Applications built for Firefox OS use nothing more than web development tools — everything is made with HTML, CSS and JavaScript — which then run atop Firefox’s Gecko rendering engine.

To make it possible to create full-featured mobile apps with only HTML and other web tools, Mozilla is relying heavily on device-level APIs to tap into everything from dialing phone numbers to listing contacts, taking photos and getting Wi-Fi information. Not all of the APIs Firefox OS uses are web standards yet, though Mozilla has submitted most of them to the W3C for consideration.

Mozilla hardly has a monopoly on using web tools to build mobile apps; that was Apple’s original plan for iOS and it’s also exactly what tools like Phonegap or Cordova allow you to do for iOS, Android and other mobile platforms. The difference with Firefox OS is that you don’t need to package your app up in a native container — there’s no need for Phonegap and its ilk.

While Firefox OS may use familiar web development technologies and may run on the same Gecko engine that already powers the Firefox web browser, developers still need a way to test their apps in a mobile environment, which is where the Firefox OS Simulator comes in.

To get started with the Simulator, first open up the “Simulator Manager” by selecting the new Firefox OS Simulator option in the Firefox Web Developer menu. In the Simulator Manager you’ll find controls to start and stop the Simulator and a JS Console option to see any error messages as you develop.

For more on how to get started using the Simulator and building apps for Firefox OS, see the Mozilla Hacks blog, especially the very thorough tutorial from Mozilla community member Luca Greco, who walks through nearly the entire process of building and testing an app on Firefox OS.

File Under: HTML5, Multimedia

Mozilla’s Popcorn Maker Brings Video Remixing to the Masses

Popcorn Maker 1.0 makes video remixing a snap. Image: Screenshot/Webmonkey

Mozilla has released Popcorn Maker 1.0, the company’s mashup-creating, video-editing suite for the web. Popcorn Maker makes it easy to pull just about any content on the web into a video container you can then publish back to the web.

Despite the interactive nature of the web, video on the web remains little more than glorified television in your web browser — a passive experience in the midst of the otherwise interactive online world.

It doesn’t have to be that way. HTML5 makes video into just another HTML element — editable, hackable, remixable.

It’s HTML, after all. And that means it can interact with other HTML elements or use JavaScript to augment video in real time — annotating videos with information like location, details about the people and topics in the video, subtitles, Twitter feeds, current weather information, links and much more.

The problem is that there aren’t a lot of tools that make it easy to create interactive web videos, which is where Popcorn Maker comes in.

Popcorn Maker is a free online video editor for mashing up, remixing and adding outside content to web videos. Popcorn Maker’s drag-and-drop timeline interface makes it easy to pull all kinds of outside web content into your videos. For example, add photo overlays, maps, links, in-video pop-ups of Wikipedia entries, Twitter widgets with relevant hashtag searches and so on.

As you would expect from the makers of Firefox, Popcorn Maker is built entirely from web technologies — pure HTML, CSS and Javascript. But more than just being an impressive use of web standards, Popcorn Maker 1.0 is a genuinely easy-to-use video editor and that’s no small feat regardless of which tools you use to build it.

I’ve been playing around with Popcorn Maker for a few days now and it does indeed deliver on its promise to bring video editing to the people. To get started you just need to pull in a video you’d like to annotate or remix. Adding a source video is just a matter of pasting in a link to a YouTube, Vimeo or Soundcloud video. Alternately you can just add a link directly to your video file.

Once you’ve got your base video (or videos) in Popcorn Maker, adding elements to it is as simple as grabbing one of the “events” from the right hand side of the editor and dragging it onto either the video stage itself, or the timeline below. Once your event is in the timeline you can change the settings, resize it, move it around and otherwise tweak it to behave the way you’d like.

Once everything is working the way you want, just click the share link and Popcorn Maker will give you either a link (or an embed code) you can paste anywhere on the web.

To get started remixing videos, head on over to the Popcorn Maker site. If you want to see some examples, check out new Popcorn Maker projects on Webmaker.org. For more background on how Popcorn Maker works, check out the Mozilla Hacks blog post and watch the video below.

File Under: HTML5, Web Standards

Mozilla Busts HTML5 Myths

Image: Christian Heilmann/Flickr

Mozilla has jumped into the shark-infested debate about whether or not HTML5 can compete with platform native apps. Chris Heilmann, Mozilla’s Principal Evangelist for HTML5, has a new post on the Mozilla Hacks blog that challenges many “false assumptions” about HTML5.

Heilmann’s post is not so much about which you ought to use for your next app — right now that depends on what you’re building — rather it attempts to clear the air about just what HTML5 actually can and cannot do.

Among the things Heilmann covers are the myths that HTML5 has performance problems, that it can’t work offline and that developers can’t make money building HTML5 apps.

Along the way Heilmann also acknowledges where platform-native apps have the lead, namely, access to device APIs. It’s not a shortcoming of HTML5 that iOS and Android both prevent web apps from accessing many APIs native apps can use, but it is a practical reality that keeps many developers building native apps for the time being. As Heilmann writes, “in essence HTML5 is a Formula 1 car that has to drive on a dirt road whilst dragging a lot of extra payload given to it by the operating system without a chance to work around that — for now.”

The qualifier, “for now,” is the key part of that analogy. Not only are platforms slowly adding more HTML5 support to their native browsers, we’ve also seen increased support for accessing device capabilities — like GPS or the camera — through web apps. And of course Mozilla is building its own mobile OS which will consist exclusively of HTML5 apps.

It may be some time before app developers start favoring the web over platform-specific apps, but as Heilmann points out this is hardly the first time the web has taken over from a closed system: “historically, closed platforms came and went and the web is still going strong.”