Creating Thumbnails From A Video With Flex

This technical note shows how to create a simple application in Flex to create thumbnails from a video as it plays. Unfortunately it’s not as simple as just writing the client code to generate a thumbnail from a video! Presumably because of DRM, changes must be made on the server to enable the client to access the raw video data.

What follows are the changes that must be made to both Flash Media Server (FMS) and Wowza Media Server and some sample client code. Restart the server once the changes have been made.

Flash Media Server

This section assumes that the application’s root directory is located at: /opt/adobe/fms/applications/vod/. If you are running FMS on Windows (why?) then the correct location will be wherever you installed it; the relative directory structure will be the same.

Either of the following solutions will work:

1) In the application’s root directory, modify Application.xml and add the following:

<Application>
  <Client>
    <Access>
       <AudioSampleAccess enabled="true">/</AudioSampleAccess>
       <VideoSampleAccess enabled="true">/</VideoSampleAccess>
    </Access>
  </Client>
</Application>

2) Create a file main.asc in the application’s root directory then add the following:

application.onConnect = function (client) {
	client.videoSampleAccess = “/”;
	client.audioSampleAccess = “/”;
	application.acceptConnection(client);
}

Wowza Media Server

This section assumes that the application’s root directory is: /Library/WowzaMediaServer/conf/vod/.
The changes are similar to the ones above for FMS. Again, either of the following will get the job done:

1) Open Application.xml and add the following:

<Client>
  <IdleFrequency>-1</IdleFrequency>
     <Access>
          <StreamReadAccess>*</StreamReadAccess>
	  <StreamWriteAccess>*</StreamWriteAccess>
          <StreamAudioSampleAccess>*</StreamAudioSampleAccess>
	  <StreamVideoSampleAccess>*</StreamVideoSampleAccess>
          <SharedObjectReadAccess>*</SharedObjectReadAccess>
	  <SharedObjectWriteAccess>*</SharedObjectWriteAccess>
     </Access>
</Client>

The important bit is highlighted in bold.

2) Create a custom Wowza module, which means some Java coding. There are instructions on the Wowza site for how to do this. The relevant bit of code looks like this:

public void onConnect(IClient client, RequestFunction function, AMFDataList params) {
    client.setStreamAudioSampleAccess(IClient.AUDIOSAMPLE_ACCESS_ALL);
    client.setStreamVideoSampleAccess(IClient.VIDEOSAMPLE_ACCESS_ALL);
}

Client

Once the changes have been made to the server all you have to do now is write the client bit. Fortunately, here’s one I made earlier:

Unfortunately I don’t have access to a publicly available streaming server so you’ll just have to take my word for it that the example works. I did test it locally first 🙂

The “interesting” bit is the function createThumbnail() in Main.mxml; the rest is just boiler-plate.

And that ladies and gentlemen is how to create thumbnails from a video in Flex. Interestingly enough you can do the same thing using the HTML5 video tag and the canvas API but I’ll leave that for another day.

7 thoughts on “Creating Thumbnails From A Video With Flex

  1. Raghav Vikram

    Hi, Thanks for tutorial, but it seems incomplete. i understood the Server Part. But how to do it in client. you just posted two files, but how to use them. How to show thumbnail on website now.  Can you explain more

  2. Simon Buckle

    To build the client, create a new Flex project in Adobe Flash Builder; I was using version 4 at the time. Drop the files (Main.mxml, ImageRenderer.mxml) into the src/ directory then build the project. This will create the SWF file, HTML etc. Alternatively, you can build the project using the mxmlc compiler. Hope that helps.

  3. Andypoystila

    this is great but like all other posts I have found it does not address live h264 streams. thank you for the great tutorial

  4. Simon Buckle

    Did you try it with a live stream? I just did and it worked fine for me. I set-up a live stream using QuickTime Broadcaster and Wowza and was able to create thumbnails of the stream while it was playing. All the code does is create a bitmap image from whatever is being displayed at the time. The “type” of video stream is irrelevant.

  5. Prabhu2007

    Hi, Could you please tell me how to do the same modification for RED5 server.

    Thanks in advance

Leave a Reply