ABBYY Mobile Web Capture basic usage code sample

The code sample is located in the sample folder and includes client and server parts:

  • sample proxy server implementation (sample/server)
  • front-end ABBYY Mobile Web Capture implementation (sample/client)

 Important! For correct module work several .js files are required.

  1. A web-capture.js file is located in the libs/js/ folder of the distribution. By default the sample connects to the file in the index.html page as following:

<script type="text/javascript" src="libs/js/web-capture.js?9935c54df812cca0b198"></script>

Please, make sure that the libs folder is located at the same directory level with the sample folder. Or you may change the path to the web-capture.js file in the index.html page code.

2. Third-party technology libraries are linked explicitly inside the <head> tag:

<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/redux@4.0.5/dist/redux.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>.

When developing your project, please, make sure to link these libraries in your code.

Server configuration

To test the sample on a computer, a local server should be configured.

To deploy a basic Node.js server locally perform the following steps:

  • Install the Node.js  platform on your computer
  • Place the license file to the sample/client/libs/js folder. Please notice, that the file name should be MWC.ABBYY.License. Rename your license file if necessary.
  • In terminal/CMD/PowerShell do the following:
    • Navigate to the sample/server folder
    • Run npm install
    • Run npm start
  • The server will be available on http://localhost:3030

Sample description

Find the libraries and source files for Web Capture module work and also the sample index.html page in the sample/client folder. Use the code of the sample page to implement capturing from web-browser in your application.

API usage is demonstrated inside the <script> tag of the index.html page.

Source files are loaded preliminarily with the init method before capture process is started with the capture method. The next predefined capture options are passed to the capture method:

  • the image that will be displayed on the sample start (startPage option);
  • the array of images saved after the last capture session (images option). For the first session this array is empty;
  • source strings for the user interface localization (localizedStrings option).

Using this code with just a few changes, such as customizing the text on a button, you can add Mobile Web Capture functionality to your own application.

If you want to see how to use separate capture screens or how to customize user interface, investigate the #ERROR_INVALID_LINK_guidedtour_codesamples_customization#.

03.04.2023 17:06:08

Usage of Cookies. In order to optimize the website functionality and improve your online experience ABBYY uses cookies. You agree to the usage of cookies when you continue using this site. Further details can be found in our Privacy Notice.