Extraction of single word from camera image, android application

Dear OCr team, I am trying to integrate your service with my android app. Am a novice in coding and need help. I want my OCR to detect specific words, for example, “cat”, “dog”, “apple” etc, and highlight them with different colours, preferably all from the camera preview. Please, point out the direction or resources where I can get help with that. Help much appreciated! Thanks!
PS I am using provided github example for the OCR.

The OCR API detects and extracts text from any image . For example, a photograph might contain a street sign or traffic sign. The JSON includes the entire extracted string, as well as individual words, and their bounding boxes.

Important: To get this data, make sure to use isOverlayRequired=true in your api call. The default is false! :point_left:

streetsign%20ocr

If isOverlayRequired=true, the OCR API returns the coordinates of the bounding boxes for each word. If false, the OCR’ed text is returned only as a text block (this makes the JSON reponse smaller). Overlay data can be used, for example, to show text over the image.

For more info see Free OCR API

Code example: Here is the code that we use on the online ocr form to show the overlay. It loops over the word list that is returned from the OCR API:

//Set overlay on image
function SetOverlay(imageElement, textOverlay) {

    var divElement = imageElement.find('div');

    var divContent = '';
    var lines = textOverlay["Lines"];

    //Loop through each line to show words
    $.each(lines, function () {

        var $thisLine = $(this)[0];
        var maxLineHeight = $thisLine["MaxHeight"];
        var minLineTopDist = $thisLine["MinTop"];

        //Loop through each word to show on top of the text
        $.each($thisLine["Words"], function () {

            $thisWord = $(this)[0];

            divContent = divContent +
            "<span style=\"position:absolute; left:" + $thisWord["Left"] + "px; top:" + minLineTopDist + "px; height:" + maxLineHeight + "px; width:" + $thisWord["Width"] + "px; text-align:center; font-size: " + ((+maxLineHeight) * 0.8) + "px; font-weight: bold; color: red; background: linear-gradient(" +
              "rgba(255, 215, 15, 0.5)," +
              "rgba(255, 215, 15, 0.5)" +
            ");\">" + $thisWord["WordText"] + "</span>&nbsp;";
        });

        divContent = divContent + "<br/>";
    });

    //Append the original 'div' tag with the 'spans' so that it contains the image as well as its overlay
    divElement.append(divContent);

    //Create the image source that will come in the gallery view
    var imageSourceToReplace = { src: imageElement };

    //push the image source to the image gallery data array - this array will be used to show the gallery of images with overlay
    imageGalleryData.push(imageSourceToReplace);

}

finally! but, i read all that on ur website…
can i get a java code example?

Sorry, we have no Java example code for the overlay yet. But we have this snippet: Free OCR API

If you create some Java overlay code, it would be great if you can later post it here :wink: