Using Red5 and Flex or(Laszlo) Save Video Images To Server

Posted: May 21, 2008 in Flash, Open Source

Here is a small tutorial telling how to save video preview images from Flex client to Red5 server.

The work is to take a snapshot of a video stream from the client and some how get it to be a saved image on the server. There are ways to acheive this using ffmpeg or using a scripting language in combination with Red5. But this is the simplest one as it does not require any additional library. Flex does everything.

You can get a PNG or JPEG file saved to the Red5 server the following way-

Client Side (Development took place on Free flex sdk

So lets assume that you already have a netconnection to your serverside application. You also have a camera opened and attached to a UI component in the browser. I have it so when a button called “Take sceen shot” is clicked the function “handleScreenShot” is called.

NOTE: SharedVideo is a public var of type Video. When I attached the video from the camera to the UI, I copied it into Shared video.

private function handleScreenShot():void {

// Clear out any previous snapshots


var snapshotHolder:UIComponent = new UIComponent();

var snapshot:BitmapData = new BitmapData(320, 240, true);

var snapshotbitmap:Bitmap = new Bitmap(snapshot);




pnlSnapshot.visible = true;

// Here is how you encode the bitmapimage to a png or jpeg ByteArray and send it to the server

//var jpgEncoder:JPEGEncoder = new JPEGEncoder(75);

//var jpgBytes:ByteArray = jpgEncoder.encode(snapshot);

var pngEncoder:PNGEncoder = new PNGEncoder();

var pngBytes:ByteArray = pngEncoder.encode(snapshot);“Save_ScreenShot”, null, pngBytes);


Server Side

Ok now the server side code for the function “Save_ScreenShot”. I have this right inside the main java file of my Red5 applicationNOTE: You must import the following classes.

import javax.imageio.ImageIO
import java.awt.image.BufferedImage

public String Save_ScreenShot(ByteArray _RAWBitmapImage) {
// Use functionality in to get parameters of the ByteArray
int BCurrentlyAvailable = _RAWBitmapImage.bytesAvailable();
int BWholeSize = _RAWBitmapImage.length(); // Put the Red5 ByteArray into a standard Java array of bytes
byte c[] = new byte[BWholeSize];

// Transform the byte array into a java buffered image
ByteArrayInputStream db = new ByteArrayInputStream(c);

if(BCurrentlyAvailable > 0) {
System.out.println(“The byte Array currently has ” + BCurrentlyAvailable + ” bytes. The Buffer has ” + db.available());
BufferedImage JavaImage =;
// Now lets try and write the buffered image out to a file
if(JavaImage != null) { // If you sent a jpeg to the server, just change PNG to JPEG and Red5ScreenShot.png to .jpeg
ImageIO.write(JavaImage, “PNG”, new File(“Red5ScreenShot.png”));

} catch(IOException e) {“Save_ScreenShot: Writing of screenshot failed ” + e); System.out.println(“IO Error ” + e);}

return “End of save screen shot”;

This is one way, You can also make it working for the other way i.e. getting images from server to client.

Thanks to Charles Palen for posting the snippet of this code in Red5 community.

  1. LinkList…

    I thought i open a thread just for interesting links, i will update this from time to time.

    AMF3 Adobe Message Format 3
    AMF3 – reference PDF

    Darron Schall web blog

    Atomicparsley – good site for decrypting Atoms

Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s