Flutter - Text Recognition using Google ML Kit | Flutter Recognize Text using Google ML Kit
Вставка
- Опубліковано 27 лют 2022
- Learn to Recognize text from image using google ml kit package. In this video you will learn how to recognize text using image from Gallery & Camera. Google ml kit package support On-Device Text Recognition. It doesn't support cloud based text recognition. The old firebase ml kit package is discontinued.
Source Code: github.com/ritsat/text_recogn...
For more content follow us on,
effortlesscodelearning.com/
/ effortlesscodelearning
Google ml kit Package page: pub.dev/packages/google_ml_kit
Image Picker Package Page: pub.dev/packages/image_picker
#flutter
#text_recognition
#image_to_text
#google_ml_kit
Please Like, Share, Subscribe & Click on the Bell button for more video like this
Thanks for watching the video :-)
Ocr icons created by Freepik - Flaticon : www.flaticon.com/free-icons/ocr
==============IMPORTANT UPDATE====================
The creator of google_ml_kit package has recently split it into multiple packages because of the app size issue, so introduced google_mlkit_text_recognition package for text recognition.
The app size was getting increased due to google_ml_kit package as it contains support for other features/packages too. By using this new package you won't be facing app size issue.
So instead of google_ml_kit package, you can use google_mlkit_text_recognition package for text recognition, rest of the code(i.e.:- dart code) will be same, no need to make any other change. So you only need to change the dependency in pubspec.yaml file.
Link for new Package: pub.dev/packages/google_mlkit_text_recognition
Still use can use google_ml_kit package if you want.
Thank you for watching the video 😀
is it possible to choose or specify, what name or data you want to get? would you mind showing? i wanted to scan an id, and just get a specific info from it.
@Arjay, You can use regular expression to extract the required data. In your case, as you want to extract id, but that id may have some pattern, you can build regular expression around the pattern & extract id from the recognized text.
In below code, you can check regular expression in second for loop.
for (TextBlock block in recognisedText.blocks) {
for (TextLine line in block.lines) {
//Here you can check regular expression on line.text. If id is extracted from line, you can break this for loop.
}
}
I hope this will help you to get the required specific info from recognized text.
is it possible scan receipts?
It's mind blowing that you made application in a such less time with very much info. It's very concise and on point
Great work
Thank you
This is exactly what I needed
Thank you
one of the best video amazing bro
keep it up
Thank you so much 😀
Bhai you are a genius!!
Thank you
Hello Friend! Great Video, I am referring this but it is giving me an error, in 2nd and 3rd line "getRecognisedText(XFile image)" of this function at ^vision.textDetector(). It is showing like
"The method 'textDetector' isn't defined for the type 'Vision'.
Try correcting the name to the name of an existing method, or defining a method named 'textDetector'."
I searched for the same on stack overflow there also someone is having same problem but no one has answered it yet.
And second error is, this piece of code is just below first error in same function
Undefined class 'RecognisedText'.
Try changing the name to the name of an existing class, or creating a class with the name 'RecognisedText'.
What should I do to fix it! Please help!
bro you god you saved me
Glad I could help
thanks bro
Welcome
Just wanna ask, is it possible to implement a camera overlay like those barcode scanner and crop the image based on the overlay
It's possible
Hj sir. Why didnt you implement getting permission when we try to access gallery or camera?
Can you look for the scanner in google ml kit. I would get a "camera_android` threw an error"..
Sorry I did get your question. Can you please provide more details like when you are getting error. It will really help me check the issue, if you share your source code git link.
Hi, is it possible to derive text like key value pair, for eg: a line has "one 1" kinda text, so we can compare "one" and fetch whole line? thanks in advance
Sorry there is no implicit option with this package but you can achieve this by splitting a line by delimiter.
For example here space can be a delimiter, so whenever a line returned by text recognition, split it by a space delimiter, so you can get key & value pair.
I hope it will help you.
@@EffortlessCodeLearning thought of this but the thing is, it is reading everything as a separate line though it is side by side words, tried to split through elements but failed. that's why I'm asking you
@@AndroidLearning-fw1ej Please share your code, I will give try once.
Do you have tutirial where you can extract text of indian languages?
Will the Google ML process happen localy on the phone or do I need an internet connection and the process will happen in the cloud?
It happens locally. Google_ml_kit package supports only on device vision API, so no internet connection required.
No, this process will not be performed on cloud. Cloud process will be performed only for Google cloud vision API which is not part of this package.
thank you for the video, but what about IOS setup for implementing TextRecognition
Sorry I don't have IOS setup to cover it, but there is no as such code change difference for IOS & Android but the set up requirement to run code is given on below link, you can refer them & then refer this video tutorial for code changes.
github.com/bharat-biradar/Google-Ml-Kit-plugin#requirements
Hello, I want to read the text on the camera screen. E.g when the user click on the camera, text which camera sees should be detected there, without capturing the image.
Never tried this but you can use camera plugin & in output of cameraController can be passed to google_ml_kit's textreconizer class as explained in this video.
Refer below package page for more details,
pub.dev/packages/camera
@@EffortlessCodeLearning so cool thanks! i was also looking into that. if you can please repost a video with that feature 🙏🏻 thank you so much
@@haisai4159 Sure, will do
sir,i used google ml kit,but my need is,
for example,
heading 1
heading2
...............
....................
name :abc
class :3
age :20
i want extract the value only how,always i scan the image,iwill get the sacnned text
name
class
age
:abc
:3
:20
always column like structure,
in between so many headings are ther,,i dont want that headings,
the key :value pair only i want,
how?
You can do it but it will need further data parsing logic on the recognized text. This logic will work for specific set of data. If have more queries on this, you can reach out us on instagram.
I have question, how can we distribute our text after being recognized. For example the text line 1 I want to take as data 1, then text line 2 I want to take as data 2 and so on?
The text example, has multiple line:
"I love you" -> store to data_01
"I want you" -> store to data_02
"I need you" -> store to data_03
You can store these recognized text inside List, then use this list further to get the data based on index.
For Example,
List list = [];
for (TextBlock block in recognisedText.blocks) {
for (TextLine line in block.lines) {
list.add(line.text);
}
}
I hope it will answer your question.
Hello friend, make a video explaining how to create a photomath style application, where you can scan an equation and solve it through the calculator.
Sure
How to assign TextLines to different texteditingcontrollers.
For example i have three texteditingcontrollers - firsttext ,secondtext, thirdtext then how TextLines assign to different texteditingcontrollers in loop. Please describe in code.
for (TextBlock block in text.blocks) {
for (TextLine line in block.lines) {
}
}
You don't need to directly assign TextLines to texteditingcontrollers in loop. For this, you can use StringBuffer class & append TextLines to it in loop. Once the loop is over, you can assign StringBuffer value to texteditingcontrollers.
Refer & use below code for this,
StringBuffer sbText1 = StringBuffer();
StringBuffer sbText2 = StringBuffer();
StringBuffer sbText3 = StringBuffer();
for (TextBlock block in recognisedText.blocks) {
for (TextLine line in block.lines) {
//Below write statements can be put in conditions if required
sbText1.write(line.text);
sbText2.write(line.text);
sbText3.write(line.text);
}
}
firsttext.text(sbText1.toString());
secondtext.text(sbText2.toString());
thirdtext.text(sbText3.toString());
@@EffortlessCodeLearning This solution code is actually write whole textblock text in different texteditingcontrollers. But thanks for giving StringBuffer text idea. I have implement code with conditions in StringBuffer text write statements. Again thank you very much for an idea.
Glad to hear that.
That's why I had put comment in for loop if you want to make these write statements conditional.
@@EffortlessCodeLearning Hmm I know that Good Way To Teach . Sir Please make video on how to access bluetooth camera via bluetooth/wifi from flutter app. I have searched in youtube but i can't find.
Can this ML kit detect Chinese characters? Or we need to include others package to do that?
As of now, this package doesn't not detect Chinese characters. As per the documentation, they have integrated Text Detection v2 for Chinese characters recognition but it is only for android. I have not tried it.
Sorry, I am not aware about other packages which supports Chinese characters recognition. I will let you know if I come to know about it.
Hi..
Is it possible to extract the text as json?
Its not possible. It extracts text as a plain string. But if you want it in json, you can extract it in plain string & then convert to json string
Hi. Can you please guide me if I want to detect a face or multiple faces using this google ml kit? Please make a video on this!!
Sure. Soon I will make video on it.
@@EffortlessCodeLearning Also if we upload an image on Firebase and then use facial recognition, match both faces and login the user like we can unlock our mobile screen using face detector.
@@zainahmad4532 ok. will try
Could you show the way to upload image from flutter web?
You can use image_picker package, it supports web application too.
If required, I would make detail video on it, please let me know.
@@EffortlessCodeLearning It's saying Image.file is not suported on Flutter Web
@Dmitri Cherleto: Use Image.network instead of Image.file for web application
Bro does it detect any other language except english?
Sorry not tried this, but I think it works with English language only.
Please make this video with Google cloud vision api 🙏
Sure.
Is there any fee or limit for this because I will use this feature too much
This video tutorial use on-device vision API using google_ml_kit package. For on-device vision API, there is no fee & limit. If you are going to use google cloud vision API, it will have fee & limit.
@@EffortlessCodeLearning What is the difference between the two. Using which of them, I can make a free application and send it to the play store (let's say a lot of people will use it). Thank you very much for your answer. You have been very helpful.
Thank you bro.
Google cloud vision API comes with some advance feature required for text recognition. For your application, if you need text recognition support for english only, you can use Google_ml_kit package which is free to use without any limit.
How to extract arabic words , it deosn't work
google_ml_kit package doesn't support arabic text. You can use Google Cloud Vision API for that
I can't find this package
As of now, no ready to use package available for this in flutter. By writing native code, you can do it. Below 2 links will help you to add this in your code,
cloud.google.com/vision/docs/ocr
pub.dev/documentation/googleapis/latest/vision.v1/vision.v1-library.html
pub.dev/packages/googleapis
Soon, I will make video on it.
@@EffortlessCodeLearning is firebase ml kit supports arabic language?
@@abdullahawad385 google_ml_kit package doesn't support arabic text. You can use Google Cloud Vision API for that.
As of now, no ready to use package available for this in flutter. By writing native code, you can do it. Below 2 links will help you to add this in your code,
cloud.google.com/vision/docs/ocr
pub.dev/documentation/googleapis/latest/vision.v1/vision.v1-library.html
pub.dev/packages/googleapis
please add subtitles
Sure. Will add
the app size is increase soo much
Add below exclusion in app/build.gradle file. It will reduce the app size which is increased due to google_ml_kit package.
packagingOptions {
exclude 'lib/**/libtranslate_jni.so'
exclude 'lib/**/libdigitalink.so'
exclude 'lib/**/libxeno_native.so'
exclude 'lib/**/libmlkitcommonpipeline.so'
exclude 'lib/**/libbarhopper_v2.so'
exclude 'lib/**/libclassifier_jni.so'
exclude 'lib/**/libface_detector_v2_jni.so'
exclude 'lib/**/libtensorflowlite_jni.so'
exclude 'lib/**/liblanguage_id_jni.so'
}