Upcoming Webinar: Jump Start Your Automated Testing Efforts With Record & Play Save Your Seat

Blog We love to talk!

Jan Tue

Web Development Can Be Art – Literally

  •  1-22-2013

A few days ago the Net.Art project OneYouNeed came to me with two rather special cross-browser issues.

The project aims to create a unique music video containing single frames made by people all around the world. If you have a webcam handy try it, it’s really funny.

To implement the needed functionality across all major browsers, OneYouNeed faced two different problems which I would like to discuss in the following.

Cross-browser webcam access

To capture webcam pictures, you obviously need to access the webcam in some way. Flash and the HTML 5 Webcam API come to mind. Unfortunately, the preferred way (in my opinion) was blocked because of poor browser support. While Flash runs on a wide array of browsers including Internet Explorer 8, the HTML 5 Webcam functionality is only available in Chrome and Firefox.

Settling on a Flash solution, we looked into quite a few different possibilities to integrate nicely with JavaScript and the PHP backend. The jQuery webcam plugin does the trick quite nicely. Moreover, it’s instantly compatible with all major browsers. The used functionality includes:

  • Webcam selection (don’t get me started on Windows webcam drivers)
  • Picture capturing using JavaScript
  • Picture processing using PHP

Live and transparent webcam picture

The next cross-browser problem came into view only after we switched away from our development browser and friend chrome. Because the participants need to recreate a frame as accurate as possible we wanted to display the live webcam picture 50% transparent over the original frame to give the user some perspective.

To do this, we crossed our fingers and simply added an opacity: 0.5 to the flash object tag. To our surprise this did work nicely in chrome but not in any other browser. This is actually a Flash security feature: It doesn’t allow webcam access if the element is only partly visible. Why this is not present in chrome is beyond me.

So to get the transparency in all other browsers we added the opacity using JavaScript after the user allowed webcam access. This was done in the jQuery webcam plugin “debug” event.

Last but not least you need to add a parameter to the flash object to get this working in Internet Explorer:

<param name=”wmode” value=”opaque”>

The final result works quite nice and it’s fun to see and create the pictures:

 

Summary

Until the Webcam access is possible in pure JavaScript and HTML 5 across all browsers, Flash will be the best method in my opinion. Unfortunately, this puts every mobile device (iPhone, iPad, Android) outside the reach of this solution.

Shameless Plug: Of course we used BrowseEmAll to test the website across all major browsers. Did you know that do-gooders (non-profit, charity, educational organization, art projects or open-source contributor) can get a free license just by asking?

 

No Comments

Leave a Reply

Your email address will not be published.