{"id":66642,"date":"2024-09-26T15:55:19","date_gmt":"2024-09-26T10:25:19","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=66642"},"modified":"2024-09-26T16:23:29","modified_gmt":"2024-09-26T10:53:29","slug":"building-a-text-recognition-app-using-camerax-and-ml-kit-in-jetpack-compose","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/building-a-text-recognition-app-using-camerax-and-ml-kit-in-jetpack-compose\/","title":{"rendered":"Building a Text Recognition App Using CameraX and ML Kit in Android"},"content":{"rendered":"

With the increasing demand for intelligent apps that can process and understand visual data, text recognition<\/a> is becoming a key feature in many applications. This blog will walk you through building a powerful text recognition app using Google\u2019s MLKit, CameraX APIs, and Jetpack Compose. MLKit offers a robust Machine Learning solution<\/a> for on-device text recognition, while CameraX provides an easy way to integrate camera functionality. Combining these with Jetpack Compose\u2019s modern UI<\/a> toolkit, we’ll create a seamless and responsive app. Before we start diving into the implementation, let’s first understand the Key components used for the implementation.<\/p>\n

Why Use ML Kit for Text Recognition?<\/h3>\n

ML Kit<\/strong> is a machine learning framework provided by Google, designed to bring powerful machine learning capabilities to mobile apps without needing in-depth knowledge of ML algorithms. One of its key features is text recognition, which allows developers to extract text from images with high accuracy. It’s a cloud-independent solution, meaning it works even offline, making it highly suitable for mobile apps that need robust and quick text recognition.<\/p>\n

Read More: Web Speech API<\/a><\/h4>\n

Using CameraX for Capturing Image<\/h3>\n

CameraX<\/strong> is an Android Jetpack library that simplifies the camera implementation for developers. It supports various use cases such as preview, image capture, and video recording. In our app, we are using CameraX for image capture<\/strong>, but it could also be adapted for continuous recognition<\/strong>.<\/p>\n

Single Image Capture<\/h4>\n

CameraX can be used to capture a single image for processing. This is the approach used in our app, where the user manually captures an image by pressing a button. This method is better suited when you’re capturing static documents or screenshots for text recognition. Alternatively, if you don’t need Single Image Capture you can consider Continuous Recognition.<\/p>\n

Continuous Text Recognition with CameraX<\/h4>\n

For continuous recognition, CameraX’s ImageAnalysis use case can be used. Instead of capturing a single image and processing it, ImageAnalysis continuously analyzes frames from the camera and sends them to ML Kit for text recognition. This approach is useful when you want to scan text continuously, like in barcode or document-scanning apps. We can use ImageAnalysis for Continuous Text Recognition.<\/p>\n

Now Let’s Begin with the project.<\/strong> And understand how we can achieve text Recognition. We will start with the project setup.<\/p>\n

Project Setup<\/h3>\n

Before we begin, ensure you’ve added the necessary dependencies in your build. gradle:<\/p>\n

- Added dependency in library libs.versions.toml \r\n#camera \r\ncameraX = \"1.3.4\" \r\n\r\n#MLkit\r\nplayServicesMlkitTextRecognitionCommon = \"19.1.0\" \r\ntextRecognition = \"16.0.1\" \r\n\r\n- Implementing dependency in build.gradle(app) \r\n\r\n\/\/Dependency for camera \r\nimplementation(libs.camera2) \r\nimplementation(libs.cameraView) \r\nimplementation(libs.cameraLifecycle) \r\n\r\n\/\/ Dependency For Google ML Kit \r\nimplementation(libs.play.services.mlkit.text.recognition.common) \r\nimplementation (libs.text.recognition)<\/pre>\n
Handling Camera Permissions<\/h3>\n
First, we will add permissions to the AndroidManifest file:<\/p>\n
<!-- Permission for using camera -->\r\n<uses-feature android:name=\"android.hardware.camera.any\" \/>\r\n<uses-permission android:name=\"android.permission.CAMERA\" \/><\/pre>\n
Next, We’d first need to request camera permission from the user. When we get permission then we will proceed further. Here’s how we handle permissions in the CameraPermissionHandler composable:<\/p>\n
- Requested user to provide permission for camera.\r\n \r\n@Composable\r\nfun CameraPermissionHandler(onPermissionGranted: () -> Unit) {\r\n val cameraPermission = Manifest.permission.CAMERA\r\n val context = LocalContext.current\r\n\r\n val permissionLauncher = rememberLauncherForActivityResult(\r\n   contract = ActivityResultContracts.RequestPermission(),\r\n     onResult = { isGranted ->\r\n       if (isGranted) {\r\n         onPermissionGranted()\r\n       } else {\r\n         Toast.makeText(context, \"Camera permission denied\", Toast.LENGTH_SHORT).show()\r\n       }\r\n   }\r\n )\r\n\r\n\/\/ We will be showing permission popup to the user.\r\n\r\n LaunchedEffect(key1 = true) {\r\n   when {\r\n      ContextCompat.checkSelfPermission(\r\n       context,\r\n       cameraPermission\r\n      ) == PackageManager.PERMISSION_GRANTED -> {\r\n        onPermissionGranted()\r\n      }\r\n\r\n      else -> {\r\n         permissionLauncher.launch(cameraPermission)\r\n      }\r\n   }\r\n  }\r\n}\r\n\r\n\r\n- Now when user grant permission then we will start camera\r\n\r\n@Composable\r\nfun CameraPermissionScreen() {\r\n   var permissionGranted by remember { mutableStateOf(false) }\r\n\r\n    \/\/ Handle the permission request\r\n   CameraPermissionHandler(\r\n      onPermissionGranted = {\r\n         permissionGranted = true\r\n      }\r\n   )\r\n\r\n   \/\/ Show the TextRecognitionScreen only if permission is granted\r\n  if (permissionGranted) {\r\n       TextRecognitionScreen()\r\n  }\r\n}<\/pre>\n