License Plate Recognition Mobile App using Oracle Cloud Stack

Here is a quick cheat sheet if you ever wanted to build a mobile app that can take advantage of the camera built into the device, capture the vehicle or vehicles nameplate(s) in a frame and process that image and send it on API that can analyze the image and relay back the information it just scanned. This app can be extended to fulfil requirements like checking if the vehicle registration is up to date or insurance renewal is overdue etc. provided if there are APIs already available that can deliver this information.

So what is the tech involved in building this app?

To build a mobile app that can be deployed on iOS or Android, I used the Visual Builder service from the Oracle Cloud stack. This service provides the capability to build Web as well as Mobile applications through a declarative approach with the ability to introduce code for any complex requirements.

To store the captured image and use the image for downstream application purposes I used the OracleContent & Experience service that comes with a rich set of APIs for content ingestion, public document link generation etc. From an enterprise architecture viewpoint, it makes sense to store the images with metadata in a content store, so I decided to archive the image using this service as part of the mobile app build process.

The most significant bit is to use a library / API that can process the image or OCR and send back the information we are interested n. For these purposes, I used the open source ALPR library. There are API’s available already if you want to fast track your app.

This one is optional. If you want to validate the information captured, we can set up a few API’s using the Oracle Autonomous Database with some data to complete the validation flow in the app.

This is what the Architecture would look like :

License Plate Recognition App Architecture.

Here is what the outcome would look like when I capture the picture of a few vehicles in a single frame.

The final output of the App

Let’s see how we can build this app :

Step 1: Create a mobile application in Visual Builder with foundation template and a service creation with the API endpoints

Quick Mobile App build pr using Visual Builder

Step 2: Define the API endpoints

a) Create Document Service Upload API when you are creating the API connection in the Service Tab as in Step 1.

Step 3: Add UI functionality that opens the camera, captures the image, invokes the API and displays the information.

a) Navigate to the Mobile App and open the home-start page.

b) Drop a button on the content placeholder from the component catalogue and change the name of the button.

c) Create an event when the button “scan vehicle is invoked”. Go to the Events Tab and select the ‘ojAction’ event to create the binding and generate the action chain associated with it.

d) Drop the “Take Photo” action from the actions catalogue after the start event. This will allows the app to open the Camera on the device and capture the picture.

e) The image captured by the camera action cannot be mapped directly to the Content API as the API expects the image to be in a binary format. Also, the content API for uploading assets is structured to accepts multipart/form-data content type only.

So let see how we can manage this Content Integration with Visual

Select “Call Module Function” from the Actions catalogue and drop it after the Photo Action in the canvas. This function provides the capability to invoke custom javascript code.

Hit the “Select Module Function” and create a page function.

Assign the Input Parameters by mapping the Image captured from the camera action to the function’s argument.

Navigate to the home-start page and open the JS tab to edit the function we just created to add the required Javascript code.

Replace the entire page JS with the below JS Code :

All we are doing here is taking the path of the file captured through the camera action, converting it into a base64 encoded string and then converting into a binary file, assigning a random name to the binary data and returning that when the function is invoked.

Next, we drop a “Call Rest Endpoint action” after the call module in the action chain and select the endpoint by browsing the connection we created at the beginning. For image checkin, we select the post /files/data endpoint.

After you select the endpoint we need to map the Payload parameters required for the API to be invoked. Click on Assign and map the body to the below as static content :

The “parentID” is the “folderID” where you want the images to be stored. We could invoke another API to create the folder at runtime and grab that. However, for this app, we decided to save the images in one folder that is already created for us. You can log in into the Content UI and browse to the folder to grab the folderId from the browser URL that is required here.

The primaryFile is the return value from the callModuleFunction we invoked before the rest call.

Once the image is ingested, we need to create a public link to the file so that we could pass this link to the recognition API.

Drop another rest call action in the success path for the above and select the “publiclink” generation endpoint and map the required payloads.

We need to pass the ImageURL that needs to be constructed at the runtime as above API execution returns only the “linkId” and not the URL. So for this purpose, we can create another moduleFunction that builds up the URL for us.

Just like earlier we will create a function called getAssetURL and pass the linkId and docName from the API results into this function.

Map the rest call results from the Public Link and Image checkin to the Input params of the function.

Create a flow variable at the home page level and assign the output of the callModuleFunction that constructs the image URL to this variable by dropping an assignVariable action in the action flow.

Once the URL is assigned, we can drop a navigate action on to the flow so that we can display the extracted details from the Image on new details page.

Create a new Page under the home tab.Drop the Navigate action after the Assign variables in the action chain flow.

Select the target point to the page we just created.

Open the details page and drop a list view to the placeholder that allows to build up the page using the wizard.

Click on Add Data to populate the details.

Select the Extract API Endpoint and check the rest endpoint response data that needs to be displayed on the page.Make sure to define the query input params for the API: image_url from the flow variable that we assigned earlier, secret key and country at the minimum.

That is all is required for the app. We can now configure the app to be deployed on the device (iOS or Android).

Blogroll

RedThunder.blog and contributors. All Rights Reserved. The views expressed in this blog are our own and do not necessarily reflect the views of Oracle Corporation. All content is provided on an ‘as is’ basis, without warranties or conditions of any kind, either express or implied, including, without limitation, any warranties or conditions of title, non-infringement, merchantability, or fitness for a particular purpose. You are solely responsible for determining the appropriateness of using or redistributing and assume any risks.

Follow Blog via Email

Enter your email address to follow this blog and receive notifications of new posts by email.