Dynamsoft Developer Blog

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...

This article aims to build a Node.js module to recognize MRZ from passport, ID card, and travel documents on Windows and Linux. The module is implemented based on Dynamsoft C++ OCR SDK. This article is Part 7 in a 7-Part Series. Part 1 - Passport MRZ Recognition with Dynamsoft C++...

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. Links related to Dynamsoft Barcode Reader Create a React Barcode and QR Code Scanning Library...

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...

Using the getUserMedia API, we can get the camera preview in a video element, which makes it possible to do computer vision tasks like barcode scanning in a browser. In this article, we are going to write a camera component for Vue using getUserMedia and build a barcode scanning demo...

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...

Progressive web apps (PWA), simply to say, are web apps that running like native apps on the desktop and mobile platforms. The advantages of PWA include installable, discoverable, linkable and so on. In this article, I’m trying to give a snapshot of a simple PWA barcode reader project built with...

Dynamsoft Web Capture SDK is a camera-based document scanning SDK implemented in WebAssembly and JavaScript. Comparing to Dynamic Web TWAIN, the classic web scanner SDK, there is no local service installation required, which means the web capture SDK can work in any desktop browser, mobile browser, and WebView. This article...

The Ionic framework has shifted its native runtime from Cordova to Capacitor. But we can still create Ionic Angular projects based on Cordova. In this article, we are going to create an Ionic Angular QR code scanning app based on Cordova using the cordova-plugin-dynamsoft-barcode-reader and the ionic wrapper. Preview of...

Dynamsoft JavaScript barcode SDK is compatible with all mainstream web frameworks and web browsers. This article goes through the steps to build Angular barcode and QR code scanner apps with Dynamsoft JavaScript barcode SDK. This article is Part 1 in a 2-Part Series. Part 1 - How to Build Angular...

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...

Dynamsoft Barcode Reader, as an enterprise-class barcode and QR code SDK, supports many platforms (Windows, Linux, macOS, Android, iOS, Raspberry Pi OS, and Web) and programming languages (Python, Java, Swift, C#, Cpp, and JavaScript). There are many sample projects distributed in Dynamsoft GitHub repositories and official website. To help developers...

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...

The Ionic framework has shifted its native runtime from Cordova to Capacitor. But for compatibility concerns and the fact that there are many good Cordova plugins, we can still use Cordova plugins in an Ionic project. We can directly use Cordova plugins with the cordova object, but there is a...

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...

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...

There are many open source JavaScript barcode and QR code reader libraries, but few of them are suitable for enterprise use. The reason is that they do not have a road map for long-term algorithm updates and maintenance. In addition, the performance of pure JavaScript is not good enough. WebAssembly...

Dynamic Web TWAIN is a cross-platform document scanning SDK that allows developers to build document management applications using HTML5 and JavaScript on Windows, Linux, and macOS. The Linux edition of Dynamic Web TWAIN supports both x64 and amr64 Linux OS, which means in addition to desktop PCs, you can also...

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,...

As the dominant JavaScript document scanning SDK, Dynamic Web TWAIN has recently adopted WebAssembly as the new weapon. From version 17.2, Dynamic Web TWAIN does not only support cross-platform (Windows, Linux, and macOS) scanner access, but also allows developers to utilize desktop and mobile cameras to scan documents using JavaScript....

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...

Last time, I shared an article Document Imaging and Uploading with Dynamic Web TWAIN (DWT) and Node.js, which demonstrated how to deploy a website on the Web server that implemented in node.js with Express. Today, I’ll re-write the sample with Express application generator and the template engine jade. About Dynamic...

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...

Since from version 17.1, Chromes OS comes into the supporting list of Dynamic Web TWAIN. The supported desktop operating systems of Dynamic Web TWAIN now include Windows, Linux, macOS, Raspberry Pi OS and Chrome OS. This article helps Chromebook users to install Dynamic Web TWAIN service in Chrome OS. Building...

Electron is a framework for building cross-platform desktop applicationss with HTML, JavaScript, and CSS. Since Dynamic Web TWAIN is also a cross-platform JavaScript library for document scanning and management, we can combine Electron and Dynamic Web TWAIN to implement a desktop document scanning and management application for Windows, Linux, and...

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...

Dynamic Web TWAIN is a JavaScript library designed for document scanning and document management. This tutorial guides through React development. You will see how to combine Reactjs and Dynamic Web TWAIN to build a simple web application which can acquire images from a document scanner and load images from local...

Have you ever thought about how to create a Web document scanning application using Ruby on Rails? In this tutorial, we go through how to create a Rails project with Dynamic Web TWAIN (DWT) SDK for loading, scanning and uploading document files. Installation Dynamic Web TWAIN 17.0 Ruby 2.5.1 sudo...

This week, I made a new attempt, integrating Dynamsoft JavaScript Barcode SDK into the ongoing Flutter barcode plugin project. It is exciting to be capable of building web barcode reader apps with the same decodeFile() method used for mobile and desktop development. This article is Part 3 in a 5-Part...

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...

The barcode localization algorithm is an essential step for barcode recognition within an image. However, for static images, the bigger size images have, the much more time the algorithm takes. Plus, the success rate of the algorithm may be interfered by the background color and the foreground color. It is...

While using Salesforce, your management system can conveniently extend new functionalities by installing apps from Salesforce AppExchange - the Salesforce store. How can you build a Salesforce app by yourself? In this article, I will share how to create a barcode reader app for Salesforce from scratch. Requirement Dynamsoft JavaScript...

A few weeks ago, I wrote an article sharing how to read driver’s license information from PDF417 on Android. Comparing to building an Android native camera app, building a web camera app is much easier. In this article, let’s take a glimpse at a JavaScript sample, which is implemented with...

Previously, I shared an article demonstrating how to use Tesseract Python OCR to recognize the accompanying text of a 1D barcode. In this article, I will change the programming language to JavaScript, creating a JavaScript barcode scan app integrated with Tesseract JavaScript OCR. How to Use JavaScript OCR to Recognize...

In India, the Aadhaar card is used to store people’s biometric and demographic data. This article shares how to create a simple web app to decode the QR code printed on the Aadhaar card using Dynamsoft JavaScript SDK, as well as how to extract the information from the barcode results....

Dynamic Web TWAIN SDK v15.2 brings a set of new APIs for classifying images by tags. In this article, I will share how to use the latest JavaScript APIs to implement a simple web document management app from scratch. Building Document Management App in JavaScript Create an HTML file and...

Webpack is a JavaScript module bundler. It is widely used in web frameworks, such as React and Angular. This tutorial shows how to implement a simple web barcode reading app with webpack and Dynamsoft JavaScript Barcode library. What You Should Know Setting Up a Basic Project with Webpack Create a...

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...

Someone asked me how to create a real-time web barcode scanning app with a webcam. Is it hard to implement it? I’ve written an article sharing how to integrate Dynamsoft JavaScript Barcode Reader SDK into a React project. The remaining work is to make a webcam component. Since there is...

Dynamsoft JavaScript barcode SDK is built based on WebAssembly, which provides high performance for reading barcodes in web apps. This tutorial aims to demonstrate how to quickly create a simple web barcode reader by using React and Dynamsoft JavaScript barcode SDK. Download Node.js A Simple Web Barcode Reader Create a new react...

AngularDart, similar to Angular built with TypeScript, is a web app framework written in Dartlang. It finally compiles to JavaScript.  In this article, I will share how to use Dynamsoft JavaScript Barcode SDK to create a simple web barcode reader app using AngularDart on Windows 10. What You Should Know...

Dynamsoft JavaScript barcode SDK is built based on WebAssembly. In this article, I will illustrate how to build a simple web barcode reader app by using Dynamsoft JavaScript barcode SDK and Angular. Using JavaScript Barcode SDK in an Angular CLI Project Create an Angular CLI project Install Angular CLI: npm...

This article shows how to use Dynamsoft C++ barcode reader SDK to create a Window runtime component, as well as how to use the WinRT component and JavaScript to build a UWP app on Windows 10. Prerequisites Dynamsoft Barcode Reader SDK 6.4 Visual Studio 2017 Building WinRT Component with C++ DLLs...

Web Worker is a way to run JavaScript in background threads. The worker thread can perform some heavy works without interfering with the user interface. This article shares how to load WebAssembly and invoke Dynamsoft JavaScript barcode APIs in a web worker. Web Worker for WASM If you have tried the ‘hello...

A JavaScript barcode SDK can be built in C/C++ for high performance. We can compile C/C++ code to a Node.js addon or WebAssembly. Which one is superior? Let’s try Dynamsoft Barcode Reader SDK to find the answer. What You Should Know Node.js C++ Addon vs. WebAssembly Speed Performance is vital...

WebAssembly (Wasm) is a revolutionary technology for Web development. It aims to execute at native speed in web browsers. With WebAssembly, it is convenient to port C/C++ code for web client and server applications. Dynamsoft Barcode Reader 6.2 is the most potent barcode SDK ever, and its WebAssembly edition is on the...

When searching for barcode SDK online, you can find lots of free and commercial SDKs. However, there are only a few of SDKs cross-platform, which is why Dynamsoft Barcode Reader is outstanding. Dynamsoft Barcode Reader SDK supports Windows, Linux, macOS, Android, iOS, and Raspberry Pi. Currently, the latest DBR 6.0...

Last week, I had successfully built JavaScript and WebAssembly ZXing barcode SDK. In this post, I will use the pure JavaScript barcode SDK to create a simple client-side HTML5 barcode reader app, which works in any WebRTC supported web browsers. What If ZXing Cannot Satisfy Performance Requirements? Try Dynamsoft JavaScript...

If you are looking for a barcode SDK for web development, the ideal outcome is to find a pure JavaScript SDK. The pure JavaScript SDK means JavaScript APIs do not rely on any server-side code. However, most of the barcode SDKs are written in C/C++ and Java. They do not...

Document Scanning is nothing new for mobile apps. I remember the first time that I installed a document scanning app was in 2010. However, Apple, Microsoft, and Google the giant tech companies got started to recognize the importance of document scanning technology recently. It is good to see the function...

Dynamic Web TWAIN has been widely used for developing web browser based document scanning apps. Is it possible to embed Dynamic Web TWAIN APIs into a Chrome app or extension? In this post, I want to share what I went through while building a Chrome extension. Chrome App When opening...

It was my first time to hear about WebAssembly when watching Google I/O ‘17. WebAssembly (wasm) lets developers compile C/C++ or other statically typed languages into JavaScript for building high-performance web apps. Assume I have a C/C++ barcode detection or OCR library deployed on server-side,  I can now move it to the...

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...

When using React and Dynamic Web TWAIN to create a web document scanning app, I was confused about how to load dynamsoft.webtwain.min.js, a global JavaScript library like jQuery, into my project. I spent some time searching Google for relevant questions, but it was hard to find useful answers. Then I...

Last week, I shared how to build a simple React Native component from scratch. Now I want to do something more complicated. I will link Dynamsoft’s Barcode Reader mobile SDK, which was released as an AAR bundle file, to a React Native Barcode project and write some Java code as...

When using React Native to write mobile apps, JavaScript is the primary programming language. However, sometimes, you may want to call a platform API that not supported by existing React Native component or use a third-party Android library that built as an AAR file. For these cases, you need to...

Dynamsoft Camera SDK allows developers to build web camera apps with pure HTML, CSS, and JavaScript. In most cases, front-end programming skill is enough. Occasionally, you may want to add some server-side functionalities, such as file uploading and processing. In this article, let’s see how to upload captured images from...

React Native is a JavaScript framework that enables developers to build mobile apps for Android and iOS platforms with one codebase. Even if you are a web developer, you can quickly develop mobile applications using React Native. Not like Cordova that uses WebViews, React Native produces a truly native user...

Cordova is a mobile application development framework that enables developers to build Android, iOS and Windows Phone apps using HTML5, JavaScript, and CSS3. It uses web views to render UI elements instead of the platform’s native UI framework. Cordova can be extended to add more functionalities with plugins. There are...

If you want to open webcam stream in a web browser, what technology will you choose? Probably many developers’ answer is HTML5. Yes, with the JavaScript API getUserMedia, it will be pretty easy to open webcam within web browsers. However, the API is not supported by some old web browsers like...

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...

Have you ever imagined to build a JavaScript document scanning solution for Windows, Linux, and macOS from one single codebase? To make it, you need to find a solution that compatible with different scanner driver types: TWAIN for Windows, SANE for Linux, TWAIN, and ICA for macOS. A good news...

Apache Cordova (formerly PhoneGap) is a mobile application development framework that enables developers to build mobile apps using CSS, JavaScript, and HTML. Different from Xamarin that converting C# code to native apps, Cordova composes apps with hybrid code - all UI layouts are rendered with web technologies via web views...

Building desktop applications is not as easy as developing web applications because it is platform-related. You may need to learn C# for Windows, C/C++ for Linux, and Swift for Mac. For Java developers, it is convenient to create universal desktop applications in Swing and JavaFX. What about web developers, who...

Last week, I shared how to build PHP extension on Linux, as well as how to make a simple PHP barcode reader with a few lines of PHP code. In this post, I will illustrate how to implement an online barcode reader with the custom PHP extension, and how to...

As cloud computing market continues to skyrocket, more and more IT companies tend to release cloud APIs for developers. Most cloud APIs are exposed via REST (Representational state transfer) Web service. In this post, I will illustrate how to create a barcode reader with Node REST Framework Restify and Dynamsoft...

Do you know which programming language is currently ranking first on GitHub? It is JavaScript! JavaScript is not only used for HTML5 Web application development, but also for server-side programming with runtime environment Node.js. With npm, the package manager for Node.js, it is so easy to install any Web frameworks...

When writing code in IDEs (Visual Studio, Eclipse, Netbeans, Aptana, etc.), developers need to find useful APIs and relevant documentations quickly. The assist function (e.g. IntelliSense) is usually triggered by the shortcut keys Ctrl + space. See the screenshots of Microsoft Visual Studio and Netbeans. All smart IDEs could automatically...

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...

Some Java developers asked a question about how to use Dynamic Web TWAIN (DWT) to upload image files when building a Web application with Struts. In this tutorial, I’d like to make a detailed explanation. How to Upload Files with Struts Using NetBeans IDE, we can quickly create a Struts...

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...

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 found an excellent jQuery plugin jquery.qrcode.js, which is written by Jerome Etienne. In this article, I would like to share how to use the QR code plugin to implement a free online app with Google App Engine. You can try my demo http://dynamsoft-test.appspot.com/. How to Implement QR Code...

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...

It’s been a while now since Microsoft released a Windows 8.1 Preview with a Preview of IE 11 too. No doubt many users have already tested it. It is apparent that Microsoft has entirely rebuilt the developer tools and made them much more beautiful and powerful. There are eight distinct tools: DOM Explorer,...