[Red5] Easier way to get images to the server (and probably vice versa) using Red5 and Flex

[Charles Palen]

I have seen activity on the list about getting images from the server to the
client (for a video preview image) lately and wanted to post information
about how to do it in reverse (image from the client to the server).  I am
using the latest version from the trunk.

I recently had to take a snapshot of a video stream from the client and some
how get it to be a saved image on the server. I searched around and found a
lot of information about using ffmpeg or using a scripting language in
combination with Red5. However, thanks to Flex and you don't have to do
this. I don't have time to write an all inclusive tutorial, but I just
wanted to post snippets in case anyone else is looking to do this. You can
get a PNG or JPEG file saved to the Red5 server the following way.

Client Side (Im using the 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);


}


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

org.red5.io.amf3.ByteArray   // Thanks to Joachim for writing this class
javax.imageio.ImageIO
java.io.ByteArrayInputStream
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";
 }


I hope some of you find this helpful.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://osflash.org/pipermail/red5_osflash.org/attachments/20080521/16db7aae/attachment.html