Image sent by HTTP post

Published January 22, 2017 11:33:01 AM  |  Last update January 22, 2017 11:35:23 AM

HTTP Message Body is the data bytes transmitted in an HTTP transaction message following immediately the headers. Compared to GET HTTP request method, the method using POST has an advantage that the data sent with HTTP Message Body are not limited in size. This makes possible the web applications where there is significantly large amount of data needs to be sent to server via HTTP.

In the web camera application, tnNetcam which is available at http://www.tinyray.com/netcam, that I developed to allow online image capture using computer webcam. The flash applet, which works at client side, is responsible for image acquisition and encoding. The captured images require to be uploaded to server for security purpose. Server to save image may be the one at http://www.tinyray.com/netcam where each user has a private image folder, or a server by the user himself.

  1. Send image to server– to send image to server, my flash applet uses HTTP POST request where the image content is attached to HTTP Message Body. Following is the AS3 script used in the applet.
    var byteArray:ByteArray = JPEG.encode( <the-image> );
    // prepare a HTTP POST request object
    var netServer = 'http://www.tinyray.com/netcam?img=lnt&idx=1&imgno=5';
    // where: 'img' is for image chanel, 'idx' is for image index, 'imgno' is for #images will be uploaded
    var saveJPG:URLRequest = new URLRequest(netServer);
    saveJPG.requestHeaders.push(new URLRequestHeader("Content-type", "application/octet-stream"));
    saveJPG.method = URLRequestMethod.POST;
    saveJPG.data = byteArray;
    // invoke the request
    var urlLoader:URLLoader = new URLLoader();
    urlLoader.addEventListener(Event.COMPLETE, <sendComplete-function> );
    urlLoader.addEventListener(IOErrorEvent.IO_ERROR, <errorHandler-function> );
    urlLoader.addEventListener(SecurityErrorEvent.SECURITY_ERROR, <securityErrorHandler> );
    urlLoader.load(saveJPG);
    
  2. Save image on server– image from client needs to be saved by server script running on the server where the image is sent to. Server script is responsible for checking information regarding the image and determination of saving image per user request accordingly. My server at www.tinyray.com/netcam is a windows-based one, using the following C# script to save image:
    // note that the flash applet should provides the following information in query string parameters
    // 'img' = image chanel, 'idx' = image index, 'imgno' = number of images will be uploaded
    string retMsg = "-Fail Bad request";
    if (Request.QueryString["imgno"] != null && Request.QueryString["img"] != null && Request.QueryString["idx"] != null) {
        // this is a valid request
        string imgDIR = "<some folder>";
        int imgIdx, imgNo;
        try {
            imgIdx = int.Parse(Request.QueryString["idx"]);
            imgNo = int.Parse(Request.QueryString["imgno"]);
        }
        catch { imgIdx = 0; imgNo = 0; }
        retMsg = (imgIdx < imgNo - 1) ? "+OK Image was successfully saved" : "+OK Images all saved. Thank you";
        if (imgIdx < imgNo) {
            string chanelID = Request.QueryString["img"].ToString(); // as file prefix
            string filename = string.Format("{0}/{1}-{2:00000}.jpg", imgDIR, chanelID, imgIdx + 1);
            // save the RAW data which are the picture,
            try {
                Request.SaveAs(filename, false);
            }
            catch { retMsg = "-Fail Could not save the image"; }
        }
    }
    // response
    Response.Clear();
    Response.ContentType = "plain/text";
    Response.Write(retMsg);
    Response.End();
    
  3. Save image on your own server– You may have tnNetcam sent captured images to your own server by entering the URL of the server under "save to server" on tnNetcam webpage. As mentioned in the section 2, you need a server script to save images sent from tnNetcam. If your server supports ASP.NET, then please use the script in section 2. Otherwise, please see my PHP script below. Please note that the HTTP Message Body in request made by my flash applet contains the entire image, just save this content to an image file of type JPG. The PHP system variable "$HTTP_RAW_POST_DATA", which will be deprecated soon, contains the raw POST data that you can use. However, the system stream "php://input" gives another way to access these data, which is used in my script.
    $retMsg = "-Fail Bad request";
    if ($_GET["imgno"] != null && $_GET["img"] != null && $_GET["idx"] != null) {
        // this is a valid request
        $imgDIR = "<some folder>";
        try {
            $imgIdx = intval($_GET["idx"]);
            $imgNo = intval($_GET["imgno"]);
        }
        catch (Exception $e) { $imgIdx = 0; $imgNo = 0; }
        $retMsg = ($imgIdx < $imgNo - 1) ? "+OK Image was successfully saved" : "+OK Images all saved. Thank you";
        if ($imgIdx < $imgNo) {
            if (!file_put_contents( file_get_contents('php://input'),
                                    sprintf("%s/%s-%.5d.jpg", $imgDIR, $chanelID, $imgIdx + 1) )) {
               $retMsg = "-Fail Could not save the image";
            }
        }
    }
    // response
    ob_clean();
    header('ContentType', "plain/text");
    echo $retMsg;
    exit(0);
    

Using your own server, you may have unlimited number of images captured by tnNetcam, but using TINYRAY server, the maximum numbers of images captured each time is just 5.

web builder  tnWeb.1.54 – powered and hosted by tinyray