Archive for the ‘Multimedia’ Category

File Under: Browsers, HTML5, Multimedia, Web Standards
Jan
20
2012

Mozilla Demos MediaStream Processing, Audio Mixing in Firefox

By

Mozilla is drafting a proposal for a new web standard called MediaStream Processing that introduces JavaScript APIs for manipulating audio and video streams in real time. The specification is still at an early stage of development, but Mozilla has already started working on an implementation for testing purposes.

Mozilla’s Robert O’Callahan, the author of the MediaStream Processing API proposal draft, released experimental Firefox builds that include MediaStream Processing support. He has also published a set of demos (note: you need to run the experimental build to see the demos) that illustrate some of the functionality defined by the specification.

The demos show how the APIs can be used to perform tasks like rendering a visualization of a video’s audio track in a Canvas element while the video is playing. It also shows how the APIs can be used for mixing tasks, like implementing a cross-fade between two audio streams, dynamically adjusting the volume of a video, and programmatically generating audio streams.

One of the characteristics that distinguishes the MediaStream Processing API from previous web audio API proposals is that it aims to interoperate better with existing web standards. For example, it relies on the MediaStream interface in the WebRTC specification. It also allows users to take advantage of Web Workers for threading and will work with getUserMedia to eventually support real-time manipulation of streams from microphones and webcams.

The current implementation of the specification focuses on audio capabilities. As O’Callahan explained this week in a blog post, support for video manipulation will be added in the future when the necessary graphics APIs are accessible through Web Workers. MediaStream Processing on video will be useful for doing things like QR code recognition and augmented reality in web applications, he said.

Analyzing a video's audio track and visualizing it in real time

So, when will this functionality be available in a stable Firefox release? It might take some time. According to O’Callahan, the patch needs some cleanup before the functionality can land in trunk and make it into regular nightly builds. Even then, the MediaStream Processing functionality likely won’t be generally available until the specification has solidified.

“The biggest limitation is that it’s not shipping in Firefox yet. My giant patch is messy and a lot of cleanup needs to be done. I have a plan to split the patch up, clean up the pieces and land them piecemeal. In particular I need to get some of the infrastructure landed ASAP to help the WebRTC team make progress,” he wrote. “When we ship it, much or all of the API will probably be disabled by default, behind a hidden pref, until the standards situation is resolved.”

MediaStream Processing is definitely going to be worth the wait. Some fantastic capabilities are going to be unlocked when the specification is fully implemented. It will open the door for using native web standards to perform some sophisticated real-time media processing tasks that were previously only possible with browser plugins.

This article originally appeared on Ars Technica, Wired’s sister site for in-depth technology news.

Tags:
File Under: Mobile, Multimedia
Nov
17
2011

Damn the Torpedos: Mozilla Adds Flash to Firefox for Android

By

Flash Player running in Firefox for Mobile. Photo: Scott Gilbertson/Wired.com

Adobe may be abandoning Mobile Flash, but Mozilla is pushing forward with Flash in Firefox for Mobile. In addition to the new native Android UI we recently showcased, the latest nightly builds of Firefox for Android now offer experimental support for the Flash plugin.

If you’d like to give it a try, head over to the Mozilla nightly builds page and download a copy of Firefox for Android (note that if you have the beta release installed you’ll need to remove that first). Once the download is finished just open the file to complete the installation and setup.

The nightly builds are, obviously, not stable releases, but I took the latest version for a spin on a Dell Venue and had no problems watching Flash movies. Or I should say no technical problems with Firefox for Android. The browser didn’t crash and Flash worked as advertised in that it loaded and attempted to play movies. Sadly playback was jittery at best, often fell out of sync with the audio and more or less made a good argument for why Flash doesn’t work well on under-powered mobile devices (all testing was done over wifi).

Flash’s lackluster performance isn’t Firefox’s fault, but that probably won’t stop users from blaming the browser. In truth how well Flash performs in Firefox for Android will vary considerably based on your phone’s hardware.

While Flash on mobile is imperfect enough that even Adobe is done with it, Mozilla reports that 21 percent of Firefox for Android’s 1 and 2 star reviews come from users requesting support for Flash. For those that have been waiting for Flash, rest assured, Firefox for Mobile is indeed getting Flash support, though the final version won’t arrive until Firefox 10 ships early in 2012.

See Also:

Tags:
File Under: APIs, HTML5, JavaScript, Multimedia, Web Standards
Nov
10
2011

Mozilla Reinvents Web Video With Popcorn 1.0

By

Video on the web has always been a bit disappointing. After all, it’s pretty much just like television, only smaller. Unlike the rest of the web, video is just as much a passive experience in your browser as it is anywhere else.

Mozilla would like to change that. The company’s effort to bring a more interactive video experience to the web is known as Popcorn.js and it recently reached 1.0 status. If you’d like to play around with Popcorn, head on over to the Mozilla site and download a copy. Popcorn uses HTML5 video features and at the moment works best in Firefox and Chrome.

At its core, Popcorn is about making HTML5 web video into something more than just another television.

While it’s nice to have a way to embed videos without Flash, HTML5 video is capable of much more than just, well, video. It’s HTML, after all. That means it can tap into things like WebGL, 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.

Popcorn is simply a JavaScript library that aims to simplify the process of adding external data culled from around the web to your video. To give an idea of what’s possible with Popcorn, Mozilla is showcasing the movie One Millionth Tower, a documentary film about an apartment building and how residents imagine the future. One Millionth Tower premiered online last weekend at Wired.com. If you haven’t seen it yet, head over to the Underwire blog.

One Millionth Tower uses some tricks beyond Popcorn (like WebGL for some 3-D elements), but most of its coolest effects — like the way the environment in the film changes based on the real-time weather conditions and time of day at the Toronto high-rises where the documentary was filmed — are all courtesy of Popcorn.

If it happens to be snowing in Toronto when you watch the film, it will begin snowing in the virtual world of One Millionth Tower. At other points in the film Popcorn pulls outside information from Flickr, Wikipedia, Google Maps and, of course, Yahoo Weather. Pretty much any web service with an API can be plugged into an HTML5 video in real time with Popcorn.

A more mundane but potentially more widespread use for Popcorn is subtitles. Using Popcorn, a set of subtitles attached to a video could be sent on to an online translation tool and converted to whatever language you wanted on the fly. Popcorn could then pipe the translation back into the video. In other words, subtitle your movie once and anyone will be able to understand it.

So how does Popcorn work? Well, Popcorn.js takes the native HTMLMediaElement properties, methods and events — collectively known as HTML5 video — and normalizes them into an API. The API has a plug-in system so developers can contribute and reuse code for common tasks. In fact, Popcorn already has dozens of plugins for most popular web services like Twitter, various maps, Facebook, Processing.js and, of course, all the services mentioned above in conjunction with One Millionth Tower.

In addition to the Popcorn.js framework, there’s also Popcorn Maker, a web-based graphical user interface for creating Popcorn-based videos. Popcorn Maker is the newest member of the Popcorn family and is not yet a 1.0 release. Its goal is to offer the familiar timeline controls you’d expect in video editing software, but at the moment it’s an alpha release and can be a little buggy. Popcorn Maker is powered by another bit of JavaScript, dubbed butter.js, which could be used to add Popcorn editing features to any desktop video editing software, though as of this writing we aren’t away of any popular video editing apps that use it.

To get started making Popcorn movies head on over to MozillaPopcorn.org, grab the source code, read the documentation, check out the plug-ins and try Popcorn Maker. Also note that, if you prefer, Popcorn can be checked out through GitHub.

Homepage photo: jennie-o/Flickr

See Also:

File Under: HTML5, Multimedia, Web Standards
Nov
9
2011

What the Death of Mobile Flash Means for the Web

By

Adobe Software has let slip that it plans to abandon its Flash Player for mobile web browsers. Instead, the company will refocus its mobile efforts on web standards like HTML5, along with tools like Adobe AIR, which allows developers to convert Flash content into native mobile applications.

The move comes as something of a surprise given how vigorously Adobe has defended mobile Flash in the past. Lately, however, Adobe has been proposing new web standards and even bought the non-Flash mobile development tool PhoneGap, both of which indicate that Adobe is looking toward a future without Flash.

Indeed, while Adobe’s plans affect only mobile Flash at the moment, the sudden about-face does not bode well for Flash on the desktop. Mobile devices are the fastest growing means of connecting to the web; what doesn’t work on mobile devices will soon not be a relevant part of the web at all.

In abandoning mobile, Adobe is effectively admitting that Flash has no future on the web.

That doesn’t mean Flash will disappear overnight. Nor does it mean that Flash will ever disappear for developers interested in using it. It just means that when it comes to deploying Flash applications, the web won’t be a realistic option. Instead, Flash developers of the future will convert their Flash code into Android, Windows Mobile or iOS apps using Adobe AIR’s conversion tools.

Web developers, on the other hand, will likely abandon Flash if they haven’t already. Without a reliable way to serve Flash content to mobile devices, its web presence will likely continue to decline. Of course the demise of Flash has been inevitable for some time — after all, much of HTML5 was specifically designed to give developers a means of replacing Flash dependencies with native tools — but Adobe’s decision to abandon mobile devices should send a clear message to any developers who haven’t yet read the writing on the wall: Mobile is the future of the web and Flash isn’t part of it.

In the short term, Adobe is merely admitting what most developers already know; there are only two ways to develop for mobile devices: using the web and HTML5 or building platform native apps.

To choose web-based Flash apps over either of these options would mean consciously limiting your app’s audience. Given that neither Apple’s iOS nor Microsoft’s Windows Phone 7 supports Flash (nor for that matter will Microsoft’s Windows 8 Metro), developing web apps that relied on Mobile Flash meant targeting only Android and Blackberry users. Adobe’s decision to abandon Flash for Mobile browsers is simply a pragmatic acceptance of the existing development landscape.

Similarly, while we don’t expect it to happen overnight, eventually Adobe will probably abandon Flash Player for the desktop as well — why continue developing a product when very few are using it? The AIR platform and its Flash-based tools for building native mobile apps will still be around to sell the Flash development tools (which is, after all, how Adobe makes money). Adobe simply won’t have any great need to continue pushing Flash on the web.

While some web standards advocates might see the eventual demise of Flash Player as a good thing for the web, we’re not so sure. Web standards were created to ensure that sites and apps work no matter what browser or device you’re using. Web standards were not created for — and have not historically been very good at — driving innovation on the web.

Innovation on the web has more often come from individual vendors — browsers, device makers and, yes, Flash. Flash laid many of the so-called cowpaths that HTML5 is paving in open standards. The audio and video tags for embedding media, the canvas element for animation, and the websockets protocol for communications are just a few of the things Flash helped to popularize on the web. That’s not to suggest that a web without Flash will want for innovation, but it certainly won’t be richer for Flash’s absence when that day arrives.

Photo: Laurence Olivier as Hamlet

See Also:

Tags:
File Under: Multimedia, Web Standards
Oct
28
2011

Getting Started with Scalable Vector Graphics (SVG)

By

Scaling options for SVG images

Scalable Vector Graphics (SVG) have long been the ideal way to create images that need to scale without distorting. For example, SVG is a great format for an icon or logo that needs to be displayed at several sizes without pixelation or other distortion.

Unfortunately SVG’s usefulness on the web has always been curtailed by limited support in popular browsers. However, that’s changed recently with the release of Firefox 4 and Internet Explorer 9, both of which join Opera, Chrome and Safari in offering native support for SVG.

If you’d like to know more about SVG, how to use it and why you’d want to, Microsoft’s Jennifer Yu recently posted a nice overview on how to get started with SVG over at the IEBlog.

Yu covers the basic use cases for SVG, including scalable logos, selectable text within images (great for charts, infographics and the like) and dynamic graphics (for example, route lines overlayed on map tiles).

One thing you won’t get from Yu’s article is info on how to embed your SVG images in HTML. For most browsers you can simply use <img>, though for Firefox 3.6 and below, along with some other older browsers, you’ll need to use <object> (or <iframe>). It’s also now possible to write SVG inline with your HTML, though as Yu points out you’ll need to use the HTML5 doctype for that to work.

Keep in mind that if your site has a lot of traffic from older versions of IE (and that means anything prior to IE 9) you’ll need to have some sort of fallback in place. If you don’t mind involving some JavaScript in the equation, the Raphaël library allows you to easily create and work with SVG objects via JavaScript and will fallback to VML for IE 6+ and other legacy browsers.

For the record, yes, there is a certain irony in learning about SVG from Microsoft given that IE has long been the only web browser without SVG support, but don’t let that stop you from reading through an otherwise quite thorough and informative overview of SVG.

See Also:

Tags:
File Under: Multimedia
Sep
28
2011

Developer Turns Geocities Archive Into a ‘Digital Pompeii’

By

For a brief time in the early ’90s Geocities was the web. And, for all its shortcomings, Geocities did nevertheless usher in much of what makes the web great — that anyone can create nearly anything.

When Yahoo picked up Geocities for $3.5 billion in 1999 many called it a bargain, but a mere 10 years later the web had moved on and Yahoo shut down and deleted Geocities. The Archive Team stepped in at the last minute and managed to preserve some 650GB worth of Geocities, which lives on as a Bittorrent file. Like most of us you probably find that vaguely comforting, but chances are, you aren’t seeding that file. In fact, we haven’t heard of anything coming out of the Archive Team’s efforts, until now.

Developer and designer Richard Vijgen has put together what looks like a very cool visualization of the Geocities data. Given that Geocities split websites into neighborhoods (usually based on content), nicknamed URLs streets and even called its users “homesteaders,” Vijgen decided to use that metaphor to construct The Deleted City.

Vijgen calls The Deleted City, “a digital Pompeii … that allows you to wander through an episode of recent online history.”

[The Deleted City] depicts the file system as a city map, spatially arranging the different neighborhoods and individual lots based on the number of files they contain.

In full view, the map is a data visualisation showing the relative sizes of the different neighborhoods. While zooming in, more and more detail becomes visible, eventually showing individual html pages and the images they contain.

So far there doesn’t seem to be anywhere to actually access The Deleted City for yourself. Vijgen tells our friends at Wired UK, “The project was intended to be a touch screen installation to be exhibited in a gallery setting. I’m currently looking for a suitable setting to show it.”

In the meantime you’ll have to make do with the video walkthrough above.

See Also:

Tags: ,
File Under: HTML5, Multimedia
Sep
21
2011

Adobe Hopes Impressive 3-D Graphics Can Save Flash 11

By

Adobe has announced Flash Player 11, a significant update for the company’s beleaguered browser plugin. Flash Player 11 will give Flash developers access to an impressive set of hardware-accelerated 3-D graphics tools.

Alongside Flash 11 Adobe has also announced version 3 of the Flash-based runtime, Adobe Air.

Flash Player 11 and Air 3 are scheduled for release in early October. Adobe hasn’t set an exact date, but the company’s annual Max conference, which runs October 1-5, seems a safe bet.

Adobe’s Flash browser plugin has taken a beating in the last few years, losing many of its traditional web roles like video or animations to the new features in HTML5. Additionally, the mobile world has not been kind to Flash. You won’t find the plugin on any Apple products, nor will it be part of the upcoming Windows 8 Metro platform.

While there are no doubt many Webmonkey readers who would like to see Flash disappear forever, Adobe continues to push Flash in directions which, so far, HTML5 can’t compete.

For this release that means the world of online 3-D graphics rendering. Flash 11 isn’t trying to compete with HTML5 or even reclaim its former strongholds like video (though for streaming DRM video it remains the only real choice). Instead Adobe is going after the burgeoning online gaming market with an impressive new 3-D rendering API.

The new Stage 3D rendering in Flash 11, nicknamed Molehill, is a very low level API for fully hardware accelerated 2-D and 3-D graphics. Adobe claims that Molehill can “efficiently animate millions of objects on screen, smoothly rendered at 60 frames per second.” The end result, according to Adobe, is “console-quality games” in the browser.

Indeed the videos Adobe has released showing off the new Molehill-based graphics are impressive.

Of course one day WebGL may well mean that Flash 11′s 3-D performance is possible without the Flash plugin. Unfortunately Internet Explorer still lacks WebGL support and WebGL’s performance varies considerably from browser to browser. For now Flash 11 looks to have the edge in 3-D graphics, whether or not that will last remains to be seen.

3-D Graphics aren’t the only thing new in this release, Flash 11 is now a 64-bit application on Windows, OS X and Linux. Adobe has also announced the release of Air 3.0 with improved tools for installing Air and converting Air apps to native iOS and Android applications.

If you hate Flash the latest release probably isn’t going to change your mind. Nor is it likely to convince Apple or Microsoft that Flash should be apart of their OSes. But if you’re a game developer who’d like to build console-quality games on the web, Flash 11 is your friend.

See Also:

Tags: ,
File Under: Browsers, HTML5, Multimedia
Sep
16
2011

Metro-style Internet Explorer 10 Ditches Flash, Plugins

By

Windows 8 will have two versions of Internet Explorer 10: a conventional browser that lives on the legacy desktop, and a new Metro-style, touch-friendly browser that lives in the Metro world. The second of these, the Metro browser, will not support any plugins. Whether Flash, Silverlight, or some custom business app, sites that need plugins will only be accessible in the non-touch, desktop-based browser.

Should one ever come across a page that needs a plugin, the Metro browser has a button to go to that page within the desktop browser. This yanks you out of the Metro experience and places you on the traditional desktop.

The rationale is a familiar one: plugin-based content shortens battery life, and comes with security, reliability, and privacy problems. Sites that currently depend on the capabilities provided by Flash or Silverlight should switch to HTML5.

Microsoft has been vigorously promoting HTML5 for the last year and a half as the best way of providing rich interactivity on the Web. HTML5 potentially has reach far beyond that of Flash, since it can target both conventional browsers and closed ecosystems (such as iOS) alike. However, until now, Microsoft’s messaging has been tempered somewhat: use HTML5 when you can, but if you can’t—if you need support for DRM-protected media streaming, for example—then it’s reasonable to switch to an alternative, plugin-based technology.

With Windows 8, however, those reasonable decisions to use Flash or Silverlight will now be heavily penalized. Technically, there’s nothing wrong with the desktop browser, of course; the rendering engine and performance will be identical between both Metro and desktop. But the experience will be substantially inferior. The desktop browser isn’t designed for touch inputs, meaning that users will either have to switch to a mouse and keyboard, or fumble around with an interface that wasn’t built for fingers. The switch to the desktop browser also appears to discard things like back button history and current page state.

This puts the Metro browser in a peculiar position. Microsoft has positioned tablets as merely a different kind of PC. That, the company argues, affords capabilities and features not possible on iPad-style devices. But PCs have browser plugins—more generally, they have the ability to use the right technology for the job. If Metro doesn’t include that flexibility, that could be seen as diminishing the “PCness” of the platform.

HTML5 still isn’t a total replacement for plugin technologies, either. The gap is certainly narrowing: Web Sockets, Web Workers, built-in support for webcams and microphones, and more, are all coming to HTML5 browsers (or are available already), and these features will obviate the need for plugins for many applications. But certain corners are likely to remain; DRM-protected video, for example, might forever be impossible in HTML5, and while many people find DRM distasteful, many broadcasters feel they have little choice but to use it.

The solution to this conundrum on the iOS platform has been the app: companies like Netflix and the BBC have applications to watch video on these devices. The result is that in the desire to push an open, plugin-free Web, companies are being forced to migrate away from the Web entirely. Silverlight developers, at least, will have an easy migration path available to them: the new Metro development environment, used for producing native Metro applications, borrows heavily from Silverlight, and making the switch from an in-browser plugin-based application to a standalone Metro application should be relatively easier. Flash developers will have to wait to see what tools Adobe delivers.

HTML5 design and developer tools also remain weak, though this situation is improving with the creation of products like Adobe Edge.

With Microsoft’s promotion of HTML5, and the precedent set by iOS, the decision to get rid of plugins in the Metro browser is perhaps unsurprising. But it’s not clear that this will truly help Windows 8; the awkward user experience penalizes users who, for no fault of their own, need to use plugins, and detracts from Windows 8′s PC claims. A switch to a more HTML5-powered Web will happen regardless—does Microsoft really need to force the issue like this?

This article originally appeared on Ars Technica, Wired’s sister site for in-depth technology news.

Tags: , , ,
File Under: Multimedia, Web Apps
Aug
15
2011

Make Waves with WebGL Demo ‘Water’

By

WebGL Water Running in Chromium 14Web Developer Evan Wallace has released one of the more impressive WebGL demos we’ve seen.

Provided you’re using a capable browser (Firefox, Chrome or Safari), head on over to Wallace’s WebGL Water demo and be amazed.

If you stay abreast of the latest and greatest in web browsers you’ve probably heard of WebGL, an API for adding hardware-accelerated 3D rendering to the HTML5 Canvas tag. The WebGL API is based on OpenGL, a desktop graphics standard, which means WebGL will run on many different devices — your laptop, your phone, even your TV.

Firefox 6+, Google Chrome and the latest version of Apple’s Safari all support WebGL (in Safari you’ll need to enable WebGL under the developer tools menu). There’s also an experimental build of Opera with WebGL support.

If you’re stuck with Internet Explorer, Vimeo user Ivan Enderlin posted this video which shows Firefox rendering the WebGL Water demo.

WebGL water, by @evanwallace from Ivan Enderlin on Vimeo.

Also, be sure to check out rest of Wallace’s website for some other WebGL demos, games and experiments.

See Also:

Tags: ,
File Under: HTML, HTML5, Multimedia, Software & Tools, Visual Design, Web Standards
Aug
2
2011

Review: Adobe’s Edge Offers Web Animation Sans Flash

By

Adobe has released a preview version of a new HTML animation tool dubbed Edge. Together with Wallaby, Adobe’s Flash-to-HTML conversion app, Edge is part of Adobe’s push to remind the web that the company is more than just its much-maligned Flash plugin.

Edge has been released as a free, beta public preview and is available for download through the Adobe Labs website.

Edge is not intended to replace Adobe Flash. At least not in the short term. Instead Edge is aimed at Flash animators looking for a visual way into the world of HTML, CSS and JavaScript-based animations, particularly the relatively simple animations often currently found in Flash-based advertisements.

HTML, especially some of the new elements in HTML5, combined with CSS 3′s animation syntax offers web designers a way to create sophisticated animations without requiring users to have the Flash plugin installed. That’s a good thing since no iOS user is going to have the Flash plugin.

Unfortunately, HTML, CSS and JavaScript don’t offer any easy way to create animations. Developers comfortable writing raw code in text editors have, thus far, been the driving force behind web standards-based animation. Designers and animators accustomed to development tools like Flash, which offers visual layouts and drag-and-drop animation, have been left out of the web standards animation trend.

Edge is Adobe’s attempt to bring the good parts of the Flash development app — visual animation tools, keyframe-based timelines and a stage where you can drag-and-drop objects — to the world of web standards-based animation. But of course, instead of publishing your animations as Flash files, Edge publishes them as web standard HTML, CSS and JavaScript.

Like Hype (see our review) and other HTML animation apps out there, Edge looks and behaves much like Adobe’s Flash development environment with a timeline, keyframes and editing tools that will look familiar to Flash developers. If you know how to use Flash, you’ll be up to speed with Edge in no time.

The Edge interface should look familiar to anyone who has used Flash.

Despite Adobe’s marketing efforts, there’s almost nothing about Edge that is HTML5. Adobe is hardly alone in its misleading use of the HTML5 moniker. Both Hype and Sencha Animator claim to be “HTML5″ animation apps and, like Adobe, neither generates much of anything that isn’t in the HTML4 spec.

In its current form Edge will export your animations using div tags, some CSS animations, a fair bit of JSON and a combination of jQuery and some custom JavaScript to hold everything together.

Why go with div and CSS-based animations when there’s Canvas and SVG? Well, for one thing, this is a very early preview and Adobe claims that eventually Edge will support canvas and SVG (in fact Edge already has some support for importing SVG file). A Mozilla developer raised this question in the Adobe forums and Adobe’s Mark Anders chimed in to say that, “we seriously considered canvas, but current performance on mobile browsers (especially iOS) is very bad.”

Anders goes on to note that iOS 5 will remedy much of iOS’s canvas performance woes, and Adobe is clearly looking for developer feedback on where to go with Edge. If you’ve got strong feelings about where Edge should focus its efforts, head over to the forums and let Adobe know.

While Edge is a long way from a finished product, this early release shows considerable promise. If you’re a Flash developer looking to expand your repertoire to include HTML, CSS and JavaScript animations, Edge just might help. For a nice overview of how to use Edge be sure to check out Mark Anders’ Edge overview movie on Adobe TV.

See Also:

Tags: , , ,
« OLDER POSTS