Remix is a full stack web framework that lets you focus on the user interface and work back through web standards to deliver a fast, slick, and resilient user experience. It has been acquired by Shopify and is the recommended framework in React’s docs. In this article, we are going...

Lit is a simple library for building fast, lightweight web components. At Lit’s core is a boilerplate-killing component base class that provides reactive state, scoped styles, and a declarative template system that’s tiny, fast and expressive. In this article, we are going to build a web component with LitElement to...

Scanning documents into a digital form can help companies save physical space, improve data retrieval, reduce costs, improve collaboration, etc. Sometimes, we may come across very large scanned document files or files scanned with a low visual quality. In this article, we are going to talk about aspects related to...

Scanned documents often contain skewed or crooked images. They do not look good and are not friendly for OCR. In this article, we are going to use OpenCV and Python to deskew scanned documents based on text lines. Steps to Deskew a Scanned Document Image with OpenCV We are going...

WebRTC (Web Real-Time Communication) is a technology that enables Web applications and sites to capture and optionally stream audio and/or video media, as well as to exchange arbitrary data between browsers. We can use it to open local cameras and stream remote cameras in the browser. In this article, we...

WebRTC (Web Real-Time Communication) is a free and open-source project providing web browsers and mobile applications with real-time communication (RTC) via application programming interfaces (APIs). It provides an API named getUserMedia to access the device’s cameras and microphones. Sometimes, we may need to record a video to save the content...

Many countries have now adopted an ID card design around 8.6 cm x 5.4 cm in size with three-line MRZ, like ID cards in Germany and the Netherlands. Dutch ID Card Specimen: In this article, we are going to talk about how to build an ID card scanner in Ionic...

In the previous article, we talked about the possibility of transferring files via QR codes and built a demo web app. In this article, we are going to build a cross-platform version using Ionic Vue which can run on Android, iOS and Web. The mechanism is also improved by adding...

In this article, we are going to talk about how to build a web app to scan ISBN barcodes to get the info of books and manage bills of books on Airtable. Airtable is a spreadsheet-database hybrid, with the features of a database but applied to a spreadsheet. It can...

GS1 is a not-for-profit, international organization developing and maintaining its own standards for barcodes. GS1 defines the rules to encode a barcode content so that it contains information about a product: its GTIN (Global Trade Item Number), the weight or dimensions of the item, its price, the lot/batch code, the...

Dynamic Web TWAIN is an SDK to enable scanning documents from browsers and Dynamsoft Document Normalizer is an SDK to detect document borders and perform perspective transformation. The two can be used together so that we can automatically crop and straighten documents. A use case is to use a flatbed...

MRZ stands for “machine-readable zone”. It is usually at the bottom of an identity page for machines to read its info like document type, name, nationality, date of birth, sex and expiration date, etc. Dynamsoft Label Recognizer can read MRZ with sophisticated image processing algorithms and provides a JavaScript edition....

MRZ stands for “machine-readable zone”. It is usually at the bottom of an identity page for machines to read its info like document type, name, nationality, date of birth, sex and expiration date, etc. Dynamsoft Label Recognizer can read MRZ with sophisticated image processing algorithms and provides a JavaScript edition....

Dynamic Web TWAIN is a document-scanning SDK which makes it possible to access document scanners in the browser. It comes with the support of various image formats. We can use it to create an on-premises online image converter. You can press the button above to have a try. It has...

Tag Image File Format, abbreviated TIFF or TIF, is an image file format for storing raster graphics images. It has several differences from most other image file formats: TIFF allows a flexible set of information fields called tags. TIFF allows a flexible combination of colorspace, bitdepth/datatype, and compression scheme. TIFF...

In the previous article, we run a QR code scanner in React-Native-WebView on Android and iOS. React Native can also run in a web browser with React Native Web, which uses React DOM to accurately render React Native compatible JavaScript code in a web page. In this article, we are...

Image cropping is a common image processing task where we only need a potion of an image. In most cases, we make a rectangular selection box for cropping. But for cases like document scanning, we need to make a polygonal selection box. Perspective transformation is needed to normalize the document....

Glide is a no-code app builder which makes it easy to create apps. Dynamsoft is a partner of Glide to provide it with the barcode scanning feature based on its barcode reading SDK. In this article, we are going to use Glide to create a demo app which scans barcodes....

Full-text search is a process of examining all of the words in every stored document to find documents meeting a certain criteria (e.g. text specified by a user). It is possible for the full-text-search engine to directly scan the contents of the documents if the number of documents is small....

IndexedDB is a low-level API for client-side storage of significant amounts of structured data, including files/blobs. It can be used to save images like scanned documents on the client for persistant storage. In this article, we are going to talk about how to use Dynamic Web TWAIN to scan documents...

Large language models (LLMs) are emerging which can help us in tasks like text summarization, translation, question answering, etc and OpenAI’s ChatGPT is one of the state-of-art models which is available via its web or API interfaces. ChatGPT can be useful for document management. One use case of it is...

Paper documents are still ubiquitous in our everyday work, like invoices, checks and printed books. It takes effort to manage them. With Dynamic Web TWAIN, we can build a web application to scan documents from document scanners. But further steps are required to better manage the documents and OCR is...

Notion is an all-in-one workspace for us to use the computer. It is basically a note-taking app but it is more than that with great customizability. In this article, we are going to build a web app to scan ISBN barcodes to get the info of books and save them...

Dynamic Web TWAIN is an SDK which enables document scanning and viewing from browsers. It can display PDF files in a customizable viewer. In this article, we are going to build a web component with Stencil.js to wrap Dynamic Web TWAIN as a PDF viewer so that we can embed...

Patch Code is a barcode developed by Kodak for use in automated scanning. It is mainly used to classify or organize documents. Several documents may need to be scanned and we have to save them into different PDF files. Instead of running several separate jobs (loading the scanner with each...

The International Standard Book Number (ISBN) is a numeric commercial book identifier.1 It is a special kind of the EAN-13 barcode format for books. It may also include an EAN-5 add-on which indicates the price info. We can use ISBN for book management, inventory tracking, retails, etc. In this article,...

Next.js is the recommended framework to create React applications with extra features like server-side rendering and an intuitive router. In this article, we are going to create a document scanning app with Next.js and Dynamic Web TWAIN. What You Should Know About Dynamic Web TWAIN Build a Document Scanning Web...

In the previous article, we’ve created an Oracle APEX application to scan documents. In this article, we are going to add barcode scanning function to the Oracle APEX application with Dynamsoft Barcode Reader. You can check out the video to see what it does. Build an Oracle APEX Application to...

Oracle APEX (also known as APEX or Oracle Application Express) is an enterprise low-code development platform from Oracle Corporation that is used to develop and deploy web applications on Oracle databases. APEX provides a web-based integrated development environment (IDE) that uses wizards, drag-and-drop layout, and property editors to build applications...

Next.js is a flexible React framework that gives you building blocks to create fast web applications. It can pre-render your React app so that it is SEO-friendly. It supports several types of pre-rendering including server-side rendering or static generation, and updating or creating content at runtime with incremental static regeneration....

Near-field communication (NFC) is a set of communication protocols that enables communication between two electronic devices over a distance of 4 cm (11⁄2 in) or less.1 We can store the data in an NFC tag in the NDEF format and then put a phone with NFC support to read its...

In the previous article, we talked about how to scan documents in a FileMaker custom app using Dynamic Web TWAIN. In this article, we are going to add a barcode scanning function in a FileMaker custom app using Dynamsoft Barcode Reader. We embed an MQTT receiver web app in the...

FileMaker is a cross-platform relational database application. It integrates a database engine with a graphical user interface (GUI) and security features, allowing users to modify a database by dragging new elements into layouts, screens, or forms.1 It has become a low-code tool to build apps for businesses. There are some...

In places like laboratories, we often need to scan a tray of multiple tubes with barcodes on the top (like the following image). The tubes may be used for Covid-19 PCR test. They need to be retrieved in reading order (from left to right and line by line from the...

In scenarios like inventory management and checkout, we often need to get the barcodes into a PC device. We can use a handheld laser barcode scanner to scan the barcodes and send the results to a PC device via USB, Bluetooth or network. But as smartphones are ubiquitous now, we...

Chrome extensions are software programs, built on web technologies (such as HTML, CSS, and JavaScript) that enable users to customize the Chrome browsing experience.1 In this article, we are going to write a Chrome extension to add the barcode reading function to web pages with Dynamsoft Barcode Reader. The extension...

Chrome extensions are software programs, built on web technologies (such as HTML, CSS, and JavaScript) that enable users to customize the Chrome browsing experience.1 In this article, we are going to write a Chrome extension to add the document scanning function to web pages. Dynamic Web TWAIN is used to...

Quasar is a Vue.js-based framework, which allows web developers to quickly create responsive websites/apps. It can use Electron to build multi-platform desktop apps. In this article, we are going to build a document scanning desktop app with Quasar and Electron. Dynamic Web TWAIN is used to provide the ability to...

The International Mobile Equipment Identity (IMEI) is a numeric identifier, usually unique, for 3GPP and iDEN mobile phones, as well as some satellite phones. It is usually found printed inside the battery compartment of the phone but can also be displayed on-screen on most phones by entering *#06# MMI Supplementary...

Solidjs is a web framework like React. Instead of using techniques like virtual DOM, it compiles its templates to real DOM nodes and updates them with fine-grained reactions. In this article, we are going to build a barcode and QR code scanner using Solidjs. Dynamsoft Camera Enhancer is used to...

Barcode reading is a complex task with different challenging scenarios. To suit most scenarios, Dynamsoft Barcode Reader provides rich image processing parameters which users can adjust. There are two ways to adjust the parameters. One is via the code: // JavaScript example to set the barcode format to QR code...

The MediaStream ImageCapture API is an API for capturing images or videos from a photographic device. We can use it to enable the capabilities of the native device like turning on the torch and taking a high-resolution photo. It is supported on Chrome Android. You can check the compatibility here....

Dynamic Web TWAIN has a new scanDocument API since v17.2, which makes it easy to capture documents using mobile cameras with its document border detection and editing feature along with ready-to-use UIs. In this article, we are going to create a mobile document scanning app using Ionic Vue. Ionic is...

In the previous article, we built a Capacitor document scanning plugin based on the Dynamsoft Document Normalizer SDK. In this article, we are going to build a document scanner in Angular using the Ionic framework. Demo video of the final result: The app can take a photo or load an...

Capacitor is an open-source native runtime created by the Ionic team for building Web Native apps. We can use it to create cross-platform iOS, Android, and Progressive Web Apps with JavaScript, HTML, and CSS. Using Capacitor plugins, we can use JavaScript to interface directly with native APIs. In this article,...

Capacitor is an open-source native runtime created by the Ionic team for building Web Native apps. We can use it to create cross-platform iOS, Android, and Progressive Web Apps with JavaScript, HTML, and CSS. Using Capacitor plugins, we can use JavaScript to interface directly with native APIs. In this article,...

Capacitor is an open-source native runtime created by the Ionic team for building Web Native apps. We can use it to create cross-platform iOS, Android, and Progressive Web Apps with JavaScript, HTML, and CSS. Using Capacitor plugins, we can use JavaScript to interface directly with native APIs. In this article,...

A progressive web application (PWA) is a type of application software delivered through the web1. It is able to be installed like a local app so that we can access it later without an Internet connection. In this article, we are going to build a document scanning desktop app with...

Svelte is a web framework like React or Vue. Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes. In this article, we are going to build a barcode and QR code scanner using Svelte. Dynamsoft Camera...

Tauri is a framework for building desktop apps for all major platforms. Developers can integrate any front-end framework that compiles to HTML, JS and CSS for building their user interface. The backend of the application is a Rust-sourced binary with an API that the front-end can interact with. Different from...

Ionic is a popular framework to build cross-platform mobile web apps. In this article, we are going to build an Ionic Angular app based on Cordova to scan the MRZ codes which are often found on passports. The JavaScript version of Dynamsoft Label Recognizer is used to provide the ability...

Quasar is a Vue.js-based framework, which allows web developers to quickly create responsive websites/apps, while Capacitor is a runtime for creating cross-platform iOS, Android, and Progressive Web Apps with JavaScript, HTML, and CSS. In this article, we are going to use the two to create a QR code scanner using...

Dynamsoft Label Recognizer is a JavaScript MRZ SDK, which allows developers to build web applications to recognize passport, Visa, ID card and travel documents. By combining Dynamsoft Label Recognizer and Dynamsoft Camera Enhancer, it is easy to build real-time MRZ recognition applications with a camera. This article aims to wrap...

In tasks like barcode scanning and text recognition, we often need to limit the scan region so that only the desired info is extracted. In this article, we are going to build a viewfinder web component as the following which shows which area will be processed. Stencil.js is used to...

In the previous article, we’ve built a React camera component. In this article, we are going to extend the camera component to create a React barcode and QR code scanning library using Dynamsoft Barcode Reader. Getting started with Dynamsoft Barcode Reader DOWNLOAD THE SDK WITH A 30-DAY LICENSE REQUEST A...

With the getUserMedia API, we can access the camera in web browsers, which makes it possible to do computer vision tasks like barcode scanning. In this article, we are going to build a camera component for React with hooks. Build a React Camera Component with Hooks We are going to...

Web Components are a set of features that provide a standard component model for the Web allowing for encapsulation and interoperability of individual HTML elements. 1 We can define a custom element to use in any HTML environment, with any framework, or with no framework at all. Stencil is a...

In the previous article, we’ve given a brief demonstration on how to use the capacitor-plugin-dynamsoft-barcode-reader to create a cross-platform QR code scanner using Ionic React. In this article, we are going to use Ionic Vue to create such a QR code scanner. Screenshots of the final results: Home Scanning Home...

The WebView component included in modern mobile operating systems is becoming more and more powerful. For example, it supports showing the camera preview using getUserMedia and has support for WebAssembly, which makes it possible to use Dynamsoft Label Recognizer to create a text scanner to recognize text like passports’ machine-readable...

iOS has added support for getUserMedia in WKWebView since iOS 14.3 and WebAssembly since iOS 11. So it is possible to use the JavaScript version of Dynamsoft Barcode Reader to scan barcodes and QR codes in WKWebView. In this article, we are going to build a demo app to illustrate...

Google Chrome has getUserMedia support since v53 and WebAssembly support since v57, which makes it possible to use Dynamsoft Barcode Reader to scan barcodes and QR codes in the web context. The WebView component included in modern Android uses Chrome as its backend, so we can also run a barcode...

In many barcode scanning situations, we only need to select one barcode while there are many other barcodes around it. How to avoid scanning unwanted barcodes and only get the barcode result we want? In this article, we are going to talk about ways to select one barcode from many....

In the previous article, we’ve talked about how to use the Barcode Detection API to create a web QR code scanner. However, not many browsers support the API. So in this article, we are going to write a polyfill for the Barcode Detection API with the JavaScript version of Dynamsoft...

The Web Platform Incubator Community Group has published a Shape Detection API specification. The API aims at detecting features like faces and QR codes from images. It is still in draft status and has limited browser support. In this article, we are going to use the Barcode Detection API included...

Dynamic Web TWAIN has a new scanDocument API since v17.2, which makes it easy to capture documents using mobile cameras with its document border detection feature. Along with the RemoteScan feature that connects physical document scanners, we can now build a decent mobile document scanner with web technologies. In this...

If you are looking for a JavaScript barcode and QR code scanner SDK, Dynamsoft JavaScript Barcode SDK is no doubt the best. The SDK enables developers to quickly build web barcode and QR code scanner applications with a few lines of code. This article gives you a better understanding of...

While scanning barcode and QR code from camera stream, we need to firstly convert color images encoded in RGB or YUV to grayscale images, then convert grayscale images to binary images before decoding. Operating image pixels takes much CPU time. To speed up image processing, we can utilize GPU. Dynamsoft...

On mobile platforms, HTML5 is not only supported by web browsers, such as Chrome, Edge, Safari, Firefox, and Opera, but also web view UI component that used for building native apps. Therefore, even though you are only familiar with web development, you can easily create excellent mobile apps for Android...

In the previous article, we’ve given a brief demonstration on how to use the capacitor-plugin-dynamsoft-barcode-reader to create a cross-platform QR code scanner using web technologies with Capacitor. In this article, we are going to take a step further to create an Ionic React QR Code Scanner. A preview of the...

Recently, Dynamsoft compiled the C++ OCR SDK to a web assembly module. It aims to help web developers to build web passport MRZ scanner applications using HTML5 and JavaScript. This article shows how to build web applications to read MRZ information from passport images and scan passport MRZ information with...

The MediaDevices.getUserMedia() is the only API used to access cameras from web browsers. Although it is simple, to implement a complete web camera viewer, there are still a lot of work to do. There was no existing JavaScript camera widget available until Dynamsoft released the Camera Enhancer library recently. Now,...

Capacitor is an open source native runtime created by the Ionic team for building Web Native apps. We can use it to create cross-platform iOS, Android, and Progressive Web Apps with JavaScript, HTML, and CSS.1 As an alternative to Cordova, Capacitor delivers the same cross-platform benefits, but with a more...

Apache Cordova is a tool to create cross-platform apps from standard web technologies (HTML, CSS, and JavaScript). Its primary purpose is to provide a bridge for native device API access and to bundle for distribution.1 In this article, we are going to use Cordova to build a QR code scanner...

Scalable Vector Graphics, SVG, is a W3C XML dialect to mark up graphics1. SVG can be created dynamically with JavaScript and injected into the HTML DOM2. Using SVG, it is very easy to draw a graphics in a web page. Below is a polygon example: <svg width="100" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg">...

QR code is useful to transfer data across different devices. An Android device can exchange data with an iOS device through a QR code. It does not require setting up a wireless network and does not have the hassle of pairing using Bluetooth. As it is a screen-camera solution, it...

Updated in 2021: The Dynamsoft Barcode Reader now has a client-side JavaScript SDK which makes it possible to read barcodes from within the browser. Learn about the JavaScript SDK The Dynamsoft Barcode Reader now has mobile native SDKs supporting Android and iOS. The Dynamsoft Barcode Reader now has an official...

Cameras are now ubiquitous in our life. Every mobile phone has built-in cameras which can shoot nice photos. As for document scanning, there is document camera (also called overhead scanner) which is adjustable and has high resolution. Image source: https://www.amazon.com/Conferencing-Recording-Classroom-Real-time-Definition/dp/B08V4WLPX1/ A document camera has the following benefits: Users don’t have...

Originally designed for the automotive industry1, QR code (abbreviated from Quick Response code) has become popular in various usage scenarios. QR codes can encode richer content than 1D barcodes, from website URLs to even a small image. They can be displayed on screens and printed on posters, package boxes, etc....

Dynamic Web TWAIN has added some exciting features related to the mobile platform since its version 16. Document capturing via mobile cameras, 16.0 PDF Rasterizer mobile edition, 16.0 LoadImageEx supports mobile platform, 16.1 Acquiring images from a remote scanner, 16.1 The scanDocument API which makes it easy to call a...

As the world’s top scanner programming SDK, Dynamic Web TWAIN features a lot of compelling functionalities. By upgrading to the latest version, any web document scanning app built with Dynamic Web TWAIN can be compatible with mobile devices seamlessly. What will happen if you invoke the scanner control APIs on...

Vaadin platform, similar to GWT (Google Web Toolkit), is a set of web components that allow developers to implement HTML5 web apps using the Java programming language. This tutorial aims to help developers to create a simple web document scanning app with Vaadin and Dynamic Web TWAIN SDK. Setting Up...

If you always stay tuned to Dynamsoft Barcode SDK, you should have noticed that starting with version 5.1, the SDK includes a JavaScript library which is similar to Dynamic Web TWAIN. The article aims to help developers get familiar with the relevant JavaScript Barcode APIs and build web barcode reader...

It is known that getUserMedia, the API defined by WebRTC, is the main method for accessing media capture devices such as webcam and microphone in web pages. The compatible desktop web browsers include Chrome, Firefox, Opera, and Edge. This article will share the resources for learning how to capture and...

In this tutorial, I’d like to share how to implement a simple Web application for document imaging and uploading with Dynamic Web TWAIN SDK (DWT) and Node.js. Download and Installation Dynamic Web TWAIN download Node.js download Creating a Web Server with Node.js Run your command line tool to install two...

Think of the game, we know that we have 4 teams in play. At a given time, all we need to see is where these 16 planes are. For the game engine, all it needs to know is the coordinates of these 16 planes. So we need to create another...

In the previous articles, I shared how to implement a .Net WebSocket server with SuperWebSocket. Today, I’d like to continue the series WebSocket: How-to, talking about how to implement a WebSocket server in Java. What is Jetty? “Jetty provides a Web server andjavax.servlet container, plus support forSPDY, WebSocket, OSGi, JMX, JNDI,...

Today we start making our Modern Ludo Game from scratch. The first thing to do is draw the board. For this part, we’ll simply use the in HTML5. The MarkUp is very simple: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>ModernLudo</title> <link rel="stylesheet" type="text/css" href="Styles/modernludo.css" /> </head> <body> <div id="playGround" style="display:none;"> <div...

A Chrome extension is a package of files including a manifest file, HTML files, JavaScript files and other resources. With extensions, we can add more functionalities to empower Chrome. Getting Started with Chrome Extension Chrome Extension Overview Chrome Extension Debugging Chrome Extension Samples Anatomy of Web Page Screenshots The manifest...

In this tutorial, I want to make a more complicated WebSocket demo, which enables me to capture images from scanners on server side, and view the images in desktop web browsers or mobile web browsers. Here is the flowchart:   Prerequisites Read Image Transmission between a HTML5 WebSocket Server and...

HTML5 WebSocket facilitates the communication between web browsers and local/remote servers. If you want to learn a simple websocket example, creating a WebSocket Server in C## and a Web client in JavaScript, you can refer to SuperWebSocket, which is a .NET implementation of Web Socket Server. In this article, I...

Last time, I shared my experience about how to use JavaScript saving HTML canvas data to local disk in Chrome. In this tutorial, I would like to share how to save HTML canvas data to remote service with JavaScript and PHP. Ads Powered by Dynamsoft Uploading canvas data is a...

Recently, I spent several days implementing a web music player. Just for fun. With the player, I can listen to songs that are stored in my home computer. While at work, I just need to start a remote service at my house and then open the browser and input the...

In my daily life, I enjoy taking photos with my smartphone and uploading them to various websites. So I started thinking, “Is it possible to implement these functions in a web browser?” Fortunately, the new HTML5 SDK is capable of uploading local images or captured images to web servers. Everything...

In HTML5, there is a new tag <canvas>, which is used to draw graphics via JavaScript. In this tutorial, I would like to share how to draw images on canvas, and how to save the canvas data to local disk by clicking button. Ads Powered by Dynamsoft Draw Images on...