In this post I’ll talk about all the caveats I faced while creating a video recorder to work in the web browser.

Initially I tried to use Java, using the previous Java multimedia player, but then I had to give up and used a Flash based solution.

It was requested by the same marketing agency, to an online English school, and the video should be recorded using the customer webcam, running from their web system.

Additionally, the video recorder was required to capture audio too, of course.

Part I: Trying with Java

The first thought was to use JMF again, as it has video capturing capabilities. I’ve found some Sun classes that runs on top of JMF and display on real-time the captured video (JMF alone is not able to do that).

So far, so good, but what is odd: it relies on native libraries (.dll ou .so) being intalled in customer desktop.

Remember that we’re talking about an app running in the web browser, which means I should use Java applets. So, I’ve made a signed applet (which the user will have to accept in a security warning), and then the applet will detect if the native libraries was missing. If not installed, customer will be redirected to a installer page.

With all the extra steps, the marketing agency was not happy: they made clear their customers will be the most newbies in the Earth, and the current solution will produce too many friction.

Additionally, more technical difficulties: to record audio, it was not enough the signed applet. It’ll require a .java.policies file being installed in the customer machine too. Even with this, I was not able to use the applet to simultaneously record video and audio, while it works using only one of them.

So, I tried with a JavaWebStart version of the app, and this time it worked properly, but then the recorder was not embedded in the page, what was disapproved by the agency.

I.e.: with JavaWebStart + native libraries, it worked. But still lacking video compression (the app was able to record only raw formats, RGB and YUV). So you need compression, you’ll need to add by yourself.

Searching for more solutions, I found other two: buy a proprietary applet library that works on Windows only (from Vimas Technologies); or start from the ground using Flash.

Part II: Using Flash

As using Java I was not able to find a friendly solution matching the agency expectation, I started to research how to make the recorder using Flash.

I used Flash so many years ago (around 1999), on Flash 3 and 4 times, to make simple animations.

And additionally, I’m not a big Flash fan, as we can replace most of Flash usages using more simple solutions, most of the times based only on HTML/JavaScript. But this is not the case: until this date, HTML/JavaScript cannot record audio and video from the user, while probably this will works in the future.

I’ve found few examples teaching to use ActionScript with a Camera object to use the webcam (simple, not?), then I read that to save the video in a remote server, I’ll need to rely in a host with Flash Media Server support (from Adobe).

After search a bit in some forums, I found a lot of positive comments about Influxis hosting service (and they’re a Adobe partner).

Additionally, another advantage of this solution: the player can directly record videos in the .flv format, using compression in h.264, which will save a lot of bandwidth.

The agency purcharsed Influxis service, I’ve configured the account, and then using a NetStream object, I was able to stream and record the video directly in the server (no local .flv files). And using the same object, I can play the recorded video too, just connecting the recorded video to a Video object.

Then I just added some UI to interact with the customer (buttons to start, stop, pause), using the available events.

All a way more simple than I’ve expected. But then, I faced something that I was really not expecting: the ActionScript documentation messing.

Aside available in 3 versions, ActionScript 2 and 3 are really different. Additionally, most of the code that I used to make the player, was not documented in Flash help. Only online, but in several different pages, all of them with different documentation. And a lot of stuff was not available at all in the documentation (I found them only in forums).

About 70% of the final code was based on this searching-throw-the-web-then-test process, due lack of official documentation.

Additionally, one worth to mention non documented limitation (I’ve spent 4 hours to realized this): the Flash object requires to have a minimum width and height in the page, enough to display the dialog confirmation asking about the webcam usage. If the width and height were minor than this dialog, the recorder will not work.

So, at the end of this process, it worked. And I hope these notes can help others.