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 3.0.0.477)
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
pnlSnapshot.removeAllChildren();
var snapshotHolder:UIComponent = new UIComponent();
var snapshot:BitmapData = new BitmapData(320, 240, true);
var snapshotbitmap:Bitmap = new Bitmap(snapshot);
snapshotHolder.addChild(snapshotbitmap);
pnlSnapshot.addChild(snapshotHolder);
snapshot.draw(SharedVideo);
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);
nc.call(“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 org.red5.io.amf3.ByteArray
import javax.imageio.ImageIO
import java.io.ByteArrayInputStream
import java.awt.image.BufferedImage
public String Save_ScreenShot(ByteArray _RAWBitmapImage) {
// Use functionality in org.red5.io.amf3.ByteArray 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];
_RAWBitmapImage.readBytes(c);
// 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());
try{
BufferedImage JavaImage = ImageIO.read(db);
// 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) {log.info(“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.