Access the camera with TMS WEB Core 1.2 Padua

In the past two weeks we have given some insight on the upcoming support for 3D graphics and a new syntax highlighting editor, and we have promised that there will be more to come to TMS WEB Core v1.2 Padua. It's time to continue with some more new components: TWebCamera, TWebQRDecoder and TWebBarcodeDecoder.

The TWebCamera is based on the MediaDevices.getUserMedia() API. It provides an easy access to the users' web camera via the exposed and implemented methods, properties and events. The TWebQRDecoder and TWebBarcodeDecoder components are using the external jsQR and quaggaJS JavaScript libraries. As you have probably already guessed from the name, they are capable of decoding QR codes and barcodes of different types. Let's take a look at a quick and simple example with the TWebQRDecoder.

Example

We would like to access a camera that we can use to decode QR codes. It might seem like a complicated task at first glance, but it only takes a minute and two lines of codes to achieve this!

First drop the needed components onto the form: a TWebCamera, a TWebQRDecoder and a TWebMemo to show the results (and don't forget to add the needed external library to the project!). Then assign the TWebCamera component to the TWebQRDecoder.Camera property. Now that they are connected, as a next step, set the TWebQRDecoder.EnableTimer property to True. With that enabled, the decoder will try to get and decode images from the assigned camera.
Let's start the camera in the form's OnCreate event:

procedure TForm1.WebFormCreate(Sender: TObject);
begin
  WebCamera1.Start;
end;

That was one line of code above, so what's left is retrieving the result from the decoder. Luckily we have an OnDecoded event that we can use:

procedure TForm1.WebQRDecoder1Decoded(Sender: TObject; ADecoded: string);
begin
  WebMemo1.Text := ADecoded;
end;

And this is it. With this second line of code our basic QR code reading application is ready, and it really only took a minute!



If you would like to see and play with it already, then you can check out our demo here, which includes decoding using the TWebBarcodeDecoder too!
And of course we have also tried these new components against our new and upcoming TMS Web Electron Application which allows to create desktop Windows, macOS and Linux applications from a single source code base:



Get started

Meanwhile, you can go ahead and explore the new & exciting territories of web client development that become available for Delphi developers with TMS WEB Core! You can download the trial version that is generally available, go ahead with the standalone version you purchased or with TMS WEB Core and additional tools that are all included in TMS ALL-ACCESS. Our team looks forward to all your comments, feedback, feature-requests to help steering the development of TMS WEB Core to the next stages!