We at Scanbot love native app development for Android and iOS. But we also understand the need for other cross-platform and hybrid app approaches. As an SDK provider, we are constantly following the latest developments in this area and are always open to new frameworks, tools, and approaches. That’s why we also offer corresponding wrappers and plugins for the Scanbot SDK to our customers. One of those plugins is the Cordova Plugin for the Scanbot SDK.
Cordova is an open source framework for developing hybrid mobile apps. It has a large community and has proven to be successful in production. But since in app development the things are going very fast, some drawbacks and new challenges have emerged over time. Examples include:
Due to these challenges the guys from Ionic have decided to build Capacitor as a successor to Cordova.
In this blog post we want to introduce and evaluate Capacitor with a real world use-case by integrating our Cordova Plugin for Scanbot SDK in a simple Capacitor app. And, of course, we also would like to show how easy it is to integrate the features of the Scanbot SDK into a modern hybrid mobile app.
For more details please see the full requirements for Capacitor.
We are going to use Capacitor with an Ionic App.
In order to install and add Capacitor into your project, you must run npm run build at least once to prepare your project (create the www folder for web assets):
Add and install Capacitor into your project:
"MyCapacitorApp" is the name of your app.
"com.example.mycapacitorapp" is an identifier (app ID / bundle ID) of your app. You will need to use this unique ID to register your app on Apple AppStore and Google PlayStore. Furthermore we will use this ID later to generate a trial license key for the Scanbot SDK.
Once Capacitor is initialized, we add the Android and iOS as platforms:
Your blank Capacitor app project is now ready to go. Just open it by following commands in corresponding IDE (Android Studio or Xcode) and try to run it:
As already mentioned, Capacitor supports Cordova plugins. You can simply install a plugin by npm install ....
So we are going to install the cordova-plugin-scanbot-sdk to our project and synchronize it with Capacitor:
Please note that npx cap sync is required to update the dependencies and copy the web assets to native projects (android and ios).
Now we are ready to start coding.
Navigate to the Ionic generated folder src/pages/home/ and edit the home.ts TypeScript file.
Import Scanbot SDK classes:
Get an instance of the “promisified” version of the Scanbot SDK API:
The ScanbotSDK.promisify() method returns an object that has all the functions of ScanbotSDK but with a promisified signature, that is, where every method returns a promise, instead of taking success/error callbacks as parameters.
The Scanbot SDK must be initialized before usage. Use the SBSDK.initializeSdk() method for that:
💡 For the full API reference of the Scanbot SDK Plugin please see the docs.
⚠️ Please note: The Scanbot SDK will run without a licenseKey for one minute per session! After the trial period is over all Scanbot SDK functions as well as the UI components will stop working or may be terminated. You can get an unrestricted “no-strings-attached” 30 day trial license for free. Please submit the Trial License Form on our website by using the app identifier (app ID / bundle ID) you have specified on initialization of Capacitor above (e.g. com.example.mycapacitorapp).
Once you have successfully implemented the initialization of Scanbot SDK, you are ready to call the UI components or perform some image operations.
The Scanbot SDK provides a ready-to-use Document Scanner UI for guided, automatic document scanning. Use the async API method SBSDK.UI.startDocumentScanner() to launch it:
When making changes to the web code in a Capacitor project, you have to rebuild the web project by npm run build and then update the Capacitor native projects with the transpiled JS code and web assets by npx cap copy:
After that run the app in Android Studio or Xcode and try the Document Scanner.
The Document Scanner returns an array of Page objects which contain the scanned document and original images. A document image is the cropped and perspective corrected image, while the original image is the unprocessed image. All images are stored as files and represented as file URIs (file:///...). Furthermore a Page object provides preview images which can bed used as thumbnails for displaying.
So we can just iterate over all pages and use the documentPreviewImageFileUri property to display an image with an <img> element:
The function convertFileUri() is required to convert a file URI (file://) to an Ionic WebView compatible URL.
Please visit the WebView docs for more details about Ionic WebView and how to handle file URIs.
You can use the Cropping UI for manual cropping correction of an image. It is based on document detection and contains some smart UI elements like magnetic lines and a magnifier. Use the async API method SBSDK.UI.startCroppingScreen() and pass an existing Page object to launch the Cropping UI:
The complete example project can be found on GitHub: scanbot–sdk-example-capacitor-ionic. It shows the integration of other API methods of the Scanbot SDK, such as Image Filters, PDF Rendering, and OCR and MRZ Scanners.
In this tutorial we have done a short introduction of Capacitor by creating a simple app and adding the Cordova Plugin for Scanbot SDK. The integration of Cordova Plugins in Capacitor seems to work very well. We find Capacitor quite interesting and believe it will replace Cordova in the long term.
At the time of writing this article, Capacitor is still a Beta version! Please read this blog post of Ionic for a preview of Capacitor in 2019. In case you are interested in the integration with Flutter or React Native, please check out our other blog posts.
Please enter your work email address to download the fact sheet.