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:

• Main.mxml
• ImageRenderer.mxml

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.