Using your built-in browser camera and save to server

Often you need to take a photo and save the results to the server. With cell phones and laptops all including cameras, this can be a very useful feature for mobile users.

Requirements

You need my Nice programmer’s library to do this trick. It’s $80 from my web site, this example shows how indispensible it is.

The source code (without the library) is available from a link at the bottom of this post.

Also, it will not run in EWB’s IDE, you need to use a real web browser (Safari, Chrome, Firefox, Android or iOS all work), and you need an HTTPS connection or the browser will refuse to open the camera.

Important first step

You will be working with large data, most camera photos are 1 to 6 MEGAbytes each, and we will be working with Base64 encoded strings holding the photos.

To avoid a stack overflow, at least temporarily turn off database autotransactions. I always turn them off, I put it in the main form’s OnShow handler.

   uses webdata,...
   ...
   database.autotransactions := False;

Onto the main code

Taking a photo is easy, just set up a TFormNicePhoto, tell it what to display (CaptionBar.Caption), give it an upcall to call when the photo is ready, and call ShowModal.

procedure TFormPhotoSample.Button1Click(Sender: TObject);
begin
   setupniceexceptionhandling;
   formnicephoto := TFormNicePhoto.Create( application );
   formnicephoto.upcall := MyUpCall;
   formnicephoto.Captionbar.Caption := 'Click when ready, close window to continue...';
   formnicephoto.ShowModal;
end;

That calls your upcall routine when the photo is ready, and you can store it in a TImage for now to display it.

procedure TFormPhotoSample.MyUpcall( s : string );
begin
   image1.url := s;
end;

Now we add a button to save the uploaded photo to your server. We’ll put it in a TDataSet with a comment, and anything else you want.

procedure TFormPhotoSample.Button2Click(Sender: TObject);
var
  img : string;
begin
  //
  datasetupload.Open;
  datasetupload.empty;

  datasetupload.insert;
  datasetupload.Columns.Column['comment'].asstring := edComment.TExt;
  img := image1.url;
  datasetupload.Columns.Column['photo'].asString := img;
  datasetupload.Save;

  srpost.method := rmPost;
  srpost.content.text := GetJSONof( datasetupload );
  srpost.URL := 'uploadphoto.php';
  srpost.OnComplete := uploaded;
  srpost.Execute;
  showprogress('Network');
end;

You just need to have a post web call handler to say whatever the server returns.

procedure TFOrmPhotoSample.Uploaded( lsr : TServerRequest );
begin
  HideProgress;
  showmessage( lsr.responsecontent.text );
end;

end.

That’s the client! Your server just needs to read a POST JSON structure.

You can download the client code from here.

The server code depends on which technology you use. Here’s a sample PHP solution:

  $passed = file_get_contents('php://input');
  $data = json_decode( $passed );

  $rows = $data->rows;

  foreach ( $rows as $cur ) {
   // cur->photo points to the ASCII
   // BASE64 encoded photograph
   ...
  }
?>