Chụp hình từ webcam, lưu về server sử dụng Flex và Red 5

Đây là bài hướng dẫn làm thế nào lưu hình ảnh webcam từ Flex lên  Red5 server.

Công việc của chúng ta là làm sao lấy được snapshot của video stream từ client và làm sao để lưu được image lên phía server. Có nhiều cách làm được điều này như là sử dụng ffmpeg hoặc là sử dụng một ngôn ngữ nào đó kết hợp với Red5. Nhưng có một cách cực kỳ đơn giản, chúng ta ko cần sử dụng thêm bất cứ thư viện ngoài nào khác.

Chúng ta có thể lưu hình loại PNG hoặc là JPEG tùy theo ý chúng ta.

Phía client (Flex)

Chúng ta phải có NetConnection kết nối đến Red5(Server-Side). Chúng ta cũng phải có camera được cắm vào máy và được attached vào UI component trong trình duyệt. Chúng ta có một cái nút trên ứng dụng phía client. Chúng ta gọi cái nút đó là “Take a snapshot image”. Khi chúng ta click lên cái nút đó, hàm “handleScreenShot” sẽ được gọi.

Chú ý: SharedVideo phải là một biến public thuộc lớp Video. Khi chúng ta attached video từ the camera vào UI, chúng ta copy nó vào 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;
  // Encode to 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);
}

Phía server (Red5)
OK. Bây giờ phía server code (ở đây code dùng ngôn ngữ Java bạn nhé, vì red5 được viết bằng ngôn ngữ Java), chúng ta có một hàm “Save_ScreenShot”.

Chú ý: phải import các class sau:

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";
}

Bạn cũng có thể dùng cách này để làm được chuyện khác, ví dụ như lấy những tấm hình từ phái server về cho client.

Cám ơn Charles Palen đã post những dòng code này ở Red5 community
Enjoy coding