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.
- Webcam selection (don’t get me started on Windows webcam drivers)
- 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.
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:
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?