{"id":18696303,"url":"https://github.com/dynamsoft/label-recognizer-javascript","last_synced_at":"2026-01-04T07:41:43.069Z","repository":{"id":37625073,"uuid":"459909578","full_name":"Dynamsoft/label-recognizer-javascript","owner":"Dynamsoft","description":"Dynamsoft Label Recognizer (DLR) is an SDK designed to recognize meaningful zonal text or symbols in an image (Label). Common scenarios include price tags in supermarkets, inventory labels in warehouses, VIN codes on car windshields, driver licenses, passports, visas, ID cards, etc.","archived":false,"fork":false,"pushed_at":"2024-05-21T01:51:54.000Z","size":42514,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-03-16T15:07:42.374Z","etag":null,"topics":["character-recognition","dynamsoft","javascript","mrz","ocr","passport","sdk","vin","web","webassembly"],"latest_commit_sha":null,"homepage":"https://www.dynamsoft.com/label-recognition/programming/javascript/?ver=latest","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Dynamsoft.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-02-16T08:12:06.000Z","updated_at":"2024-05-21T01:51:01.000Z","dependencies_parsed_at":"2024-05-20T08:28:57.947Z","dependency_job_id":"e315760f-ab34-4e89-bb81-146fc6b67549","html_url":"https://github.com/Dynamsoft/label-recognizer-javascript","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dynamsoft%2Flabel-recognizer-javascript","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dynamsoft%2Flabel-recognizer-javascript/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dynamsoft%2Flabel-recognizer-javascript/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dynamsoft%2Flabel-recognizer-javascript/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Dynamsoft","download_url":"https://codeload.github.com/Dynamsoft/label-recognizer-javascript/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244600725,"owners_count":20479307,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["character-recognition","dynamsoft","javascript","mrz","ocr","passport","sdk","vin","web","webassembly"],"created_at":"2024-11-07T11:18:00.552Z","updated_at":"2026-01-04T07:41:43.014Z","avatar_url":"https://github.com/Dynamsoft.png","language":null,"readme":"# Label Recognizer for Your Website - User Guide\n\nWith Dynamsoft Label Recognizer JavaScript edition (DLR-JS), you can add the capability of reading text labels such as passport MRZs, ID cards, VIN numbers, etc. in your web application with just a few lines of code.\n\n![version](https://img.shields.io/npm/v/dynamsoft-label-recognizer.svg)\n![downloads](https://img.shields.io/npm/dm/dynamsoft-label-recognizer.svg)\n![jsdelivr](https://img.shields.io/jsdelivr/npm/hm/dynamsoft-label-recognizer.svg)\n![vulnerabilities](https://img.shields.io/snyk/vulnerabilities/npm/dynamsoft-label-recognizer.svg)\n\nOnce integrated, your users will be able to launch your website in a web browser, activate their camera functionality, and directly recognize the designated text from the video feed.\n\nIn this guide, you will learn step by step on how to integrate this SDK into your website.\n\n\u003cspan style=\"font-size:20px\"\u003eTable of Contents\u003c/span\u003e\n\n- [Label Recognizer for Your Website - User Guide](#label-recognizer-for-your-website---user-guide)\n  - [Example Usage](#example-usage)\n    - [Check the code](#check-the-code)\n      - [About the code](#about-the-code)\n    - [Run the example](#run-the-example)\n  - [Building your own page](#building-your-own-page)\n    - [Include the SDK](#include-the-sdk)\n      - [Use a public CDN](#use-a-public-cdn)\n      - [Host the SDK yourself](#host-the-sdk-yourself)\n    - [Prepare the SDK](#prepare-the-sdk)\n      - [Specify the license](#specify-the-license)\n      - [Specify the location of the \"engine\" files (optional)](#specify-the-location-of-the-engine-files-optional)\n    - [Set up and start image processing](#set-up-and-start-image-processing)\n      - [Preload the module](#preload-the-module)\n      - [Create a CaptureVisionRouter object](#create-a-capturevisionrouter-object)\n      - [Connect an image source](#connect-an-image-source)\n      - [Register a result receiver](#register-a-result-receiver)\n      - [Start the process](#start-the-process)\n    - [Customize the process](#customize-the-process)\n      - [Adjust the preset template settings](#adjust-the-preset-template-settings)\n        - [Retrieve the original image](#retrieve-the-original-image)\n        - [Change reading frequency to save power](#change-reading-frequency-to-save-power)\n        - [Specify a scan region](#specify-a-scan-region)\n      - [Filter the results (Important)](#filter-the-results-important)\n        - [Option 1: Verify results across multiple frames](#option-1-verify-results-across-multiple-frames)\n        - [Option 2: Eliminate redundant results detected within a short time frame](#option-2-eliminate-redundant-results-detected-within-a-short-time-frame)\n      - [Add feedback](#add-feedback)\n    - [Customize the UI](#customize-the-ui)\n  - [System Requirements](#system-requirements)\n  - [Release Notes](#release-notes)\n  - [Next Steps](#next-steps)\n\n## Example Usage\n\nLet's start by testing an example that demonstrates how to enable a web page to recognize the text from a live video stream.\n\n* Basic Requirements\n  * Internet connection  \n  * [A supported browser](#system-requirements)\n  * An accessible Camera\n\n### Check the code\n\nThe complete code of the example is shown below\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003cbody\u003e\n  \u003cscript src=\"https://cdn.jsdelivr.net/npm/dynamsoft-label-recognizer-bundle@3.2.3000/dist/dlr.bundle.js\"\u003e\u003c/script\u003e\n  \u003cdiv id=\"cameraViewContainer\" style=\"width: 100%; height: 60vh\"\u003e\u003c/div\u003e\n  \u003ctextarea id=\"results\" style=\"width: 100%; min-height: 10vh; font-size: 3vmin; overflow: auto\" disabled\u003e\u003c/textarea\u003e\n  \u003cscript\u003e\n    Dynamsoft.License.LicenseManager.initLicense(\"DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9\");\n    Dynamsoft.Core.CoreModule.loadWasm([\"dlr\"]);\n    (async () =\u003e {\n      let cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();\n\n      let view = await Dynamsoft.DCE.CameraView.createInstance();\n      let cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(view);\n      document.querySelector(\"#cameraViewContainer\").append(view.getUIElement());\n      cvRouter.setInput(cameraEnhancer);\n\n      const resultsContainer = document.querySelector(\"#results\");\n      cvRouter.addResultReceiver({ onRecognizedTextLinesReceived: (result) =\u003e {\n        if (result.textLineResultItems.length \u003e 0) {\n          resultsContainer.textContent = \"\";\n          for (let item of result.textLineResultItems) {\n            resultsContainer.textContent += `${item.text}\\n`;\n          }\n        }\n      }});\n      \n      let filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();\n      filter.enableResultCrossVerification(\"text_line\", true);\n      filter.enableResultDeduplication(\"text_line\", true);\n      await cvRouter.addResultFilter(filter);\n\n      await cameraEnhancer.open();\n      await cvRouter.startCapturing(\"RecognizeTextLines_Default\");\n    })();\n  \u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n\u003cp align=\"center\" style=\"text-align:center; white-space: normal; \"\u003e\n  \u003ca target=\"_blank\" href=\"https://jsfiddle.net/DynamsoftTeam/wkcd0ybx/\" title=\"Run via JSFiddle\"\u003e\n    \u003cimg src=\"https://cdn.jsdelivr.net/npm/simple-icons@3.2.0/icons/jsfiddle.svg\" alt=\"Run via JSFiddle\" width=\"20\" height=\"20\" style=\"width:20px;height:20px;\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n-----\n\n#### About the code\n\n- `Dynamsoft.License.LicenseManager.initLicense()`: This method initializes the license for using the SDK in the application. Note that the string \"**DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9**\" used in this example points to an online license that requires a network connection to work. Read more on [Specify the license](#specify-the-license).\n\n- `Dynamsoft.Core.CoreModule.loadWasm([\"dlr\"])`: This is an optional code. Used to load wasm resources in advance, reducing latency between video playing and label recognizing.\n\n- `Dynamsoft.CVR.CaptureVisionRouter.createInstance()`: This method creates a `CaptureVisionRouter` object `cvRouter` which controls the entire process in three steps:\n  - **Retrieve Images from the Image Source**\n    - `cvRouter` connects to the image source through the [ImageSourceAdapter](https://www.dynamsoft.com/capture-vision/docs/core/architecture/input.html#image-source-adapter?lang=js) interface with the method `setInput()`.\n      ```js\n      cvRouter.setInput(cameraEnhancer);\n      ```\n    \u003e The image source in our case is a [CameraEnhancer](https://www.dynamsoft.com/camera-enhancer/docs/web/programming/javascript/user-guide/index.html) object created with `Dynamsoft.DCE.CameraEnhancer.createInstance(view)`\n  - **Coordinate Image-Processing Tasks**\n    - The coordination happens behind the scenes. `cvRouter` starts the process by specifying a template \"RecognizeTextLines_Default\" in the method `startCapturing()`.\n      ```js\n      await cvRouter.startCapturing(\"RecognizeTextLines_Default\");\n      ```\n  - **Dispatch Results to Listening Objects**\n    - The processing results are returned through the [CapturedResultReceiver](https://www.dynamsoft.com/capture-vision/docs/core/architecture/output.html#captured-result-receiver?lang=js) interface. The `CapturedResultReceiver` object `resultReceiver` is registered to `cvRouter` via the method `addResultReceiver()`.\n      ```js\n      cvRouter.addResultReceiver(resultReceiver);\n      ```\n    - Also note that reading from video is extremely fast and there could be many duplicate results. We can use a [filter](#filter-the-results-important) with result verification and deduplication enabled to filter out unnecessary results. The object is registered to `cvRouter` via the method `addResultFilter()`.\n      ```js\n      await cvRouter.addResultFilter(filter);\n      ```\n\n\u003e Read more on [Capture Vision Router](https://www.dynamsoft.com/capture-vision/docs/core/architecture/#capture-vision-router).\n\n### Run the example\n\nThe easiest way to run the example is to use the [JSFiddle code editor](https://jsfiddle.net/DynamsoftTeam/wkcd0ybx/). You will be asked to allow access to your camera, after which the video will be displayed on the page. After that, you can point the camera at a passport biographical page to read the text in the machine-readable zone.\n\nWhen the text is recognized, you will see it show up below the video and the location will be highlighted in the video feed.\n\nAlternatively, you can test locally by copying and pasting the code shown above into a local file (e.g. \"read-text.html\") and opening it in your browser.\n\n*Note*:\n\nIf you open the web page as `file:///` or `http://` , the camera may not work correctly because the [MediaDevices: getUserMedia()](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) method only works in secure contexts (HTTPS), in some or all supporting browsers.\n\nTo make sure your web application can access the camera, please configure your web server to support HTTPS. The following links may help.\n\n1. NGINX: [Configuring HTTPS servers](https://nginx.org/en/docs/http/configuring_https_servers.html)\n2. IIS: [How to create a Self Signed Certificate in IIS](https://aboutssl.org/how-to-create-a-self-signed-certificate-in-iis/)\n3. Tomcat: [Setting Up SSL on Tomcat in 5 minutes](https://dzone.com/articles/setting-ssl-tomcat-5-minutes)\n4. Node.js: [npm tls](https://nodejs.org/docs/v0.4.1/api/tls.html)\n\nIf the test doesn't go as expected, you can [contact us](https://www.dynamsoft.com/company/contact/?ver=3.2.10\u0026utm_source=github\u0026product=dlr\u0026package=js).\n\n## Building your own page\n\n### Include the SDK\n\nTo utilize the SDK, the initial step involves including the corresponding resource files:\n\n* `core.js` encompasses common classes, interfaces, and enumerations that are shared across all Dynamsoft SDKs.\n* `license.js` introduces the `LicenseManager` class, which manages the licensing for all Dynamsoft SDKs.\n* `utility.js` encompasses auxiliary classes that are shared among all Dynamsoft SDKs.\n* `dlr.js` defines interfaces and enumerations specifically tailored to the label recognizer module.\n* `cvr.js` introduces the `CaptureVisionRouter` class, which governs the entire image processing workflow.\n* `dce.js` comprises classes that offer camera support and basic user interface functionalities.\n\nFor simplification, starting from version 3.2.30, we introduced dlr.bundle.js. Including this file is equivalent to incorporating all six packages.\n\n* dynamsoft-core@3.2.30/dist/core.js\n* dynamsoft-license@3.2.21/dist/license.js\n* dynamsoft-utility@1.2.20/dist/utility.js\n* dynamsoft-label-recognizer@3.2.30/dist/dlr.js\n* dynamsoft-capture-vision-router@2.2.30/dist/cvr.js\n* dynamsoft-camera-enhancer@4.0.2/dist/dce.js\n\nEquivalent to\n\n* dynamsoft-label-recognizer-bundle@3.2.3000/dist/dlr.bundle.js\n\nIn the following chapters, we will use `dlr.bundle.js`.\n\n#### Use a public CDN\n\nThe simplest way to include the SDK is to use either the [jsDelivr](https://jsdelivr.com/) or [UNPKG](https://unpkg.com/) CDN. The \"hello world\" example above uses **jsDelivr**.\n\n- jsDelivr\n\n  ```html\n  \u003cscript src=\"https://cdn.jsdelivr.net/npm/dynamsoft-label-recognizer-bundle@3.2.3000/dist/dlr.bundle.js\"\u003e\u003c/script\u003e\n  ```\n\n- UNPKG  \n\n  ```html\n  \u003cscript src=\"https://unpkg.com/dynamsoft-label-recognizer-bundle@3.2.3000/dist/dlr.bundle.js\"\u003e\u003c/script\u003e\n  ```\n\n- In some rare cases (such as some restricted areas), you might not be able to access the CDN. If this happens, you can use the following files for the test.\n\n  ```html\n  \u003cscript src=\"download2.dynamsoft.com/packages/dynamsoft-label-recognizer-bundle@3.2.3000/dist/dlr.bundle.js\"\u003e\u003c/script\u003e\n  ```\n\nHowever, please **DO NOT** use `download2.dynamsoft.com` resources in a production application as they are for temporary testing purposes only. Instead, you can try hosting the SDK yourself.\n\n#### Host the SDK yourself\n\nBesides using the public CDN, you can also download the SDK and host its files on your own server or a commercial CDN before including it in your application.\n\nOptions to download the SDK:\n\n- From the website\n\n  [Download Dynamsoft Label Recognizer JavaScript Package](https://www.dynamsoft.com/label-recognition/downloads/?ver=3.2.10\u0026utm_source=github\u0026product=dlr\u0026package=js)\n\n- npm\n\n  ```cmd\n  npm i dynamsoft-label-recognizer-bundle@3.2.3000 -E\n  npm i dynamsoft-capture-vision-std@1.2.10 -E\n  npm i dynamsoft-image-processing@2.2.30 -E\n  npm i dynamsoft-capture-vision-dnn@1.0.20 -E\n  npm i dynamsoft-label-recognizer-data@1.0.11 -E\n  ```\n\n- yarn\n\n  ```cmd\n  yarn add dynamsoft-label-recognizer@3.2.3000 -E\n  yarn add dynamsoft-capture-vision-std@1.2.10 -E\n  yarn add dynamsoft-image-processing@2.2.30 -E\n  yarn add dynamsoft-capture-vision-dnn@1.0.20 -E\n  yarn add dynamsoft-label-recognizer-data@1.0.11 -E\n  ```\n\nDepending on how you downloaded the SDK and how you intend to use it, you can typically include it like this:\n\n- From the website\n\n  ```html\n  \u003cscript src=\"./dynamsoft/distributables/dynamsoft-label-recognizer-bundle@3.2.3000/dist/dlr.bundle.js\"\u003e\u003c/script\u003e\n  ```\n\n- yarn or npm\n\n  ```html\n  \u003cscript src=\"/node_modules/dynamsoft-label-recognizer-bundle@3.2.3000/dist/dlr.bundle.js\"\u003e\u003c/script\u003e\n  ```\n\n*Note*:\n\n* Certain legacy web application servers may lack support for the `application/wasm` mimetype for .wasm files. To address this, you have two options:\n  1. Upgrade your web application server to one that supports the `application/wasm` mimetype.\n  2. Manually define the mimetype on your server. You can refer to the following resources for guidance:\n     1. [Apache](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Apache_Configuration_htaccess#media_types_and_character_encodings)\n     2. [IIS](https://docs.microsoft.com/en-us/iis/configuration/system.webserver/staticcontent/mimemap)\n     3. [Nginx](https://www.nginx.com/resources/wiki/start/topics/examples/full/#mime-types)\n\n* To work properly, the SDK requires a few engine files, which are relatively large and may take quite a few seconds to download. We recommend that you set a longer cache time for these engine files, to maximize the performance of your web application.\n\n  ```cmd\n  Cache-Control: max-age=31536000\n  ```\n\n  Reference: [Cache-Control](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control).\n\n### Prepare the SDK\n\nBefore using the SDK, you need to configure a few things.\n\n#### Specify the license\n\nTo enable the SDK's functionality, you must provide a valid license. Utilize the method `initLicense()` to set your license key.\n\n```javascript\nDynamsoft.License.LicenseManager.initLicense(\"DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9\");\n```\n\nAs previously stated, the key \"DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9\" serves as a test license valid for 24 hours, applicable to any newly authorized browser. To test the SDK further, you can request a 30-day free trial license via the [customer portal](https://www.dynamsoft.com/customer/license/trialLicense?ver=3.2.10\u0026utm_source=github\u0026product=dlr\u0026package=js).\n\n\u003e Upon registering a Dynamsoft account and obtaining the SDK package from the official website, Dynamsoft will automatically create a 30-day free trial license and embed the corresponding license key into all the provided SDK samples.\n\n#### Specify the location of the \"engine\" files (optional)\n\nThis is usually only required with frameworks like Angular or React, etc. where the referenced JavaScript files such as `cvr.js`, `dlr.js` are compiled into another file.\n\nThe purpose is to tell the SDK where to find the engine files (\\*.worker.js, \\*.wasm.js and \\*.wasm, etc.). The API is called `Dynamsoft.Core.CoreModule.engineResourcePaths`:\n\n```javascript\nObject.assign(Dynamsoft.Core.CoreModule.engineResourcePaths, {\n  // The following code uses the jsDelivr CDN, feel free to change it to your own location of these files\n  core: \"https://cdn.jsdelivr.net/npm/dynamsoft-core@3.2.30/dist/\",\n  license: \"https://cdn.jsdelivr.net/npm/dynamsoft-license@3.2.21/dist/\",\n  dlr: \"https://cdn.jsdelivr.net/npm/dynamsoft-label-recognizer@3.2.30/dist/\",\n  cvr: \"https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.2.30/dist/\",\n  dce: \"https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.2/dist/\",\n  std: \"https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.2.10/dist/\",\n  dip: \"https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.2.30/dist/\",\n  dnn: \"https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-dnn@1.0.20/dist/\",\n  // \"dlrData\" refers to the location of the Convolutional Neural Network (CNN) inference model used for dlr recognition.\n  dlrData: \"https://cdn.jsdelivr.net/npm/dynamsoft-label-recognizer-data@1.0.11/dist/\"\n});\n```\n\n### Set up and start image processing\n\n#### Preload the module\n\nThe image processing logic is encapsulated within .wasm library files, and these files may require some time for downloading. To enhance the speed, we advise utilizing the following method to preload the libraries.\n\n```js\n// Preload the .wasm files\nDynamsoft.Core.CoreModule.loadWasm([\"dlr\"]);\n```\n\n#### Create a CaptureVisionRouter object\n\nTo use the SDK, we first create a `CaptureVisionRouter` object.\n\n```javascript\nDynamsoft.License.LicenseManager.initLicense(\"DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9\");\n\nlet cvRouter = null;\ntry {\n    cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();\n} catch (ex) {\n    console.error(ex);\n}\n```\n\n#### Connect an image source\n\nThe `CaptureVisionRouter` object, denoted as `cvRouter`, is responsible for handling images provided by an image source. In our scenario, we aim to detect text directly from a live video stream. To facilitate this, we initialize a `CameraEnhancer` object, identified as `cameraEnhancer`, which is specifically designed to capture image frames from the video feed and subsequently forward them to `cvRouter`.\n\nTo enable video streaming on the webpage, we create a `CameraView` object referred to as `view`, which is then passed to `cameraEnhancer`, and its content is displayed on the webpage.\n\n```html\n\u003cdiv id=\"cameraViewContainer\" style=\"width: 100%; height: 100vh\"\u003e\u003c/div\u003e\n```\n\n```javascript\nlet view = await Dynamsoft.DCE.CameraView.createInstance();\nlet cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(view);\ndocument.querySelector(\"#cameraViewContainer\").append(view.getUIElement());\ncvRouter.setInput(cameraEnhancer);\n```\n\n#### Register a result receiver\n\nOnce the image processing is complete, the results are sent to all the registered `CapturedResultReceiver` objects. Each `CapturedResultReceiver` object may encompass one or multiple callback functions associated with various result types. In our particular case, our focus is on recognized text within the images, so it's sufficient to define the callback function `onRecognizedTextLinesReceived`:\n\n```javascript\nconst resultsContainer = document.querySelector(\"#results\");\nconst resultReceiver = new Dynamsoft.CVR.CapturedResultReceiver(); \nresultReceiver.onRecognizedTextLinesReceived = (result) =\u003e {\n  if (result.textLineResultItems.length \u003e 0) {\n    resultsContainer.textContent = \"\";\n    for (let item of result.textLineResultItems) {\n      resultsContainer.textContent += `${item.text}\\n`;\n    }\n  }\n};\ncvRouter.addResultReceiver(resultReceiver);\n```\n\nYou can also write code like this. It is the same.\n\n```javascript\ncvRouter.addResultReceiver({\n  onRecognizedTextLinesReceived: (result) =\u003e {\n    if (result.textLineResultItems.length \u003e 0) {\n      resultsContainer.textContent = \"\";\n      for (let item of result.textLineResultItems) {\n        resultsContainer.textContent += `${item.text}\\n`;\n      }\n    }\n  },\n});\n```\n\nCheck out [CapturedResultReceiver](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/capture-vision-router/captured-result-receiver.html) for more information.\n\n#### Start the process\n\nWith the setup now complete, we can proceed to process the images in two straightforward steps:\n\n1. Initiate the image source to commence image acquisition. In our scenario, we invoke the `open()` method on `cameraEnhancer` to initiate video streaming and simultaneously initiate the collection of images. These collected images will be dispatched to `cvRouter` as per its request.\n2. Specify a template to commence image processing. In our case, we utilize the `RecognizeTextLines_Default` template.\n\n```javascript\nawait cameraEnhancer.open();\nawait cvRouter.startCapturing(\"RecognizeTextLines_Default\");\n```\n\n*Note*:\n\n* `cvRouter` is engineered to consistently request images from the image source.\n* The following preset templates are at your disposal.\n\n| Template Name                           | Function Description                                       |\n| --------------------------------------- | ---------------------------------------------------------- |\n| **RecognizeTextLines_Default**          | Identifies and reads any text present.                     |\n| **RecognizeNumbers**                    | Specializes in recognizing numerical data.                 |\n| **RecognizeLetters**                    | Identifies both uppercase and lowercase English alphabets. |\n| **RecognizeNumbersAndLetters**          | Reads both numbers and English alphabets (any case).       |\n| **RecognizeNumbersAndUppercaseLetters** | Scans numbers and uppercase English alphabets.             |\n| **RecognizeUppercaseLetters**           | Focuses on recognizing uppercase English alphabets.        |\n\nRead more on the [preset CaptureVisionTemplates](./preset-templates.md).\n\n### Customize the process\n\n#### Adjust the preset template settings\n\nWhen making adjustments to some basic tasks, we often only need to modify [SimplifiedCaptureVisionSettings](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/capture-vision-router/interfaces/simplified-capture-vision-settings.html).\n\n##### Retrieve the original image\n\nWe have the option to modify the template to retrieve the original image containing the text. For example:\n\n```javascript\nlet settings = await cvRouter.getSimplifiedSettings(\"RecognizeTextLines_Default\");\nsettings.capturedResultItemTypes |= \n  Dynamsoft.Core.EnumCapturedResultItemType.CRIT_ORIGINAL_IMAGE;\nawait cvRouter.updateSettings(\"RecognizeTextLines_Default\", settings);\nawait cvRouter.startCapturing(\"RecognizeTextLines_Default\");\n```\n\nPlease be aware that it is necessary to update the `CapturedResultReceiver` object to obtain the original image. For instance:\n\n```javascript\nconst EnumCRIT = Dynamsoft.Core.EnumCapturedResultItemType;\nresultReceiver.onCapturedResultReceived = (result) =\u003e {\n  let textLines = result.items.filter(item =\u003e item.type === EnumCRIT.CRIT_TEXT_LINE);\n  if (textLines.length \u003e 0) {\n    let image = result.items.filter(\n      item =\u003e item.type === EnumCRIT.CRIT_ORIGINAL_IMAGE\n    )[0].imageData;\n    // The image that we found the text on.\n  }\n};\n```\n\n##### Change reading frequency to save power\n\nThe SDK is initially configured to process images sequentially without any breaks. Although this setup maximizes performance, it can lead to elevated power consumption, potentially causing the device to overheat. In many cases, it's possible to reduce the reading speed while still satisfying business requirements. The following code snippet illustrates how to adjust the SDK to process an image every 500 milliseconds:\n\n\u003e Please bear in mind that in the following code, if an image's processing time is shorter than 500 milliseconds, the SDK will wait for the full 500 milliseconds before proceeding to process the next image. Conversely, if an image's processing time exceeds 500 milliseconds, the subsequent image will be processed immediately upon completion.\n\n```javascript\nlet settings = await cvRouter.getSimplifiedSettings(\"RecognizeTextLines_Default\");\nsettings.minImageCaptureInterval = 500;\nawait cvRouter.updateSettings(\"RecognizeTextLines_Default\", settings);\nawait cvRouter.startCapturing(\"RecognizeTextLines_Default\");\n```\n\n##### Specify a scan region\n\nYou can use the parameter `roi` (region of interest) together with the parameter `roiMeasuredInPercentage` to configure the SDK to only read a specific region on the image frames. For example:\n\n```javascript\nlet settings = await cvRouter.getSimplifiedSettings(\"RecognizeTextLines_Default\");\nsettings.roiMeasuredInPercentage = true;\nsettings.roi.points = [\n  { x: 5, y: 70 },\n  { x: 95, y: 70 },\n  { x: 95, y: 90 },\n  { x: 5, y: 90 },\n];\nawait cvRouter.updateSettings(\"RecognizeTextLines_Default\", settings);\nawait cvRouter.startCapturing(\"RecognizeTextLines_Default\");\n```\n\nWhile the code above accomplishes the task, a more effective approach is to restrict the scan region directly at the image source, as demonstrated in the following code snippet.\n\n\u003e * With the region configured at the image source, the images are cropped right before they are gathered for processing, eliminating the necessity to modify the processing settings further.\n\u003e * `cameraEnhancer` elevates interactivity by overlaying a mask on the video, providing a clear delineation of the scanning region.\n\u003e * See also: [CameraEnhancer::setScanRegion](https://www.dynamsoft.com/camera-enhancer/docs/web/programming/javascript/api-reference/acquisition.html#setscanregion)\n\n```javascript\ncameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(view);\ncameraEnhancer.setScanRegion({\n  x: 5,\n  y: 70,\n  width: 90,\n  height: 20,\n  isMeasuredInPercentage: true,\n});\n```\n\n#### Filter the results (Important)\n\nWhile processing video frames, it's common for the same text line to be detected multiple times. To enhance the user experience, we can use [MultiFrameResultCrossFilter](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/utility/multi-frame-result-cross-filter.html) object, having two options currently at our disposal:\n\n##### Option 1: Verify results across multiple frames\n\n```js\nlet filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();\nfilter.enableResultCrossVerification(\"text_line\", true);\nawait cvRouter.addResultFilter(filter);\n```\n\n*Note*:\n\n* `enableResultCrossVerification` was designed to cross-validate the outcomes across various frames in a video streaming scenario, enhancing the reliability of the final results.\n\n##### Option 2: Eliminate redundant results detected within a short time frame\n\n```js\nlet filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();\nfilter.enableResultDeduplication(\"text_line\", true);\nawait cvRouter.addResultFilter(filter);\n```\n\n*Note*:\n\n* `enableResultDeduplication` was designed to prevent high usage in video streaming scenarios, addressing the repetitive processing of the same text line within a short period of time.\n\nInitially, the filter is set to forget a result 3 seconds after it is first received. During this time frame, if an identical result appears, it is ignored.\n\nUnder certain circumstances, this duration can be extended with the method `setDuplicateForgetTime()`.\n\n```js\nlet filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();\nfilter.setDuplicateForgetTime(5000); // Extend the duration to 5 seconds.\nawait cvRouter.addResultFilter(filter);\n```\n\nYou can also enable both options at the same time:\n\n```js\nlet filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();\nfilter.enableResultCrossVerification(\"text_line\", true);\nfilter.enableResultDeduplication(\"text_line\", true);\nfilter.setDuplicateForgetTime(5000);\nawait cvRouter.addResultFilter(filter);\n```\n\n#### Add feedback\n\nWhen a text line is detected within the video stream, its position is immediately displayed within the video. Furthermore, utilizing the \"Dynamsoft Camera Enhancer\" SDK, we can introduce feedback mechanisms, such as emitting a \"beep\" sound or triggering a \"vibration\".\n\nThe following code snippet adds a \"beep\" sound for when a text line is found:\n\n```js\nconst resultReceiver = new Dynamsoft.CVR.CapturedResultReceiver();\nresultReceiver.onRecognizedTextLinesReceived = (result) =\u003e {\n  if (result.textLineResultItems.length \u003e 0) {\n    Dynamsoft.DCE.Feedback.beep();\n  }\n};\nawait cvRouter.addResultReceiver(resultReceiver);\n```\n\n### Customize the UI\n\nThe UI is part of the auxiliary SDK \"Dynamsoft Camera Enhancer\", read more on how to [customize the UI](https://www.dynamsoft.com/camera-enhancer/docs/web/programming/javascript/user-guide/index.html#customize-the-ui).\n\n## System Requirements\n\nDLR requires the following features to work:\n\n- Secure context (HTTPS deployment)\n\n  When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons\n  \n  - Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.\n  \u003e Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.\n  \n  - Dynamsoft License requires a secure context to work.\n\n- `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`\n\n  The above four features are required for the SDK to work.\n\n- `MediaDevices`/`getUserMedia`\n\n  This API is required for in-browser video streaming.\n\n- `getSettings`\n\n  This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.\n\nThe following table is a list of supported browsers based on the above requirements:\n\n  | Browser Name |     Version      |\n  | :----------: | :--------------: |\n  |    Chrome    | v78+\u003csup\u003e1\u003c/sup\u003e |\n  |   Firefox    | v62+\u003csup\u003e1\u003c/sup\u003e |\n  |     Edge     |       v79+       |\n  |    Safari    |       v14+       |\n\n  \u003csup\u003e1\u003c/sup\u003e devices running iOS needs to be on iOS 14.3+ for camera video streaming to work in Chrome, Firefox or other Apps using webviews.\n\nApart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.\n\n## Release Notes\n\nLearn about what are included in each release at [https://www.dynamsoft.com/label-recognition/docs/web/programming/javascript/release-notes/index.html](https://www.dynamsoft.com/label-recognition/docs/web/programming/javascript/release-notes/index.html?ver=3.2.10\u0026utm_source=github).\n\n## Next Steps\n\nNow that you have got the SDK integrated, you can choose to move forward in the following directions\n\n1. Check out the [Official Samples](https://github.com/Dynamsoft/label-recognizer-javascript-samples/)\n2. Learn about the [APIs of the SDK](https://www.dynamsoft.com/label-recognition/docs/web/programming/javascript/api-reference/?ver=3.2.10).","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdynamsoft%2Flabel-recognizer-javascript","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdynamsoft%2Flabel-recognizer-javascript","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdynamsoft%2Flabel-recognizer-javascript/lists"}