OCR In Xamarin.Forms By Using Cognitive Services

Cognitive Services

In the world today,  we need our applications to be more intelligent and exciting so that we can attract more users to our applications, so for that purpose, we use different kinds of services and APIs, Microsoft, Google, Amazon, etc.

Microsoft has provided us with some sort of cognitive services which make our applications more intelligent to make decisions and these services are called Azure Cognitive Services. It changes the theme of how to make our application more intelligent by just using cognitive services and few lines of code.

OCR (Optical Character Recognition)

OCR stands for optical character recognition. OCR help us to recognize text through images, handwriting and any texture which is understandable by mobile device's camera.

We can recognize text through OCR in seconds by capturing the image or selecting the images. OCR helps a lot in the real world to make our life easy. Like for the blind person, he/she can’t see, but by capturing an image of a bill they can listen about the bill by using the combination of OCR and Text to Speech which I will explain in my next article.

Vision API

The main question is, how can we use OCR in our Xamarin.Forms application for that purpose? We will use vision API that will help us to utilize the features and attributes of OCR. Vision API is one of the APIs of Microsoft Cognitive Services. It has a seven day trial period to use the Vision API in which testing can be performed and after that, you can buy the subscription. For that purpose, all the easy steps are mentioned below,

Steps

First of all, we need the Subscriber Key which is free for the testing phase. You can get your Vision API key from the given link.

We have to consume the rest API in Xamarin Forms by using the Vision NuGet Package. For that purpose, we will use Visual Studio 2017.

First of all, we will install the following NuGet Packages.

1. Xam.Plugin.Media (For Camera)
2. Microsoft.ProjectOxford.Vision (OCR)
3. Newtonsoft.Json (API)

After installing all the packages it’s time to write a few lines of code.

Create new project

Add a few XAML lines to your XAML files:

<StackLayout Padding="50">
    <Button x:Name="RealOcr" Clicked="RealOcr_Clicked" Text="OCR"></Button>
    <Image x:Name="Img" WidthRequest="200" HeightRequest="200" />
    <Label x:Name="LblResult" FontSize="32" />
</StackLayout>

Now, initialize the Camera for accessing the Camera of the devices. We will call Vision client just like HttpClient and add a few lines of codes which are given below for accessing the Cognitive Services calling and get the response into the label.

private async void RealOcr_Clicked(object sender, EventArgs e) {
    OcrResults text1;
    var media = Plugin.Media.CrossMedia.Current;
    await media.Initialize();
    var file = await media.TakePhotoAsync(new StoreCameraMediaOptions {
        SaveToAlbum = false
    });
    Img.Source = ImageSource.FromStream(() => file.GetStream());
    var visionclient = new VisionServiceClient("Subscription Key", "https://westcentralus.api.cognitive.microsoft.com/vision/v1.0");
    text1 = await visionclient.RecognizeTextAsync(file.GetStream());
    foreach(var region in text1.Regions) {
        foreach(var line in region.Lines) {
            foreach(var word in line.Words) {
                LblResult.Text += Convert.ToString(word.Text);
            }
        }
    }
}

Results

Hence, by utilizing the above instruction, you can perform OCR in your Xamarin.Forms application. This article is specially dedicated to my trainer Mr. Asfand Yar Hamid (MVP Microsoft), C# Corner, and TechStep (IT Training Centre Sahiwal).