diff --git a/1.hello-world/1.hello-world.html b/1.hello-world/1.hello-world.html deleted file mode 100644 index 6535d885..00000000 --- a/1.hello-world/1.hello-world.html +++ /dev/null @@ -1,79 +0,0 @@ - - - - - - - - - - Dynamsoft Barcode Reader Sample - Hello World (Decoding via Camera) - - - - Loading... - - - - - - \ No newline at end of file diff --git a/1.hello-world/10.read-video-pwa/helloworld-pwa.html b/1.hello-world/10.read-video-pwa/helloworld-pwa.html deleted file mode 100644 index 01bb65c5..00000000 --- a/1.hello-world/10.read-video-pwa/helloworld-pwa.html +++ /dev/null @@ -1,87 +0,0 @@ - - - - - - - - - Dynamsoft Barcode Reader PWA Sample - Hello World (Decoding via Camera) - - - - - - - - - - - - -

Hello World for PWA

- Loading... - - - - - - diff --git a/1.hello-world/10.read-video-pwa/service-worker.js b/1.hello-world/10.read-video-pwa/service-worker.js deleted file mode 100644 index 8f395dae..00000000 --- a/1.hello-world/10.read-video-pwa/service-worker.js +++ /dev/null @@ -1,43 +0,0 @@ -const dbrCdn = `https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.32/dist/`; -const dbrVersion = dbrCdn.match(/(?<=dynamsoft-javascript-barcode@).+(?=\/dist)/)[0]; - -// Files to cache -const cacheName = 'helloworld-pwa'; -const appShellFiles = [ - './helloworld-pwa.html', - './dynamsoft-192x192.png', - './dynamsoft-512x512.png', - './helloworld-pwa.json', - `${dbrCdn}dbr.js`, - `${dbrCdn}dbr-${dbrVersion}.full.wasm`, - `${dbrCdn}dbr-${dbrVersion}.full.wasm.js`, - `${dbrCdn}dbr-${dbrVersion}.browser.worker.js`, -]; - -// Installing Service Worker -self.addEventListener('install', (e) => { - console.log('[Service Worker] Install'); - e.waitUntil((async () => { - const cache = await caches.open(cacheName); - console.log('[Service Worker] Caching all: app shell and content'); - await cache.addAll(appShellFiles); - })()); -}); - -self.addEventListener('fetch', (e) => { - e.respondWith((async () => { - const r = await caches.match(e.request); - console.log(`[Service Worker] Fetching resource: ${e.request.url}`); - if (r) { return r; } - const response = await fetch(e.request); - const cache = await caches.open(cacheName); - console.log(`[Service Worker] Caching new resource: ${e.request.url}`); - if (e.request.method !== "POST") - cache.put(e.request, response.clone()); - return response; - })()); -}); - - - - diff --git a/1.hello-world/11.read-video-requirejs.html b/1.hello-world/11.read-video-requirejs.html deleted file mode 100644 index 31a11f8c..00000000 --- a/1.hello-world/11.read-video-requirejs.html +++ /dev/null @@ -1,80 +0,0 @@ - - - - - - - - - - - -

Hello World for RequireJS

- Loading... - - - - - - diff --git a/1.hello-world/12.read-video-es6.html b/1.hello-world/12.read-video-es6.html deleted file mode 100644 index 37f7b261..00000000 --- a/1.hello-world/12.read-video-es6.html +++ /dev/null @@ -1,77 +0,0 @@ - - - - - - - - - Dynamsoft Barcode Reader Sample - Hello World (Read Video) - - - -

Hello World for ES6

- Loading... - - - - - diff --git a/1.hello-world/13.read-video-react-hooks/README.md b/1.hello-world/13.read-video-react-hooks/README.md deleted file mode 100644 index 3a886d27..00000000 --- a/1.hello-world/13.read-video-react-hooks/README.md +++ /dev/null @@ -1,403 +0,0 @@ -# JavaScript Hello World Sample - React with Hooks - -[React](https://reactjs.org/) is a JavaScript library meant explicitly for creating interactive UIs. Follow this guide to learn how to implement Dynamsoft Barcode Reader JavaScript SDK (hereafter called "the library") into a React application. Note that in this sample we will use `TypeScript` and [Hooks](https://reactjs.org/docs/hooks-intro.html). Also, there is another sample `read-video-react` showing defining components as classes in React. - -## Official Sample - -* Hello World in React - Demo -* Hello World in React - Source Code - -## Preparation - -Make sure you have [node](https://nodejs.org/) installed. `node 14.21.3` and `react 18.2.0` used in the example below. - -## Create the sample project - -### Create a Bootstrapped Raw React Application with TypeScript - -```cmd -npx create-react-app read-video-react-hooks --template typescript -``` - -### **CD** to the root directory of the application and install the library - -```cmd -cd read-video-react-hooks -npm install dynamsoft-javascript-barcode -``` - -## Start to implement - -### Add a file "dbr.ts" under "/src/" to configure the library - -```ts -import { BarcodeReader } from 'dynamsoft-javascript-barcode'; -BarcodeReader.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9'; -BarcodeReader.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode/dist/"; -``` - -> Note: -> -> * `license` specify a license key to use the library. You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=sample&product=dbr&package=js to get your own trial license good for 30 days. -> * `engineResourcePath` tells the library where to get the necessary resources at runtime. - -### Build directory structure - -* Create a directory "components" under "/src/", and then create another three directories "HelloWorld", "VideoDecode" and "ImgDecode" under "/src/components/". - -### Create and edit the `VideoDecode` component - -* Create `VideoDecode.tsx` and `VideoDecode.css` under "/src/components/VideoDecode/". The `VideoDecode` component uses `BarcodeScanner` class of the library to help decode barcodes via camera. - -* In `VideoDecode.tsx`, add code for initializing and destroying the `BarcodeScanner` instance. - -```tsx -import { BarcodeScanner, TextResult } from "dynamsoft-javascript-barcode"; -import React, { useEffect, useRef } from "react"; -import "./VideoDecode.css"; - -function VideoDecode() { - const pScanner = useRef(null as null | Promise); - const elRef = useRef(null); - - useEffect(() => { - (async () => { - try { - const scanner = (await (pScanner.current = BarcodeScanner.createInstance())); - // Should judge if scanner is destroyed after 'await', as in development React runs setup and cleanup one extra time before the actual setup in Strict Mode. - if (scanner.isContextDestroyed()) return; - await scanner.setUIElement(elRef.current!); - // Should judge if scanner is destroyed after 'await', as in development React runs setup and cleanup one extra time before the actual setup in Strict Mode. - if (scanner.isContextDestroyed()) return; - scanner.onFrameRead = (results: TextResult[]) => { - for (let result of results) { - console.log(result.barcodeText); - } - }; - scanner.onUniqueRead = (txt: string, result: TextResult) => { - alert(txt); - }; - await scanner.open(); - } catch (ex: any) { - if (ex.message.indexOf("network connection error")) { - let customMsg = - "Failed to connect to Dynamsoft License Server: network connection error. Check your Internet connection or contact Dynamsoft Support (support@dynamsoft.com) to acquire an offline license."; - console.log(customMsg); - alert(customMsg); - } - throw ex; - } - })(); - return () => { - (async () => { - if (pScanner.current) { - (await pScanner.current).destroyContext(); - console.log("BarcodeScanner Component Unmount"); - } - })(); - }; - }, []); - - return ( -
- - - - - - -
-
-
-
-
- - -
-
- - - - - - - - - - - - - - - - - - - - - - -
-
- ); -} - -export default VideoDecode; -``` - -> Note: -> -> * The html code in `render()` and the following code builds the UI for the library. -> -> ```jsx -> await scanner.setUIElement(this.elRef.current!); -> ``` -> -> * The component should never update (check the code for `shouldComponentUpdate()`) so that events bound to the UI stay valid. - -* Define the style of the element in `VideoDecode.css` - -```css -.component-barcode-scanner{width:100%;height:100%;/* min-width:640px; */min-height:480px;background:#eee;position:relative;resize:both;} -.dce-bg-loading{display:none;animation:1s linear infinite dce-rotate;width:40%;height:40%;position:absolute;margin:auto;left:0;top:0;right:0;bottom:0;fill:#aaa;} -.dce-bg-camera{display:none;width:40%;height:40%;position:absolute;margin:auto;left:0;top:0;right:0;bottom:0;fill:#aaa;} -.dce-video-container{position:absolute;left:0;top:0;width:100%;height:100%;} -.dce-scanarea{width:100%;height:100%;position:absolute;left:0;top:0;} -.dce-scanlight{display:none;width:100%;height:3%;position:absolute;animation:3s infinite dce-scanlight;border-radius:50%;box-shadow:0px 0px 2vw 1px #00e5ff;background:#fff;} -.div-select-container{position:absolute;left:0;top:0;} -.dce-sel-camera{display:block;} -.dce-sel-resolution{display:block;margin-top:5px;} -.dbr-msg-poweredby{position:absolute;left:50%;bottom:10%;transform:translateX(-50%);} -.dbr-msg-poweredby svg {height:max(3vmin,17px);fill:#FFFFFF;} -@keyframes dce-rotate{from{transform:rotate(0turn);}to{transform:rotate(1turn);}} -@keyframes dce-scanlight{from{top:0;}to{top:97%;}} -``` - -### Create and edit the `ImgDecode` component - -* Create `ImgDecode.tsx` and `ImgDecode.css` under "/src/components/ImgDecode/". The `ImgDecode` component uses `BarcodeReader` class of the library to help decode barcodes in an image. - -* In `ImgDecode.tsx`, add code for initializing and destroying the `BarcodeReader` instance. - -```tsx -import React, { useRef, useEffect } from "react"; -import { BarcodeReader } from "dynamsoft-javascript-barcode"; -import "./ImgDecode.css"; - -function ImgDecode() { - const pReader = useRef(null as null | Promise); - - const decodeImg = async (e: React.ChangeEvent) => { - try { - const reader = (await pReader.current)!; - let results = await reader.decode(e.target.files![0]); - for (let result of results) { - alert(result.barcodeText); - } - if (!results.length) { - alert("No barcode found"); - } - } catch (ex: any) { - if (ex.message.indexOf("network connection error")) { - let customMsg = - "Failed to connect to Dynamsoft License Server: network connection error. Check your Internet connection or contact Dynamsoft Support (support@dynamsoft.com) to acquire an offline license."; - console.log(customMsg); - alert(customMsg); - } - throw ex; - } - e.target.value = ""; - }; - - useEffect(() => { - pReader.current = BarcodeReader.createInstance(); - return () => { - (async () => { - if (pReader.current) { - (await pReader.current).destroyContext(); - console.log("ImgDecode Component Unmount"); - } - })(); - }; - }, []); - - return ( -
- -
- ); -} - -export default ImgDecode; -``` - -* Define the style of the element in `ImgDecode.css` - -```css -.ImgDecode { - display: flex; - justify-content: center; - align-items: center; - border: 1px solid black -} -``` - -### Create and edit the HelloWorld component - -* Create `HelloWorld.tsx` and `HelloWorld.css` under "/src/components/HelloWorld/". The `HelloWorld` component offers buttons to switch components between `VideoDecode` and `ImgDecode`; - -* Add following code to `HelloWorld.tsx`. - -```tsx -import "./HelloWorld.css"; -import reactLogo from "../../logo.svg"; -import "../../dbr"; // import side effects. The license, engineResourcePath, so on. -import { BarcodeReader } from "dynamsoft-javascript-barcode"; -import React, { useState, useEffect } from "react"; -import VideoDecode from "../VideoDecode/VideoDecode"; -import ImgDecode from "../ImgDecode/ImgDecode"; - -function HelloWorld() { - let [bShowScanner, setBShowScanner] = useState(true); - - useEffect(() => { - (async () => { - try { - await BarcodeReader.loadWasm(); - } catch (ex: any) { - if (ex.message.indexOf("network connection error")) { - let customMsg = - "Failed to connect to Dynamsoft License Server: network connection error. Check your Internet connection or contact Dynamsoft Support (support@dynamsoft.com) to acquire an offline license."; - console.log(customMsg); - alert(customMsg); - } - throw ex; - } - })(); - }, []); - - return ( -
-

- Hello World for React - logo -

-
- - -
-
- {bShowScanner ? : } -
-
- ); -} - -export default HelloWorld; -``` - -> NOTE : -> -> * The method `loadWasm()` initializes the library in the background. - -* Define the style of the element in `HelloWorld.css` - -```css -.helloWorld { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - width: 100%; - height: 100%; - color: #455A64; -} - -h1 { - font-size: 1.5em; -} - -button { - font-size: 1.5rem; - margin: 1.5vh 0; - border: 1px solid black; - background-color: white; - color: black; -} - -.container { - margin: 2vmin auto; - text-align: center; - font-size: medium; - width: 80vw; -} -``` - -### Add the `HelloWorld` component to `App.tsx` - -Edit the file `App.tsx` to be like this - -```jsx -import React from 'react'; -import './App.css'; -import HelloWorld from './components/HelloWorld/HelloWorld'; - -function App() { - return ( -
- -
- ); -} - -export default App; -``` - -* Try running the project. - -```cmd -npm start -``` - -If you followed all the steps correctly, you will have a working page that turns one of the cameras hooked to or built in your computer or mobile device into a barcode scanner. Also, if you want to decode a local image, just click the `Image Decode` button and select the image you want to decode. Once barcodes are found, the results will show in a dialog. - -## Development server - -Runs the app in the development mode.\ -Open [http://localhost:3000](http://localhost:3000) to view it in the browser. - -The page will reload if you make edits.\ -You will also see any lint errors in the console. - -## Build - -Builds the app for production to the `build` folder.\ -It correctly bundles React in production mode and optimizes the build for the best performance. - -The build is minified and the filenames include the hashes.\ -Your app is ready to be deployed! - -See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. - -## Support - -If you have any questions, feel free to contact Dynamsoft support via [email](mailto:support@dynamsoft.com) or [live chat](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) via the "Let's Chat" button. \ No newline at end of file diff --git a/1.hello-world/13.read-video-react-hooks/src/components/HelloWorld/HelloWorld.tsx b/1.hello-world/13.read-video-react-hooks/src/components/HelloWorld/HelloWorld.tsx deleted file mode 100644 index c6d32af4..00000000 --- a/1.hello-world/13.read-video-react-hooks/src/components/HelloWorld/HelloWorld.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import "./HelloWorld.css"; -import reactLogo from "../../logo.svg"; -import "../../dbr"; // import side effects. The license, engineResourcePath, so on. -import { BarcodeReader } from "dynamsoft-javascript-barcode"; -import React, { useState, useEffect } from "react"; -import VideoDecode from "../VideoDecode/VideoDecode"; -import ImgDecode from "../ImgDecode/ImgDecode"; - -function HelloWorld() { - let [bShowScanner, setBShowScanner] = useState(true); - - useEffect(() => { - (async () => { - try { - await BarcodeReader.loadWasm(); - } catch (ex: any) { - if (ex.message.indexOf("network connection error")) { - let customMsg = - "Failed to connect to Dynamsoft License Server: network connection error. Check your Internet connection or contact Dynamsoft Support (support@dynamsoft.com) to acquire an offline license."; - console.log(customMsg); - alert(customMsg); - } - throw ex; - } - })(); - }, []); - - return ( -
-

- Hello World for React - logo -

-
- - -
-
- {bShowScanner ? : } -
-
- ); -} - -export default HelloWorld; diff --git a/1.hello-world/13.read-video-react-hooks/src/components/ImgDecode/ImgDecode.tsx b/1.hello-world/13.read-video-react-hooks/src/components/ImgDecode/ImgDecode.tsx deleted file mode 100644 index c53b0b23..00000000 --- a/1.hello-world/13.read-video-react-hooks/src/components/ImgDecode/ImgDecode.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import React, { useRef, useEffect } from "react"; -import { BarcodeReader } from "dynamsoft-javascript-barcode"; -import "./ImgDecode.css"; - -function ImgDecode() { - const pReader = useRef(null as null | Promise); - - const decodeImg = async (e: React.ChangeEvent) => { - try { - const reader = (await pReader.current)!; - let results = await reader.decode(e.target.files![0]); - for (let result of results) { - alert(result.barcodeText); - } - if (!results.length) { - alert("No barcode found"); - } - } catch (ex: any) { - if (ex.message.indexOf("network connection error")) { - let customMsg = - "Failed to connect to Dynamsoft License Server: network connection error. Check your Internet connection or contact Dynamsoft Support (support@dynamsoft.com) to acquire an offline license."; - console.log(customMsg); - alert(customMsg); - } - throw ex; - } - e.target.value = ""; - }; - - useEffect(() => { - pReader.current = BarcodeReader.createInstance(); - return () => { - (async () => { - if (pReader.current) { - (await pReader.current).destroyContext(); - console.log("ImgDecode Component Unmount"); - } - })(); - }; - }, []); - - return ( -
- -
- ); -} - -export default ImgDecode; \ No newline at end of file diff --git a/1.hello-world/13.read-video-react-hooks/src/components/VideoDecode/VideoDecode.css b/1.hello-world/13.read-video-react-hooks/src/components/VideoDecode/VideoDecode.css deleted file mode 100644 index 3bac7c0e..00000000 --- a/1.hello-world/13.read-video-react-hooks/src/components/VideoDecode/VideoDecode.css +++ /dev/null @@ -1,13 +0,0 @@ -.component-barcode-scanner{width:100%;height:100%;/* min-width:640px; */min-height:480px;background:#eee;position:relative;resize:both;} -.dce-bg-loading{display:none;animation:1s linear infinite dce-rotate;width:40%;height:40%;position:absolute;margin:auto;left:0;top:0;right:0;bottom:0;fill:#aaa;} -.dce-bg-camera{display:none;width:40%;height:40%;position:absolute;margin:auto;left:0;top:0;right:0;bottom:0;fill:#aaa;} -.dce-video-container{position:absolute;left:0;top:0;width:100%;height:100%;} -.dce-scanarea{width:100%;height:100%;position:absolute;left:0;top:0;} -.dce-scanlight{display:none;width:100%;height:3%;position:absolute;animation:3s infinite dce-scanlight;border-radius:50%;box-shadow:0px 0px 2vw 1px #00e5ff;background:#fff;} -.div-select-container{position:absolute;left:0;top:0;} -.dce-sel-camera{display:block;} -.dce-sel-resolution{display:block;margin-top:5px;} -.dbr-msg-poweredby{position:absolute;left:50%;bottom:10%;transform:translateX(-50%);} -.dbr-msg-poweredby svg {height:max(3vmin,17px);fill:#FFFFFF;} -@keyframes dce-rotate{from{transform:rotate(0turn);}to{transform:rotate(1turn);}} -@keyframes dce-scanlight{from{top:0;}to{top:97%;}} \ No newline at end of file diff --git a/1.hello-world/13.read-video-react-hooks/src/components/VideoDecode/VideoDecode.tsx b/1.hello-world/13.read-video-react-hooks/src/components/VideoDecode/VideoDecode.tsx deleted file mode 100644 index 2046d8e0..00000000 --- a/1.hello-world/13.read-video-react-hooks/src/components/VideoDecode/VideoDecode.tsx +++ /dev/null @@ -1,91 +0,0 @@ -import { BarcodeScanner, TextResult } from "dynamsoft-javascript-barcode"; -import React, { useEffect, useRef } from "react"; -import "./VideoDecode.css"; - -function VideoDecode() { - const pScanner = useRef(null as null | Promise); - const elRef = useRef(null); - - useEffect(() => { - (async () => { - try { - const scanner = (await (pScanner.current = BarcodeScanner.createInstance())); - // Should judge if scanner is destroyed after 'await', as in development React runs setup and cleanup one extra time before the actual setup in Strict Mode. - if (scanner.isContextDestroyed()) return; - await scanner.setUIElement(elRef.current!); - // Should judge if scanner is destroyed after 'await', as in development React runs setup and cleanup one extra time before the actual setup in Strict Mode. - if (scanner.isContextDestroyed()) return; - scanner.onFrameRead = (results: TextResult[]) => { - for (let result of results) { - console.log(result.barcodeText); - } - }; - scanner.onUniqueRead = (txt: string, result: TextResult) => { - alert(txt); - }; - await scanner.open(); - } catch (ex: any) { - if (ex.message.indexOf("network connection error")) { - let customMsg = - "Failed to connect to Dynamsoft License Server: network connection error. Check your Internet connection or contact Dynamsoft Support (support@dynamsoft.com) to acquire an offline license."; - console.log(customMsg); - alert(customMsg); - } - throw ex; - } - })(); - return () => { - (async () => { - if (pScanner.current) { - (await pScanner.current).destroyContext(); - console.log("BarcodeScanner Component Unmount"); - } - })(); - }; - }, []); - - return ( -
- - - - - - -
-
-
-
-
- - -
-
- - - - - - - - - - - - - - - - - - - - - - -
-
- ); -} - -export default VideoDecode; \ No newline at end of file diff --git a/1.hello-world/13.read-video-react-hooks/src/dbr.ts b/1.hello-world/13.read-video-react-hooks/src/dbr.ts deleted file mode 100644 index 716618cc..00000000 --- a/1.hello-world/13.read-video-react-hooks/src/dbr.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { BarcodeReader } from "dynamsoft-javascript-barcode"; - -/** LICENSE ALERT - README - * To use the library, you need to first specify a license key using the API "license" as shown below. - */ - -BarcodeReader.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9'; - -/** - * You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&product=dbr&package=js to get your own trial license good for 30 days. - * Note that if you downloaded this sample from Dynamsoft while logged in, the above license key may already be your own 30-day trial license. - * For more information, see https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=9.6.32&utm_source=github#specify-the-license or contact support@dynamsoft.com. - * LICENSE ALERT - THE END - */ - -BarcodeReader.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.32/dist/"; \ No newline at end of file diff --git a/1.hello-world/14.read-video-webview/android/app/src/main/assets/decodeBarcodeInVideo.html b/1.hello-world/14.read-video-webview/android/app/src/main/assets/decodeBarcodeInVideo.html deleted file mode 100644 index b33a91b1..00000000 --- a/1.hello-world/14.read-video-webview/android/app/src/main/assets/decodeBarcodeInVideo.html +++ /dev/null @@ -1,72 +0,0 @@ - - - - - - - - - - Dynamsoft Barcode Reader Sample - Hello World (Decoding via Camera) - - - -Loading... - - - - - \ No newline at end of file diff --git a/1.hello-world/14.read-video-webview/ios/dbrjswebview/html/decodeFileInVideo.html b/1.hello-world/14.read-video-webview/ios/dbrjswebview/html/decodeFileInVideo.html deleted file mode 100644 index 9b526efc..00000000 --- a/1.hello-world/14.read-video-webview/ios/dbrjswebview/html/decodeFileInVideo.html +++ /dev/null @@ -1,71 +0,0 @@ - - - - - - - - - - Dynamsoft Barcode Reader Sample - Hello World (Decoding via Camera) - - - -Loading... - - - - - diff --git a/1.hello-world/2.read-an-image.html b/1.hello-world/2.read-an-image.html deleted file mode 100644 index 65991b04..00000000 --- a/1.hello-world/2.read-an-image.html +++ /dev/null @@ -1,141 +0,0 @@ - - - - - - - - - Dynamsoft Barcode Reader Sample - Read an Image - - - - -
-

Read Barcode from Images

- - -

Loading...

- -
-

All Results:

-
-
- - - - - - diff --git a/1.hello-world/3.read-video-angular/README.md b/1.hello-world/3.read-video-angular/README.md deleted file mode 100644 index e0800477..00000000 --- a/1.hello-world/3.read-video-angular/README.md +++ /dev/null @@ -1,310 +0,0 @@ -# Hello World Sample for Angular - -[Angular](https://angular.io/) is one of the most popular and mature JavaScript frameworks. Check out the following on how to implement Dynamsoft Barcode Reader JavaScript SDK (hereafter called "the library") into an Angular application. - -## Official Sample - -* Hello World in Angular - Demo -* Hello World in Angular - Source Code - -## Preparation - -Make sure you have [node](https://nodejs.org/) and [Angular CLI](https://cli.angular.io/) installed. `node 14.21.3` and `Angular CLI 15.2.1` are used in the example below. - -## Create the sample project - -### Create an out-of-the-box raw Angular application - -```cmd -ng new my-app -``` - -### **CD** to the root directory of the application and install necessary library - -```cmd -cd my-app -npm install dynamsoft-javascript-barcode -``` - -## Start to implement - -### Add a file "dbr.ts" under "src/app/" to configure the library - -```typescript -import { BarcodeReader } from 'dynamsoft-javascript-barcode'; -BarcodeReader.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9'; -BarcodeReader.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode/dist/"; -``` - -> Note: -> -> * `license` specify a license key to use the library. You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=sample&product=dbr&package=js to get your own trial license good for 30 days. -> * `engineResourcePath` tells the library where to get the necessary resources at runtime. - -### Generate three components -* `video-decode` component helps read barcode from camera. -```cmd -ng generate component video-decode -``` -* `img-decode` component helps read barcode from still images. -```cmd -ng generate component img-decode -``` -* `hello-world` component offers buttons to switch components above. -```cmd -ng generate component hello-world -``` - -### Edit the video-decode component - -* There is a default UI in `.\node_modules\dynamsoft-javascript-barcode\dist\dbr.ui.html`, which we will use in this sample. Copy everything in this file and replace the original code in `video-decode.component.html`. If you want to customize the UI, see more in `2.ui-tweaking` or [User Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/features/customize-the-ui.html?lang=js). - -* In `video-decode.component.ts`, add code for initializing and destroying the `BarcodeScanner` instance. - -```typescript -import { Component, OnInit } from '@angular/core'; -import { BarcodeScanner } from 'dynamsoft-javascript-barcode'; -@Component({ - selector: 'app-video-decode', - templateUrl: './video-decode.component.html', - styleUrls: ['./video-decode.component.css'], -}) -export class VideoDecodeComponent implements OnInit { - pScanner: Promise | null = null; - - async ngOnInit(): Promise { - try { - const scanner = await (this.pScanner = BarcodeScanner.createInstance()); - await scanner.setUIElement( - (document.querySelector('.dce-video-container') as HTMLElement).parentElement as HTMLElement - ); - scanner.onFrameRead = (results: any) => { - for (const result of results) { - console.log(result.barcodeText); - } - }; - scanner.onUniqueRead = (txt, result) => { - alert(txt); - }; - await scanner.open(); - } catch (ex: any) { - let errMsg; - if (ex.message?.includes('network connection error')) { - errMsg = - 'Failed to connect to Dynamsoft License Server: network connection error. Check your Internet connection or contact Dynamsoft Support (support@dynamsoft.com) to acquire an offline license.'; - } else { - errMsg = ex.message || ex; - } - console.error(errMsg); - alert(errMsg); - } - } - async ngOnDestroy() { - if (this.pScanner) { - (await this.pScanner).destroyContext(); - console.log('BarcodeScanner Component Unmount'); - } - } -} -``` - -> Note: -> -> * The method `createInstance()` is called to initialize the library as soon as the component initializes. -> * To release resources timely, the `BarcodeScanner` instance is destroyed with the component in the callback `ngOnDestroy` . -> * The `setUIElement()` method is used to define the user interface (UI) for the library using the native element in `video-decode.component.html`, which was copied in the previous step. -### Edit the img-decode component - -* Replace the original code in `img-decode.component.html` with code below to select a local image via `input` element. - -```html -
-``` - -* Add CSS style in `img-decode.component.css`. - -```css -.ImgDecode { - display: flex; - justify-content: center; - align-items: center; - width: 100%; - border: 1px solid black -} -``` - -* In `img-decode.component.ts`, add code for initializing and destroying the `BarcodeReader` instance. - -```typescript -import { Component, OnInit } from '@angular/core'; -import { BarcodeReader } from 'dynamsoft-javascript-barcode' - -@Component({ - selector: 'app-img-decode', - templateUrl: './img-decode.component.html', - styleUrls: ['./img-decode.component.css'] -}) -export class ImgDecodeComponent implements OnInit { - pReader: Promise | null = null; - - async ngOnInit(): Promise { } - - decodeImg = async (e: any) => { - try { - const reader = await (this.pReader = this.pReader || BarcodeReader.createInstance()); - const results = await reader.decode(e.target.files[0]); - for (const result of results) { - alert(result.barcodeText); - } - if (!results.length) { alert('No barcode found'); } - } catch (ex: any) { - let errMsg; - if (ex.message?.includes("network connection error")) { - errMsg = "Failed to connect to Dynamsoft License Server: network connection error. Check your Internet connection or contact Dynamsoft Support (support@dynamsoft.com) to acquire an offline license."; - } else { - errMsg = ex.message||ex; - } - console.error(errMsg); - alert(errMsg); - } - e.target.value = ''; - } - - async ngOnDestroy() { - if (this.pReader) { - (await this.pReader).destroyContext(); - console.log('ImgDecode Component Unmount'); - } - } -} -``` - -> Note: -> -> * The method `createInstance()` is called to initialize the library as soon as the component initializes. -> * To release resources timely, the `BarcodeReader` instance is destroyed with the component in the callback `ngOnDestroy` . - -### Edit the hello-world component - -* Use the components in `hello-world.component.html`. - -```html -
-

Hello World for Angularlogo -

-
- - -
-
- - -
-
-``` - -* Define the style of the element in `hello-world.component.css`. - -```css -.helloWorld { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - width: 100%; - height: 100%; - color: #455A64; -} - -button { - font-size: 1.5rem; - margin: 1.5vh 0; - border: 1px solid black; - background-color: white; - color: black; -} - -.container { - margin: 2vmin auto; - height: 70vh; - width: 80vw; -} - -h1 { - font-size: 1.5em; -} -``` - -* Add following code to `hello-world.component.ts`. - -```typescript -import { Component, OnInit } from '@angular/core'; -import '../dbr'; // import side effects. The license, engineResourcePath, so on. -import { BarcodeScanner } from 'dynamsoft-javascript-barcode'; - -@Component({ - selector: 'app-hello-world', - templateUrl: './hello-world.component.html', - styleUrls: ['./hello-world.component.css'] -}) -export class HelloWorldComponent implements OnInit { - bShowScanner = true; - bShowImgDecode = false; - async ngOnInit(): Promise { - // Load the library on page load to speed things up. - try { - await BarcodeScanner.loadWasm(); - } catch (ex: any) { - let errMsg; - if (ex.message?.includes("network connection error")) { - errMsg = "Failed to connect to Dynamsoft License Server: network connection error. Check your Internet connection or contact Dynamsoft Support (support@dynamsoft.com) to acquire an offline license."; - } else { - errMsg = ex.message||ex; - } - console.error(errMsg); - alert(errMsg); - } - } - showScanner(): void { - this.bShowScanner = true; - this.bShowImgDecode = false; - } - showImgDecode(): void { - this.bShowScanner = false; - this.bShowImgDecode = true; - } -} -``` - -> NOTE : -> -> * The method `loadWasm()` initializes the library in the background. - -### Add the hello-world component to `app.component.html` - -Edit the file `app.component.html` to contain nothing but the following - -```html - -``` - -* Try running the project. - -```cmd -ng serve -``` - -If you have followed all the steps correctly, you should now have a functioning page that allows you to scan barcodes from a webcam or a built-in camera. Additionally, if you want to decode a local image, you can click the `Image Decode` button and select the image you want to decode. Any barcodes that are detected will be displayed in a dialog. - -## Development server - -Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. - -## Build - -Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build. - -## Support - -If you have any questions, feel free to [contact Dynamsoft support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme). diff --git a/1.hello-world/3.read-video-angular/package.json b/1.hello-world/3.read-video-angular/package.json deleted file mode 100644 index 38cd3320..00000000 --- a/1.hello-world/3.read-video-angular/package.json +++ /dev/null @@ -1,39 +0,0 @@ -{ - "name": "read-video-angular", - "version": "0.0.0", - "scripts": { - "ng": "ng", - "start": "ng serve", - "build": "ng build", - "watch": "ng build --watch --configuration development", - "test": "ng test" - }, - "private": true, - "dependencies": { - "@angular/animations": "^15.2.0", - "@angular/common": "^15.2.0", - "@angular/compiler": "^15.2.0", - "@angular/core": "^15.2.0", - "@angular/forms": "^15.2.0", - "@angular/platform-browser": "^15.2.0", - "@angular/platform-browser-dynamic": "^15.2.0", - "@angular/router": "^15.2.0", - "dynamsoft-javascript-barcode": "^9.6.32", - "rxjs": "~7.8.0", - "tslib": "^2.3.0", - "zone.js": "~0.12.0" - }, - "devDependencies": { - "@angular-devkit/build-angular": "^15.2.1", - "@angular/cli": "~15.2.1", - "@angular/compiler-cli": "^15.2.0", - "@types/jasmine": "~4.3.0", - "jasmine-core": "~4.5.0", - "karma": "~6.4.0", - "karma-chrome-launcher": "~3.1.0", - "karma-coverage": "~2.2.0", - "karma-jasmine": "~5.1.0", - "karma-jasmine-html-reporter": "~2.0.0", - "typescript": "~4.9.4" - } -} diff --git a/1.hello-world/3.read-video-angular/src/app/dbr.ts b/1.hello-world/3.read-video-angular/src/app/dbr.ts deleted file mode 100644 index 4531dccc..00000000 --- a/1.hello-world/3.read-video-angular/src/app/dbr.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { BarcodeReader } from 'dynamsoft-javascript-barcode'; - -/** LICENSE ALERT - README - * To use the library, you need to first specify a license key using the API "license" as shown below. - */ - -BarcodeReader.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9'; - -/** - * You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&product=dbr&package=js to get your own trial license good for 30 days. - * Note that if you downloaded this sample from Dynamsoft while logged in, the above license key may already be your own 30-day trial license. - * For more information, see https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=9.6.32&utm_source=github#specify-the-license or contact support@dynamsoft.com. - * LICENSE ALERT - THE END - */ - -BarcodeReader.engineResourcePath = 'https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.32/dist/'; \ No newline at end of file diff --git a/1.hello-world/3.read-video-angular/src/app/hello-world/hello-world.component.html b/1.hello-world/3.read-video-angular/src/app/hello-world/hello-world.component.html deleted file mode 100644 index 2043d822..00000000 --- a/1.hello-world/3.read-video-angular/src/app/hello-world/hello-world.component.html +++ /dev/null @@ -1,13 +0,0 @@ -
-

Hello World for Angularlogo -

-
- - -
-
- - -
-
\ No newline at end of file diff --git a/1.hello-world/3.read-video-angular/src/app/hello-world/hello-world.component.ts b/1.hello-world/3.read-video-angular/src/app/hello-world/hello-world.component.ts deleted file mode 100644 index 06ebc284..00000000 --- a/1.hello-world/3.read-video-angular/src/app/hello-world/hello-world.component.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import '../dbr'; // import side effects. The license, engineResourcePath, so on. -import { BarcodeScanner } from 'dynamsoft-javascript-barcode'; - -@Component({ - selector: 'app-hello-world', - templateUrl: './hello-world.component.html', - styleUrls: ['./hello-world.component.css'] -}) -export class HelloWorldComponent implements OnInit { - bShowScanner = true; - bShowImgDecode = false; - async ngOnInit(): Promise { - // Load the library on page load to speed things up. - try { - await BarcodeScanner.loadWasm(); - } catch (ex: any) { - let errMsg; - if (ex.message?.includes("network connection error")) { - errMsg = "Failed to connect to Dynamsoft License Server: network connection error. Check your Internet connection or contact Dynamsoft Support (support@dynamsoft.com) to acquire an offline license."; - } else { - errMsg = ex.message||ex; - } - console.error(errMsg); - alert(errMsg); - } - } - showScanner(): void { - this.bShowScanner = true; - this.bShowImgDecode = false; - } - showImgDecode(): void { - this.bShowScanner = false; - this.bShowImgDecode = true; - } -} \ No newline at end of file diff --git a/1.hello-world/3.read-video-angular/src/app/img-decode/img-decode.component.html b/1.hello-world/3.read-video-angular/src/app/img-decode/img-decode.component.html deleted file mode 100644 index 8847ea2a..00000000 --- a/1.hello-world/3.read-video-angular/src/app/img-decode/img-decode.component.html +++ /dev/null @@ -1 +0,0 @@ -
\ No newline at end of file diff --git a/1.hello-world/3.read-video-angular/src/app/img-decode/img-decode.component.spec.ts b/1.hello-world/3.read-video-angular/src/app/img-decode/img-decode.component.spec.ts deleted file mode 100644 index 8217984b..00000000 --- a/1.hello-world/3.read-video-angular/src/app/img-decode/img-decode.component.spec.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { ImgDecodeComponent } from './img-decode.component'; - -describe('ImgDecodeComponent', () => { - let component: ImgDecodeComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ ImgDecodeComponent ] - }) - .compileComponents(); - - fixture = TestBed.createComponent(ImgDecodeComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/1.hello-world/3.read-video-angular/src/app/img-decode/img-decode.component.ts b/1.hello-world/3.read-video-angular/src/app/img-decode/img-decode.component.ts deleted file mode 100644 index e21f7904..00000000 --- a/1.hello-world/3.read-video-angular/src/app/img-decode/img-decode.component.ts +++ /dev/null @@ -1,43 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { BarcodeReader } from 'dynamsoft-javascript-barcode' - -@Component({ - selector: 'app-img-decode', - templateUrl: './img-decode.component.html', - styleUrls: ['./img-decode.component.css'] -}) -export class ImgDecodeComponent implements OnInit { - pReader: Promise | null = null; - - async ngOnInit(): Promise { - this.pReader = BarcodeReader.createInstance(); - } - - decodeImg = async (e: any) => { - try { - const reader = await this.pReader; - const results = await reader!.decode(e.target.files[0]); - for (const result of results) { - alert(result.barcodeText); - } - if (!results.length) { alert('No barcode found'); } - } catch (ex: any) { - let errMsg; - if (ex.message?.includes("network connection error")) { - errMsg = "Failed to connect to Dynamsoft License Server: network connection error. Check your Internet connection or contact Dynamsoft Support (support@dynamsoft.com) to acquire an offline license."; - } else { - errMsg = ex.message||ex; - } - console.error(errMsg); - alert(errMsg); - } - e.target.value = ''; - } - - async ngOnDestroy() { - if (this.pReader) { - (await this.pReader).destroyContext(); - } - console.log('ImgDecode Component Unmount'); - } -} diff --git a/1.hello-world/3.read-video-angular/src/app/video-decode/video-decode.component.css b/1.hello-world/3.read-video-angular/src/app/video-decode/video-decode.component.css deleted file mode 100644 index e69de29b..00000000 diff --git a/1.hello-world/3.read-video-angular/src/app/video-decode/video-decode.component.html b/1.hello-world/3.read-video-angular/src/app/video-decode/video-decode.component.html deleted file mode 100644 index 2b478f2f..00000000 --- a/1.hello-world/3.read-video-angular/src/app/video-decode/video-decode.component.html +++ /dev/null @@ -1,113 +0,0 @@ -
- - -
-
- -
-
- - -
- - -
- - - - - - - - - - - - - - - - - - - - - - -
-
- \ No newline at end of file diff --git a/1.hello-world/3.read-video-angular/src/app/video-decode/video-decode.component.spec.ts b/1.hello-world/3.read-video-angular/src/app/video-decode/video-decode.component.spec.ts deleted file mode 100644 index 9527c984..00000000 --- a/1.hello-world/3.read-video-angular/src/app/video-decode/video-decode.component.spec.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { VideoDecodeComponent } from './video-decode.component'; - -describe('VideoDecodeComponent', () => { - let component: VideoDecodeComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ VideoDecodeComponent ] - }) - .compileComponents(); - - fixture = TestBed.createComponent(VideoDecodeComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/1.hello-world/3.read-video-angular/src/app/video-decode/video-decode.component.ts b/1.hello-world/3.read-video-angular/src/app/video-decode/video-decode.component.ts deleted file mode 100644 index 2c67cfb8..00000000 --- a/1.hello-world/3.read-video-angular/src/app/video-decode/video-decode.component.ts +++ /dev/null @@ -1,44 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { BarcodeScanner } from 'dynamsoft-javascript-barcode'; -@Component({ - selector: 'app-video-decode', - templateUrl: './video-decode.component.html', - styleUrls: ['./video-decode.component.css'], -}) -export class VideoDecodeComponent implements OnInit { - pScanner: Promise | null = null; - - async ngOnInit(): Promise { - try { - const scanner = await (this.pScanner = BarcodeScanner.createInstance()); - await scanner.setUIElement( - (document.querySelector('.dce-video-container') as HTMLElement).parentElement as HTMLElement - ); - scanner.onFrameRead = (results: any) => { - for (const result of results) { - console.log(result.barcodeText); - } - }; - scanner.onUniqueRead = (txt, result) => { - alert(txt); - }; - await scanner.open(); - } catch (ex: any) { - let errMsg; - if (ex.message?.includes('network connection error')) { - errMsg = - 'Failed to connect to Dynamsoft License Server: network connection error. Check your Internet connection or contact Dynamsoft Support (support@dynamsoft.com) to acquire an offline license.'; - } else { - errMsg = ex.message || ex; - } - console.error(errMsg); - alert(errMsg); - } - } - async ngOnDestroy() { - if (this.pScanner) { - (await this.pScanner).destroyContext(); - } - console.log('BarcodeScanner Component Unmount'); - } -} \ No newline at end of file diff --git a/1.hello-world/4.read-video-react/README.md b/1.hello-world/4.read-video-react/README.md deleted file mode 100644 index ece939a5..00000000 --- a/1.hello-world/4.read-video-react/README.md +++ /dev/null @@ -1,368 +0,0 @@ -# Hello World Sample for React - -[React](https://reactjs.org/) is a JavaScript library meant explicitly for creating interactive UIs. Follow this guide to learn how to implement Dynamsoft Barcode Reader JavaScript SDK (hereafter called "the library") into a React application. Note that in this sample we will use `TypeScript` and define components as classes. Also, there is another sample `read-video-react-hooks` using `Hooks` in React. - -## Official Sample - -* Hello World in React - Demo -* Hello World in React - Source Code - -## Preparation - -Make sure you have [node](https://nodejs.org/) installed. `node 14.21.3` and `react 18.2.0` are used in the example below. - -## Create the sample project - -### Create a Bootstrapped Raw React Application with TypeScript - -```cmd -npx create-react-app read-video-react --template typescript -``` - -### **CD** to the root directory of the application and install necessary library - -```cmd -cd read-video-react -npm install dynamsoft-javascript-barcode -``` - -## Start to implement - -### Add a file "dbr.ts" under "/src/" to configure the library - -```ts -import { BarcodeReader } from 'dynamsoft-javascript-barcode'; -BarcodeReader.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9'; -BarcodeReader.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode/dist/"; -``` - -> Note: -> -> * `license` specify a license key to use the library. You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=sample&product=dbr&package=js to get your own trial license good for 30 days. -> * `engineResourcePath` tells the library where to get the necessary resources at runtime. - -### Build directory structure - -* Create a directory "components" under "/src/", and then create another three directories "HelloWorld", "VideoDecode" and "ImgDecode" under "/src/components/". - -### Create and edit the `VideoDecode` component - -* Create `VideoDecode.tsx` and `VideoDecode.css` under "/src/components/VideoDecode/". The `VideoDecode` component uses `BarcodeScanner` class of the library to decode barcodes via camera. - -* In `VideoDecode.tsx`, add code for initializing and destroying the `BarcodeScanner` instance. - -```tsx -import { BarcodeScanner } from "dynamsoft-javascript-barcode"; -import React from 'react'; -import './VideoDecode.css' - -class VideoDecode extends React.Component { - pScanner: Promise|null = null; - elRef: React.RefObject = React.createRef(); - async componentDidMount() { - try { - const scanner = await (this.pScanner = BarcodeScanner.createInstance()); - // Should judge if scanner is destroyed after 'await', as in development React runs setup and cleanup one extra time before the actual setup in Strict Mode. - if(scanner.isContextDestroyed()) return; - await scanner.setUIElement(this.elRef.current!); - // Should judge if scanner is destroyed after 'await', as in development React runs setup and cleanup one extra time before the actual setup in Strict Mode. - if(scanner.isContextDestroyed()) return; - scanner.onFrameRead = results => { - for (let result of results) { - console.log(result.barcodeText); - } - }; - scanner.onUniqueRead = (txt, result) => { - alert(txt); - } - await scanner.open(); - } catch (ex: any) { - if (ex.message.indexOf("network connection error")) { - let customMsg = "Failed to connect to Dynamsoft License Server: network connection error. Check your Internet connection or contact Dynamsoft Support (support@dynamsoft.com) to acquire an offline license."; - console.log(customMsg); - alert(customMsg); - } - throw ex; - } - } - async componentWillUnmount() { - if (this.pScanner) { - (await this.pScanner).destroyContext(); - console.log('BarcodeScanner Component Unmount'); - } - } - shouldComponentUpdate() { - // Never update UI after mount, dbrjs sdk use native way to bind event, update will remove it. - return false; - } - render() { - return ( -
- - -
-
-
-
-
- - -
-
- - - -
-
- ); - } -} - -export default VideoDecode; -``` - -> Note: -> -> * The html code in `render()` and the following code builds the UI for the library. -> -> ```jsx -> await scanner.setUIElement(this.elRef.current!); -> ``` -> -> * The component should never update (check the code for `shouldComponentUpdate()`) so that events bound to the UI stay valid. - -* Define the style of the element in `VideoDecode.css` - -```css -.component-barcode-scanner{width:100%;height:100%;/* min-width:640px; */min-height:480px;background:#eee;position:relative;resize:both;} -.dce-bg-loading{display:none;animation:1s linear infinite dce-rotate;width:40%;height:40%;position:absolute;margin:auto;left:0;top:0;right:0;bottom:0;fill:#aaa;} -.dce-bg-camera{display:none;width:40%;height:40%;position:absolute;margin:auto;left:0;top:0;right:0;bottom:0;fill:#aaa;} -.dce-video-container{position:absolute;left:0;top:0;width:100%;height:100%;} -.dce-scanarea{width:100%;height:100%;position:absolute;left:0;top:0;} -.dce-scanlight{display:none;width:100%;height:3%;position:absolute;animation:3s infinite dce-scanlight;border-radius:50%;box-shadow:0px 0px 2vw 1px #00e5ff;background:#fff;} -.div-select-container{position:absolute;left:0;top:0;} -.dce-sel-camera{display:block;} -.dce-sel-resolution{display:block;margin-top:5px;} -.dbr-msg-poweredby{position:absolute;left:50%;bottom:10%;transform:translateX(-50%);} -.dbr-msg-poweredby svg {height:max(3vmin,17px);fill:#FFFFFF;} -@keyframes dce-rotate{from{transform:rotate(0turn);}to{transform:rotate(1turn);}} -@keyframes dce-scanlight{from{top:0;}to{top:97%;}} -``` - -### Create and edit the `ImgDecode` component - -* Create `ImgDecode.tsx` and `ImgDecode.css` under "/src/components/ImgDecode/". The `ImgDecode` component uses `BarcodeReader` class of the library to help decode barcodes in an image. - -* In `ImgDecode.tsx`, add code for initializing and destroying the `BarcodeReader` instance. - -```tsx -import React, { ChangeEvent, Component } from 'react' -import { BarcodeReader } from "dynamsoft-javascript-barcode"; -import './ImgDecode.css' - -export default class ImgDecode extends Component { - pReader: Promise = BarcodeReader.createInstance(); - - decodeImg = async (e: ChangeEvent) => { - try { - const reader = await this.pReader; - let results = await reader.decode(e.target.files![0]); - for (let result of results) { - alert(result.barcodeText); - } - if (!results.length) { alert('No barcode found'); } - } catch (ex: any) { - if (ex.message.indexOf("network connection error")) { - let customMsg = "Failed to connect to Dynamsoft License Server: network connection error. Check your Internet connection or contact Dynamsoft Support (support@dynamsoft.com) to acquire an offline license."; - console.log(customMsg); - alert(customMsg); - } - throw ex; - } - e.target.value = ''; - } - - async componentWillUnmount() { - if (this.pReader) { - (await this.pReader).destroyContext(); - console.log('ImgDecode Component Unmount'); - } - } - - render() { - return ( -
- ) - } -} -``` - -* Define the style of the element in `ImgDecode.css` - -```css -.ImgDecode { - display: flex; - justify-content: center; - align-items: center; - border: 1px solid black -} -``` - -### Create and edit the HelloWorld component - -* Create `HelloWorld.tsx` and `HelloWorld.css` under "/src/components/HelloWorld/". The `HelloWorld` component offers buttons to switch components between `VideoDecode` and `ImgDecode`; - -* Add following code to `HelloWorld.tsx`. - -```tsx -import './HelloWorld.css'; -import reactLogo from '../../logo.svg'; -import "../../dbr"; // import side effects. The license, engineResourcePath, so on. -import { BarcodeReader } from "dynamsoft-javascript-barcode"; -import React from 'react'; -import VideoDecode from '../VideoDecode/VideoDecode'; -import ImgDecode from '../ImgDecode/ImgDecode'; - -interface isState { - bShowScanner: boolean, - bShowImgDecode: boolean -} - -class HelloWorld extends React.Component { - state = { - bShowScanner: true, - bShowImgDecode: false - }; - - async componentDidMount() { - try { - await BarcodeReader.loadWasm(); - } catch (ex: any) { - if (ex.message.indexOf("network connection error")) { - let customMsg = "Failed to connect to Dynamsoft License Server: network connection error. Check your Internet connection or contact Dynamsoft Support (support@dynamsoft.com) to acquire an offline license."; - console.log(customMsg); - alert(customMsg); - } - throw ex; - } - } - - showScanner = () => { - this.setState({ - bShowScanner: true, - bShowImgDecode: false - }); - } - - showImgDecode = () => { - this.setState({ - bShowScanner: false, - bShowImgDecode: true - }); - } - - render() { - return ( -
-

Hello World for Reactlogo

-
- - -
-
- {this.state.bShowScanner ? () : ""} - {this.state.bShowImgDecode ? () : ""} -
-
- ); - } -} -export default HelloWorld; -``` - -> NOTE : -> -> * The method `loadWasm()` initializes the library in the background. - -* Define the style of the element in `HelloWorld.css` - -```css -.helloWorld { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - width: 100%; - height: 100%; - color: #455A64; -} - -h1 { - font-size: 1.5em; -} - -button { - font-size: 1.5rem; - margin: 1.5vh 0; - border: 1px solid black; - background-color: white; - color: black; -} - -.container { - margin: 2vmin auto; - text-align: center; - font-size: medium; - width: 80vw; -} -``` - -### Add the `HelloWorld` component to `App.tsx` - -Edit the file `App.tsx` to be like this - -```jsx -import React from 'react'; -import './App.css'; -import HelloWorld from './components/HelloWorld/HelloWorld'; - -function App() { - return ( -
- -
- ); -} - -export default App; -``` - -* Try running the project. - -```cmd -npm start -``` - -If you have followed all the steps correctly, you should now have a functioning page that allows you to scan barcodes from a webcam or a built-in camera. Additionally, if you want to decode a local image, you can click the `Image Decode` button and select the image you want to decode. Any barcodes that are detected will be displayed in a dialog. - -## Development server - -Runs the app in the development mode.\ -Open [http://localhost:3000](http://localhost:3000) to view it in the browser. - -The page will reload if you make edits.\ -You will also see any lint errors in the console. - -## Build - -Builds the app for production to the `build` folder.\ -It correctly bundles React in production mode and optimizes the build for the best performance. - -The build is minified and the filenames include the hashes.\ -Your app is ready to be deployed! - -See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. - -## Support - -If you have any questions, feel free to [contact Dynamsoft support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme). \ No newline at end of file diff --git a/1.hello-world/4.read-video-react/src/components/HelloWorld/HelloWorld.tsx b/1.hello-world/4.read-video-react/src/components/HelloWorld/HelloWorld.tsx deleted file mode 100644 index a61e1b7c..00000000 --- a/1.hello-world/4.read-video-react/src/components/HelloWorld/HelloWorld.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import './HelloWorld.css'; -import reactLogo from '../../logo.svg'; -import "../../dbr"; // import side effects. The license, engineResourcePath, so on. -import { BarcodeReader } from "dynamsoft-javascript-barcode"; -import React from 'react'; -import VideoDecode from '../VideoDecode/VideoDecode'; -import ImgDecode from '../ImgDecode/ImgDecode'; - -interface isState { - bShowScanner: boolean, - bShowImgDecode: boolean -} - -class HelloWorld extends React.Component { - state = { - bShowScanner: true, - bShowImgDecode: false - }; - - async componentDidMount() { - try { - await BarcodeReader.loadWasm(); - } catch (ex: any) { - if (ex.message.indexOf("network connection error")) { - let customMsg = "Failed to connect to Dynamsoft License Server: network connection error. Check your Internet connection or contact Dynamsoft Support (support@dynamsoft.com) to acquire an offline license."; - console.log(customMsg); - alert(customMsg); - } - throw ex; - } - } - - showScanner = () => { - this.setState({ - bShowScanner: true, - bShowImgDecode: false - }); - } - - showImgDecode = () => { - this.setState({ - bShowScanner: false, - bShowImgDecode: true - }); - } - - render() { - return ( -
-

Hello World for Reactlogo

-
- - -
-
- {this.state.bShowScanner ? () : ""} - {this.state.bShowImgDecode ? () : ""} -
-
- ); - } -} -export default HelloWorld; diff --git a/1.hello-world/4.read-video-react/src/components/ImgDecode/ImgDecode.tsx b/1.hello-world/4.read-video-react/src/components/ImgDecode/ImgDecode.tsx deleted file mode 100644 index daeec0b0..00000000 --- a/1.hello-world/4.read-video-react/src/components/ImgDecode/ImgDecode.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import React, { ChangeEvent, Component } from 'react' -import { BarcodeReader } from "dynamsoft-javascript-barcode"; -import './ImgDecode.css' - -export default class ImgDecode extends Component { - pReader: Promise = BarcodeReader.createInstance(); - - decodeImg = async (e: ChangeEvent) => { - try { - const reader = await this.pReader; - let results = await reader.decode(e.target.files![0]); - for (let result of results) { - alert(result.barcodeText); - } - if (!results.length) { alert('No barcode found'); } - } catch (ex: any) { - if (ex.message.indexOf("network connection error")) { - let customMsg = "Failed to connect to Dynamsoft License Server: network connection error. Check your Internet connection or contact Dynamsoft Support (support@dynamsoft.com) to acquire an offline license."; - console.log(customMsg); - alert(customMsg); - } - throw ex; - } - e.target.value = ''; - } - - async componentWillUnmount() { - if (this.pReader) { - (await this.pReader).destroyContext(); - console.log('ImgDecode Component Unmount'); - } - } - - render() { - return ( -
- ) - } -} \ No newline at end of file diff --git a/1.hello-world/4.read-video-react/src/components/VideoDecode/VideoDecode.css b/1.hello-world/4.read-video-react/src/components/VideoDecode/VideoDecode.css deleted file mode 100644 index 3bac7c0e..00000000 --- a/1.hello-world/4.read-video-react/src/components/VideoDecode/VideoDecode.css +++ /dev/null @@ -1,13 +0,0 @@ -.component-barcode-scanner{width:100%;height:100%;/* min-width:640px; */min-height:480px;background:#eee;position:relative;resize:both;} -.dce-bg-loading{display:none;animation:1s linear infinite dce-rotate;width:40%;height:40%;position:absolute;margin:auto;left:0;top:0;right:0;bottom:0;fill:#aaa;} -.dce-bg-camera{display:none;width:40%;height:40%;position:absolute;margin:auto;left:0;top:0;right:0;bottom:0;fill:#aaa;} -.dce-video-container{position:absolute;left:0;top:0;width:100%;height:100%;} -.dce-scanarea{width:100%;height:100%;position:absolute;left:0;top:0;} -.dce-scanlight{display:none;width:100%;height:3%;position:absolute;animation:3s infinite dce-scanlight;border-radius:50%;box-shadow:0px 0px 2vw 1px #00e5ff;background:#fff;} -.div-select-container{position:absolute;left:0;top:0;} -.dce-sel-camera{display:block;} -.dce-sel-resolution{display:block;margin-top:5px;} -.dbr-msg-poweredby{position:absolute;left:50%;bottom:10%;transform:translateX(-50%);} -.dbr-msg-poweredby svg {height:max(3vmin,17px);fill:#FFFFFF;} -@keyframes dce-rotate{from{transform:rotate(0turn);}to{transform:rotate(1turn);}} -@keyframes dce-scanlight{from{top:0;}to{top:97%;}} \ No newline at end of file diff --git a/1.hello-world/4.read-video-react/src/components/VideoDecode/VideoDecode.tsx b/1.hello-world/4.read-video-react/src/components/VideoDecode/VideoDecode.tsx deleted file mode 100644 index 3ca2cd36..00000000 --- a/1.hello-world/4.read-video-react/src/components/VideoDecode/VideoDecode.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import { BarcodeScanner } from "dynamsoft-javascript-barcode"; -import React from 'react'; -import './VideoDecode.css' - -class VideoDecode extends React.Component { - pScanner: Promise|null = null; - elRef: React.RefObject = React.createRef(); - async componentDidMount() { - try { - const scanner = await (this.pScanner = BarcodeScanner.createInstance()); - // Should judge if scanner is destroyed after 'await', as in development React runs setup and cleanup one extra time before the actual setup in Strict Mode. - if(scanner.isContextDestroyed()) return; - await scanner.setUIElement(this.elRef.current!); - // Should judge if scanner is destroyed after 'await', as in development React runs setup and cleanup one extra time before the actual setup in Strict Mode. - if(scanner.isContextDestroyed()) return; - scanner.onFrameRead = results => { - for (let result of results) { - console.log(result.barcodeText); - } - }; - scanner.onUniqueRead = (txt, result) => { - alert(txt); - } - await scanner.open(); - } catch (ex: any) { - if (ex.message.indexOf("network connection error")) { - let customMsg = "Failed to connect to Dynamsoft License Server: network connection error. Check your Internet connection or contact Dynamsoft Support (support@dynamsoft.com) to acquire an offline license."; - console.log(customMsg); - alert(customMsg); - } - throw ex; - } - } - async componentWillUnmount() { - if (this.pScanner) { - (await this.pScanner).destroyContext(); - console.log('BarcodeScanner Component Unmount'); - } - } - shouldComponentUpdate() { - // Never update UI after mount, dbrjs sdk use native way to bind event, update will remove it. - return false; - } - render() { - return ( -
- - -
-
-
-
-
- - -
-
- - - -
-
- ); - } -} - -export default VideoDecode; \ No newline at end of file diff --git a/1.hello-world/4.read-video-react/src/dbr.ts b/1.hello-world/4.read-video-react/src/dbr.ts deleted file mode 100644 index 716618cc..00000000 --- a/1.hello-world/4.read-video-react/src/dbr.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { BarcodeReader } from "dynamsoft-javascript-barcode"; - -/** LICENSE ALERT - README - * To use the library, you need to first specify a license key using the API "license" as shown below. - */ - -BarcodeReader.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9'; - -/** - * You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&product=dbr&package=js to get your own trial license good for 30 days. - * Note that if you downloaded this sample from Dynamsoft while logged in, the above license key may already be your own 30-day trial license. - * For more information, see https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=9.6.32&utm_source=github#specify-the-license or contact support@dynamsoft.com. - * LICENSE ALERT - THE END - */ - -BarcodeReader.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.32/dist/"; \ No newline at end of file diff --git a/1.hello-world/5.read-video-vue/.gitignore b/1.hello-world/5.read-video-vue/.gitignore deleted file mode 100644 index 133da84e..00000000 --- a/1.hello-world/5.read-video-vue/.gitignore +++ /dev/null @@ -1,27 +0,0 @@ -# Logs -logs -*.log -npm-debug.log* -yarn-debug.log* -yarn-error.log* -pnpm-debug.log* -lerna-debug.log* - -node_modules -.DS_Store -dist -dist-ssr -*.local - -/cypress/videos/ -/cypress/screenshots/ - -# Editor directories and files -.vscode -!.vscode/extensions.json -.idea -*.suo -*.ntvs* -*.njsproj -*.sln -*.sw? diff --git a/1.hello-world/5.read-video-vue/README.md b/1.hello-world/5.read-video-vue/README.md deleted file mode 100644 index 3b25beba..00000000 --- a/1.hello-world/5.read-video-vue/README.md +++ /dev/null @@ -1,500 +0,0 @@ -# Hello World Sample for Vue - -[Vue](https://vuejs.org/) is a progressive framework for building user interfaces. Check out the following guide on how to implement Dynamsoft Barcode Reader JavaScript SDK (hereafter called "the library") into a Vue 2 application. - -## Official Sample - -* Hello World in Vue - Demo -* Hello World in Vue - Source Code - -## Preparation - -Make sure you have [node](https://nodejs.org/) installed. `node 14.21.3` and `vue 2.7.7` are used in the example below. - -## Create the sample project - -### Create a Bootstrapped Raw Vue Application - -```cmd -npm create vue@2 -``` - -### **CD** to the root directory of the application and install necessary libraries - -```cmd -npm install -npm install dynamsoft-javascript-barcode -``` - -## Start to implement - -### Add a file "dbr.js" under "/src/" to configure the library - -```typescript -import { BarcodeReader } from 'dynamsoft-javascript-barcode'; -BarcodeReader.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9'; -BarcodeReader.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode/dist/"; -``` - -> Note: -> -> * `license` specify a license key to use the library. You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=sample&product=dbr&package=js to get your own trial license good for 30 days. -> * `engineResourcePath` tells the library where to get the necessary resources at runtime. - -### Create and edit the `VideoDecode` component - -* Add a file `VideoDecode.vue` under "/components/" as the `VideoDecode` component. The `VideoDecode` component uses `BarcodeScanner` class of the library to help decode barcodes via camera. - -* In `VideoDecode.vue`, add code for initializing and destroying the `BarcodeScanner` instance. - -```vue - - - - - - -``` - -> Note: -> -> * The element with class name "component-barcode-scanner" is used to build the UI for the library in this line -> -> ```typescript -> await scanner.setUIElement(this.$el); -> ``` -> -> * To release resources timely, the `BarcodeScanner` instance is destroyed with the component in the callback `beforeDestroy` . - -### Create and edit the `ImgDecode` component - -* Add a file `ImgDecode.vue` under "/components/" as the `ImgDecode` component. The `ImgDecode` component uses `BarcodeReader` class of the library to help decode barcodes in an image. - -* In `ImgDecode.vue`, add code for initializing and destroying the `BarcodeReader` instance. - -```vue - - - - - -``` - -### Add `VideoDecode` and `ImgDecode` components in `HelloWorld.vue` - -```vue - - - - - - -``` - -> NOTE : -> -> * The method `loadWasm()` initializes the library in the background. - -### Add the `HelloWorld` component to `App.vue` - -Edit the file `App.vue` to be like this - -```vue - - - - - -``` - -* Try running the project. - -```cmd -npm run dev -``` - -If you followed all the steps correctly, you will have a working page that turns one of the cameras hooked to or built in your computer or mobile device into a barcode scanner. Also, if you want to decode a local image, just click the `Image Decode` button and select the image you want to decode. Once barcodes are found, the results will show in a dialog. - -## Project setup - -```sh -npm install -``` - -### Compile and Hot-Reload for Development - -```sh -npm run dev -``` - -### Compile and Minify for Production - -```sh -npm run build -``` - -## Support - -If you have any questions, feel free to [contact Dynamsoft support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme). diff --git a/1.hello-world/5.read-video-vue/index.html b/1.hello-world/5.read-video-vue/index.html deleted file mode 100644 index 754e99aa..00000000 --- a/1.hello-world/5.read-video-vue/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - - - - - - - - Hello World for Vue - Dynamsoft Barcode Reader Sample - - - -
- - - diff --git a/1.hello-world/5.read-video-vue/package.json b/1.hello-world/5.read-video-vue/package.json deleted file mode 100644 index 2a6f4a93..00000000 --- a/1.hello-world/5.read-video-vue/package.json +++ /dev/null @@ -1,19 +0,0 @@ -{ - "name": "read-video-vue", - "version": "0.0.0", - "scripts": { - "dev": "vite", - "build": "vite build", - "preview": "vite preview --port 4173" - }, - "dependencies": { - "dynamsoft-javascript-barcode": "^9.6.32", - "vue": "^2.7.7" - }, - "devDependencies": { - "@vitejs/plugin-legacy": "^2.0.0", - "@vitejs/plugin-vue2": "^1.1.2", - "terser": "^5.14.2", - "vite": "^3.0.2" - } -} diff --git a/1.hello-world/5.read-video-vue/src/App.vue b/1.hello-world/5.read-video-vue/src/App.vue deleted file mode 100644 index 8ec216d1..00000000 --- a/1.hello-world/5.read-video-vue/src/App.vue +++ /dev/null @@ -1,19 +0,0 @@ - - - - - diff --git a/1.hello-world/5.read-video-vue/src/assets/base.css b/1.hello-world/5.read-video-vue/src/assets/base.css deleted file mode 100644 index 5427a030..00000000 --- a/1.hello-world/5.read-video-vue/src/assets/base.css +++ /dev/null @@ -1,74 +0,0 @@ -/* color palette from */ -:root { - --vt-c-white: #ffffff; - --vt-c-white-soft: #f8f8f8; - --vt-c-white-mute: #f2f2f2; - - --vt-c-black: #181818; - --vt-c-black-soft: #222222; - --vt-c-black-mute: #282828; - - --vt-c-indigo: #2c3e50; - - --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); - --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); - --vt-c-divider-dadarkrk-1: rgba(84, 84, 84, 0.65); - --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); - - --vt-c-text-light-1: var(--vt-c-indigo); - --vt-c-text-light-2: rgba(60, 60, 60, 0.66); - --vt-c-text-dark-1: var(--vt-c-white); - --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); -} - -/* semantic color variables for this project */ -:root { - --color-background: var(--vt-c-white); - --color-background-soft: var(--vt-c-white-soft); - --color-background-mute: var(--vt-c-white-mute); - - --color-border: var(--vt-c-divider-light-2); - --color-border-hover: var(--vt-c-divider-light-1); - - --color-heading: var(--vt-c-text-light-1); - --color-text: var(--vt-c-text-light-1); - - --section-gap: 160px; -} - -@media (prefers-color-scheme: dark) { - :root { - --color-background: var(--vt-c-black); - --color-background-soft: var(--vt-c-black-soft); - --color-background-mute: var(--vt-c-black-mute); - - --color-border: var(--vt-c-divider-dark-2); - --color-border-hover: var(--vt-c-divider-dark-1); - - --color-heading: var(--vt-c-text-dark-1); - --color-text: var(--vt-c-text-dark-2); - } -} - -*, -*::before, -*::after { - box-sizing: border-box; - margin: 0; - position: relative; - font-weight: normal; -} - -body { - min-height: 100vh; - color: var(--color-text); - background: var(--color-background); - transition: color 0.5s, background-color 0.5s; - line-height: 1.6; - font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, - Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; - font-size: 15px; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} diff --git a/1.hello-world/5.read-video-vue/src/assets/logo.svg b/1.hello-world/5.read-video-vue/src/assets/logo.svg deleted file mode 100644 index bc826fed..00000000 --- a/1.hello-world/5.read-video-vue/src/assets/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/1.hello-world/5.read-video-vue/src/assets/main.css b/1.hello-world/5.read-video-vue/src/assets/main.css deleted file mode 100644 index ce9b7fb8..00000000 --- a/1.hello-world/5.read-video-vue/src/assets/main.css +++ /dev/null @@ -1,35 +0,0 @@ -@import "./base.css"; - -#app { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - - font-weight: normal; -} - -a, -.green { - text-decoration: none; - color: hsla(160, 100%, 37%, 1); - transition: 0.4s; -} - -/* @media (hover: hover) { - a:hover { - background-color: hsla(160, 100%, 37%, 0.2); - } -} - -@media (min-width: 1024px) { - body { - display: flex; - place-items: center; - } - - #app { - display: grid; - grid-template-columns: 1fr 1fr; - padding: 0 2rem; - } -} */ diff --git a/1.hello-world/5.read-video-vue/src/components/HelloWorld.vue b/1.hello-world/5.read-video-vue/src/components/HelloWorld.vue deleted file mode 100644 index 3f438a2c..00000000 --- a/1.hello-world/5.read-video-vue/src/components/HelloWorld.vue +++ /dev/null @@ -1,94 +0,0 @@ - - - - - - diff --git a/1.hello-world/5.read-video-vue/src/components/ImgDecode.vue b/1.hello-world/5.read-video-vue/src/components/ImgDecode.vue deleted file mode 100644 index 05888dc3..00000000 --- a/1.hello-world/5.read-video-vue/src/components/ImgDecode.vue +++ /dev/null @@ -1,52 +0,0 @@ - - - - - \ No newline at end of file diff --git a/1.hello-world/5.read-video-vue/src/components/VideoDecode.vue b/1.hello-world/5.read-video-vue/src/components/VideoDecode.vue deleted file mode 100644 index 9e130a35..00000000 --- a/1.hello-world/5.read-video-vue/src/components/VideoDecode.vue +++ /dev/null @@ -1,219 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/1.hello-world/5.read-video-vue/src/dbr.js b/1.hello-world/5.read-video-vue/src/dbr.js deleted file mode 100644 index 67cc18c3..00000000 --- a/1.hello-world/5.read-video-vue/src/dbr.js +++ /dev/null @@ -1,16 +0,0 @@ -import { BarcodeReader } from "dynamsoft-javascript-barcode"; - -/** LICENSE ALERT - README - * To use the library, you need to first specify a license key using the API "license" as shown below. - */ - -BarcodeReader.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9'; - -/** - * You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&product=dbr&package=js to get your own trial license good for 30 days. - * Note that if you downloaded this sample from Dynamsoft while logged in, the above license key may already be your own 30-day trial license. - * For more information, see https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=9.6.32&utm_source=github#specify-the-license or contact support@dynamsoft.com. - * LICENSE ALERT - THE END - */ - -BarcodeReader.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.32/dist/"; diff --git a/1.hello-world/5.read-video-vue/src/main.js b/1.hello-world/5.read-video-vue/src/main.js deleted file mode 100644 index c5da47dc..00000000 --- a/1.hello-world/5.read-video-vue/src/main.js +++ /dev/null @@ -1,8 +0,0 @@ -import Vue from 'vue' -import App from './App.vue' - -import './assets/main.css' - -new Vue({ - render: (h) => h(App) -}).$mount('#app') diff --git a/1.hello-world/5.read-video-vue/vite.config.js b/1.hello-world/5.read-video-vue/vite.config.js deleted file mode 100644 index c0d1c6c2..00000000 --- a/1.hello-world/5.read-video-vue/vite.config.js +++ /dev/null @@ -1,22 +0,0 @@ -import { fileURLToPath, URL } from 'node:url' - -import { defineConfig } from 'vite' -import legacy from '@vitejs/plugin-legacy' -import vue2 from '@vitejs/plugin-vue2' - -// https://vitejs.dev/config/ -export default defineConfig({ - base: "", - plugins: [ - vue2(), - legacy({ - targets: ['ie >= 11'], - additionalLegacyPolyfills: ['regenerator-runtime/runtime'] - }) - ], - resolve: { - alias: { - '@': fileURLToPath(new URL('./src', import.meta.url)) - } - } -}) diff --git a/1.hello-world/6.read-video-vue3/README.md b/1.hello-world/6.read-video-vue3/README.md deleted file mode 100644 index 7f44bb2a..00000000 --- a/1.hello-world/6.read-video-vue3/README.md +++ /dev/null @@ -1,485 +0,0 @@ -# Hello World Sample for Vue3 - -[Vue 3](https://v3.vuejs.org/) is version 3 of Vue which is a progressive framework for building user interfaces. Check out the following guide on how to implement Dynamsoft Barcode Reader JavaScript SDK (hereafter called "the library") into a Vue 3 application. Note that in this sample, `TypeScript` is used. - -## Official Sample - -* Hello World in Vue 3 - Demo -* Hello World in Vue 3 - Source Code - -## Preparation - -Make sure you have [node](https://nodejs.org/) installed. `node 14.21.3` and `vue 3.2.47` are used in the example below. - -## Create the sample project - -### Create a Bootstrapped Raw Vue Application - -```cmd -npm create vue@3 -# When asked 'Add TypeScript?', select 'Yes'. -``` - -### **CD** to the root directory of the application and install necessary libraries - -```cmd -npm install -npm install dynamsoft-javascript-barcode -``` - -## Start to implement - -### Add a file "dbr.ts" under "/src/" to configure the library - -```typescript -import { BarcodeReader } from 'dynamsoft-javascript-barcode'; -BarcodeReader.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9'; -BarcodeReader.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode/dist/"; -``` - -> Note: -> -> * `license` specify a license key to use the library. You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=sample&product=dbr&package=js to get your own trial license good for 30 days. -> * `engineResourcePath` tells the library where to get the necessary resources at runtime. - -### Create and edit the `VideoDecode` component - -* Add a file `VideoDecode.vue` under "/components/" as the `VideoDecode` component. The `VideoDecode` component uses `BarcodeScanner` class of the library to help decode barcodes via camera. - -* In `VideoDecode.vue`, add code for initializing and destroying the `BarcodeScanner` instance. - -```vue - - - - - -``` - -> Note: -> -> * The element with class name "component-barcode-scanner" is used to build the UI for the library in this line -> -> ```typescript -> await scanner.setUIElement(elRefs.value); -> ``` -> -> * To release resources timely, the `BarcodeScanner` instance is destroyed with the component in the callback `onBeforeUnmount` . - -### Create and edit the `ImgDecode` component - -* Add a file `ImgDecode.vue` under "/components/" as the `ImgDecode` component. The `ImgDecode` component uses `BarcodeReader` class of the library to help decode barcodes in an image. - -* In `ImgDecode.vue`, add code for initializing and destroying the `BarcodeReader` instance. - -```vue - - - - - -``` - -### Add `VideoDecode` and `ImgDecode` components in `HelloWorld.vue` - -```vue - - - - - -``` - -> NOTE : -> -> * The method `loadWasm()` initializes the library in the background. - -### Add the `HelloWorld` component to `App.vue` - -Edit the file `App.vue` to be like this - -```vue - - - - - -``` - -* Try running the project. - -```cmd -npm run dev -``` - -If you have followed all the steps correctly, you should now have a functioning page that allows you to scan barcodes from a webcam or a built-in camera. Additionally, if you want to decode a local image, you can click the `Image Decode` button and select the image you want to decode. Any barcodes that are detected will be displayed in a dialog. - -### Comment out the following code in `assets/main.css`. (optional) - -```css -@media (min-width: 1024px) { - /* body { - display: flex; - place-items: center; - } - - #app { - display: grid; - grid-template-columns: 1fr 1fr; - padding: 0 2rem; - } */ -} -``` - -## Project Setup - -```sh -npm install -``` - -### Compile and Hot-Reload for Development - -```sh -npm run dev -``` - -### Type-Check, Compile and Minify for Production - -```sh -npm run build -``` - -## Support - -If you have any questions, feel free to [contact Dynamsoft support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme). diff --git a/1.hello-world/6.read-video-vue3/index.html b/1.hello-world/6.read-video-vue3/index.html deleted file mode 100644 index 9a45e490..00000000 --- a/1.hello-world/6.read-video-vue3/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - - - - - - - - Hello World for Vue3 - Dynamsoft Barcode Reader Sample - - - -
- - - diff --git a/1.hello-world/6.read-video-vue3/package.json b/1.hello-world/6.read-video-vue3/package.json deleted file mode 100644 index 7b241d7f..00000000 --- a/1.hello-world/6.read-video-vue3/package.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "name": "read-video-vue3", - "version": "0.0.0", - "private": true, - "scripts": { - "dev": "vite", - "build": "run-p type-check build-only", - "preview": "vite preview", - "build-only": "vite build", - "type-check": "vue-tsc --noEmit" - }, - "dependencies": { - "dynamsoft-javascript-barcode": "^9.6.32", - "vue": "^3.2.47" - }, - "devDependencies": { - "@types/node": "^18.14.2", - "@vitejs/plugin-vue": "^4.0.0", - "@vue/tsconfig": "^0.1.3", - "npm-run-all": "^4.1.5", - "typescript": "~4.8.4", - "vite": "^4.1.4", - "vue-tsc": "^1.2.0" - } -} diff --git a/1.hello-world/6.read-video-vue3/public/favicon.ico b/1.hello-world/6.read-video-vue3/public/favicon.ico deleted file mode 100644 index df36fcfb..00000000 Binary files a/1.hello-world/6.read-video-vue3/public/favicon.ico and /dev/null differ diff --git a/1.hello-world/6.read-video-vue3/src/components/HelloWorld.vue b/1.hello-world/6.read-video-vue3/src/components/HelloWorld.vue deleted file mode 100644 index b3376e97..00000000 --- a/1.hello-world/6.read-video-vue3/src/components/HelloWorld.vue +++ /dev/null @@ -1,81 +0,0 @@ - - - - - diff --git a/1.hello-world/6.read-video-vue3/src/components/ImgDecode.vue b/1.hello-world/6.read-video-vue3/src/components/ImgDecode.vue deleted file mode 100644 index 060ea421..00000000 --- a/1.hello-world/6.read-video-vue3/src/components/ImgDecode.vue +++ /dev/null @@ -1,46 +0,0 @@ - - - - - \ No newline at end of file diff --git a/1.hello-world/6.read-video-vue3/src/components/VideoDecode.vue b/1.hello-world/6.read-video-vue3/src/components/VideoDecode.vue deleted file mode 100644 index 7c2476d5..00000000 --- a/1.hello-world/6.read-video-vue3/src/components/VideoDecode.vue +++ /dev/null @@ -1,214 +0,0 @@ - - - - - diff --git a/1.hello-world/6.read-video-vue3/src/dbr.ts b/1.hello-world/6.read-video-vue3/src/dbr.ts deleted file mode 100644 index 669800a8..00000000 --- a/1.hello-world/6.read-video-vue3/src/dbr.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { BarcodeReader } from "dynamsoft-javascript-barcode"; - -/** LICENSE ALERT - README - * To use the library, you need to first specify a license key using the API "license" as shown below. - */ - -BarcodeReader.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9'; - -/** - * You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&product=dbr&package=js to get your own trial license good for 30 days. - * Note that if you downloaded this sample from Dynamsoft while logged in, the above license key may already be your own 30-day trial license. - * For more information, see https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=9.6.32&utm_source=github#specify-the-license or contact support@dynamsoft.com. - * LICENSE ALERT - THE END - */ - -BarcodeReader.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.32/dist/"; \ No newline at end of file diff --git a/1.hello-world/6.read-video-vue3/tsconfig.node.json b/1.hello-world/6.read-video-vue3/tsconfig.node.json deleted file mode 100644 index 424084aa..00000000 --- a/1.hello-world/6.read-video-vue3/tsconfig.node.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "extends": "@vue/tsconfig/tsconfig.node.json", - "include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "playwright.config.*"], - "compilerOptions": { - "composite": true, - "types": ["node"] - } -} diff --git a/1.hello-world/6.read-video-vue3/vite.config.ts b/1.hello-world/6.read-video-vue3/vite.config.ts deleted file mode 100644 index 3851e644..00000000 --- a/1.hello-world/6.read-video-vue3/vite.config.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { fileURLToPath, URL } from 'node:url' - -import { defineConfig } from 'vite' -import vue from '@vitejs/plugin-vue' - -// https://vitejs.dev/config/ -export default defineConfig({ - base: "", - plugins: [vue()], - resolve: { - alias: { - '@': fileURLToPath(new URL('./src', import.meta.url)) - } - } -}) diff --git a/1.hello-world/7.read-video-nextjs/README.md b/1.hello-world/7.read-video-nextjs/README.md deleted file mode 100644 index b6a40725..00000000 --- a/1.hello-world/7.read-video-nextjs/README.md +++ /dev/null @@ -1,363 +0,0 @@ -# Hello World Sample for Next.js - -[Next.js](https://nextjs.org/) is an open-source development framework built on top of Node.js enabling [React](https://reactjs.org/) based web applications functionalities such as server-side rendering and generating static websites. Follow this guide to learn how to implement Dynamsoft Barcode Reader JavaScript SDK (hereafter called "the library") into a Next.js application. Note that in this sample `TypeScript` is used. - -## Official Sample - -* Hello World in Next.js - Source Code - -## Preparation - -Make sure you have [node](https://nodejs.org/) installed. `node 14.21.3` and `next 13.2.4` are used in the example below. - -## Create the sample project - -### Create a Bootstrapped Raw Next.js Application - -```cmd -npx create-next-app@latest --typescript -``` - -### **CD** to the root directory of the application and install the dependency - -```cmd -npm install dynamsoft-javascript-barcode -``` - -## Start to implement - -### Add a file dbr.ts at the root of the application to configure the library - -```jsx -import { BarcodeReader } from 'dynamsoft-javascript-barcode'; -BarcodeReader.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9'; -BarcodeReader.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode/dist/"; -``` - -> Note: -> * `license` specify a license key to use the library. You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=sample&product=dbr&package=js to get your own trial license good for 30 days. -> * `engineResourcePath` tells the library where to get the necessary resources at runtime. - -### Create a directory "components" and create the following files inside it to represent three components - -* VideoDecode.tsx -* ImgDecode.tsx -* HelloWorld.tsx - -### Edit the `VideoDecode` component - -* In VideoDecode.tsx, add code for initializing and destroying the `BarcodeScanner` instance. The `VideoDecode` component uses `BarcodeScanner` class of the library to help decode barcodes via camera. - -```tsx -import { BarcodeScanner } from "dynamsoft-javascript-barcode"; -import React from 'react'; -import styles from '@/styles/VideoDecode.module.css' - -class VideoDecode extends React.Component { - pScanner: Promise|null = null; - elRef: React.RefObject = React.createRef(); - async componentDidMount() { - try { - const scanner = await (this.pScanner = BarcodeScanner.createInstance()); - // Should judge if scanner is destroyed after 'await', as in development React runs setup and cleanup one extra time before the actual setup in Strict Mode. - if(scanner.isContextDestroyed()) return; - await scanner.setUIElement(this.elRef.current!); - // Should judge if scanner is destroyed after 'await', as in development React runs setup and cleanup one extra time before the actual setup in Strict Mode. - if(scanner.isContextDestroyed()) return; - scanner.onFrameRead = results => { - for (let result of results) { - console.log(result.barcodeText); - } - }; - scanner.onUniqueRead = (txt, result) => { - alert(txt); - } - await scanner.open(); - } catch (ex: any) { - if (ex.message.indexOf("network connection error")) { - let customMsg = "Failed to connect to Dynamsoft License Server: network connection error. Check your Internet connection or contact Dynamsoft Support (support@dynamsoft.com) to acquire an offline license."; - console.log(customMsg); - alert(customMsg); - } - throw ex; - } - } - async componentWillUnmount() { - if (this.pScanner) { - (await this.pScanner).destroyContext(); - console.log('BarcodeScanner Component Unmount'); - } - } - shouldComponentUpdate() { - // Never update UI after mount, dbrjs sdk use native way to bind event, update will remove it. - return false; - } - render() { - return ( -
- - -
-
-
-
-
- - -
-
- - - -
-
- ); - } -} - -export default VideoDecode; -``` - -> Note: -> * The html code in `render()` and the following code builds the UI for the library. -> -> ```jsx -> await scanner.setUIElement(this.elRef.current!); -> ``` -> -> * To release resources timely, the `BarcodeScanner` instance is destroyed with the component in the callback `componentWillUnmount`. -> * The component should never update (check the code for `shouldComponentUpdate()`) so that events bound to the UI stay valid. - -* Create 'VideoDecode.module.css' under '/styles/' and define the style of the component in it - -```css -.component-barcode-scanner{width:100%;height:100%;/* min-width:640px; */min-height:480px;background:#eee;position:relative;resize:both;} -.dce-bg-loading{display:none;animation:1s linear infinite dce-rotate;width:40%;height:40%;position:absolute;margin:auto;left:0;top:0;right:0;bottom:0;fill:#aaa;} -.dce-bg-camera{display:none;width:40%;height:40%;position:absolute;margin:auto;left:0;top:0;right:0;bottom:0;fill:#aaa;} -.dce-video-container{position:absolute;left:0;top:0;width:100%;height:100%;} -.dce-scanarea{width:100%;height:100%;position:absolute;left:0;top:0;} -.dce-scanlight{display:none;width:100%;height:3%;position:absolute;animation:3s infinite dce-scanlight;border-radius:50%;box-shadow:0px 0px 2vw 1px #00e5ff;background:#fff;} -.div-select-container{position:absolute;left:0;top:0;} -.dce-sel-camera{display:block;} -.dce-sel-resolution{display:block;margin-top:5px;} -.dbr-msg-poweredby{position:absolute;left:50%;bottom:10%;transform:translateX(-50%);} -.dbr-msg-poweredby svg {height:max(3vmin,17px);fill:#FFFFFF;} -@keyframes dce-rotate{from{transform:rotate(0turn);}to{transform:rotate(1turn);}} -@keyframes dce-scanlight{from{top:0;}to{top:97%;}} -``` - -### Edit the `ImgDecode` component - -* In ImgDecode.tsx, add code for initializing and destroying the `BarcodeReader` instance. The `ImgDecode` component uses `BarcodeReader` class of the library to help decode barcodes in an image. - -```tsx -import React, { ChangeEvent, Component } from 'react' -import { BarcodeReader } from "dynamsoft-javascript-barcode"; -import styles from '@/styles/ImgDecode.module.css' - -export default class ImgDecode extends Component { - pReader: Promise = BarcodeReader.createInstance(); - - decodeImg = async (e: ChangeEvent) => { - try { - const reader = await this.pReader; - let results = await reader.decode(e.target.files![0]); - for (let result of results) { - alert(result.barcodeText); - } - if (!results.length) { alert('No barcode found'); } - } catch (ex: any) { - if (ex.message.indexOf("network connection error")) { - let customMsg = "Failed to connect to Dynamsoft License Server: network connection error. Check your Internet connection or contact Dynamsoft Support (support@dynamsoft.com) to acquire an offline license."; - console.log(customMsg); - alert(customMsg); - } - throw ex; - } - e.target.value = ''; - } - - async componentWillUnmount() { - if (this.pReader) { - (await this.pReader).destroyContext(); - console.log('ImgDecode Component Unmount'); - } - } - - render() { - return ( -
- ) - } -} -``` - -* Create 'ImgDecode.module.css' under '/styles/' and define the style of the component in it - -```css -.ImgDecode { - display: flex; - justify-content: center; - align-items: center; - border: 1px solid black -} -``` - -### Edit the `HelloWorld` component - -* Add `VideoDecode` and `ImgDecode` components in HelloWorld.tsx - -```tsx -import React from 'react'; -import VideoDecode from './VideoDecode'; -import ImgDecode from './ImgDecode'; -import "../dbr"; // import side effects. The license, engineResourcePath, so on. -import { BarcodeReader } from "dynamsoft-javascript-barcode"; -import styles from '@/styles/HelloWorld.module.css' - -interface isState { - bShowScanner: boolean, - bShowImgDecode: boolean -} - -class HelloWorld extends React.Component { - state = { - bShowScanner: true, - bShowImgDecode: false - }; - - async componentDidMount() { - try { - await BarcodeReader.loadWasm(); - } catch (ex: any) { - if (ex.message.indexOf("network connection error")) { - let customMsg = "Failed to connect to Dynamsoft License Server: network connection error. Check your Internet connection or contact Dynamsoft Support (support@dynamsoft.com) to acquire an offline license."; - console.log(customMsg); - alert(customMsg); - } - throw ex; - } - } - - showScanner = () => { - this.setState({ - bShowScanner: true, - bShowImgDecode: false - }); - } - - showImgDecode = () => { - this.setState({ - bShowScanner: false, - bShowImgDecode: true - }); - } - - render() { - return ( -
-

Hello World for Next.js

-
- - -
-
- {this.state.bShowScanner ? () : ""} - {this.state.bShowImgDecode ? () : ""} -
-
- ); - } -} -export default HelloWorld; -``` - -* Create 'HelloWorld.module.css' under '/styles/' and define the style of the component in it - -```css -.helloWorld { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - width: 100%; - height: 100%; - color: #455A64; -} - -.header { - font-size: 1.5em; -} - -.button { - font-size: 1.5rem; - margin: 1.5vh 0; - border: 1px solid black; - background-color: white; - color: black; -} - -.container { - margin: 2vmin auto; - width: 100%; -} -``` - -### Add the `HelloWorld` component to /pages/index.tsx - -In index.tsx, import the `HelloWorld` component: - -```jsx -import HelloWorld from '../components/HelloWorld' -``` - -Change the <main> tag like this: - -```jsx -
-
- -
-
-``` - -* Define the style of the "App" element in styles/Home.module.css - -```css -.UIElement { - margin: 2vmin auto; - text-align: center; - font-size: medium; - width: 80vw; -} -``` - -* Try running the project. - -```cmd -npm run dev -``` - -If you have followed all the steps correctly, you should now have a functioning page that allows you to scan barcodes from a webcam or a built-in camera. Additionally, if you want to decode a local image, you can click the `Image Decode` button and select the image you want to decode. Any barcodes that are detected will be displayed in a dialog. - -## Project Setup - -```sh -npm install -``` - -### Compile and Hot-Reload for Development - -```sh -npm run dev -``` - -### Type-Check, Compile and Minify for Production - -```sh -npm run build -``` - -## Support - -If you have any questions, feel free to [contact Dynamsoft support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme). \ No newline at end of file diff --git a/1.hello-world/7.read-video-nextjs/components/HelloWorld.tsx b/1.hello-world/7.read-video-nextjs/components/HelloWorld.tsx deleted file mode 100644 index 6a636d8d..00000000 --- a/1.hello-world/7.read-video-nextjs/components/HelloWorld.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import React from 'react'; -import VideoDecode from './VideoDecode'; -import ImgDecode from './ImgDecode'; -import "../dbr"; // import side effects. The license, engineResourcePath, so on. -import { BarcodeReader } from "dynamsoft-javascript-barcode"; -import styles from '@/styles/HelloWorld.module.css' - -interface isState { - bShowScanner: boolean, - bShowImgDecode: boolean -} - -class HelloWorld extends React.Component { - state = { - bShowScanner: true, - bShowImgDecode: false - }; - - async componentDidMount() { - try { - await BarcodeReader.loadWasm(); - } catch (ex: any) { - if (ex.message.indexOf("network connection error")) { - let customMsg = "Failed to connect to Dynamsoft License Server: network connection error. Check your Internet connection or contact Dynamsoft Support (support@dynamsoft.com) to acquire an offline license."; - console.log(customMsg); - alert(customMsg); - } - throw ex; - } - } - - showScanner = () => { - this.setState({ - bShowScanner: true, - bShowImgDecode: false - }); - } - - showImgDecode = () => { - this.setState({ - bShowScanner: false, - bShowImgDecode: true - }); - } - - render() { - return ( -
-

Hello World for Next.js

-
- - -
-
- {this.state.bShowScanner ? () : ""} - {this.state.bShowImgDecode ? () : ""} -
-
- ); - } -} -export default HelloWorld; diff --git a/1.hello-world/7.read-video-nextjs/components/ImgDecode.tsx b/1.hello-world/7.read-video-nextjs/components/ImgDecode.tsx deleted file mode 100644 index 272117a2..00000000 --- a/1.hello-world/7.read-video-nextjs/components/ImgDecode.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import React, { ChangeEvent, Component } from 'react' -import { BarcodeReader } from "dynamsoft-javascript-barcode"; -import styles from '@/styles/ImgDecode.module.css' - -export default class ImgDecode extends Component { - pReader: Promise = BarcodeReader.createInstance(); - - decodeImg = async (e: ChangeEvent) => { - try { - const reader = await this.pReader; - let results = await reader.decode(e.target.files![0]); - for (let result of results) { - alert(result.barcodeText); - } - if (!results.length) { alert('No barcode found'); } - } catch (ex: any) { - if (ex.message.indexOf("network connection error")) { - let customMsg = "Failed to connect to Dynamsoft License Server: network connection error. Check your Internet connection or contact Dynamsoft Support (support@dynamsoft.com) to acquire an offline license."; - console.log(customMsg); - alert(customMsg); - } - throw ex; - } - e.target.value = ''; - } - - async componentWillUnmount() { - if (this.pReader) { - (await this.pReader).destroyContext(); - console.log('ImgDecode Component Unmount'); - } - } - - render() { - return ( -
- ) - } -} \ No newline at end of file diff --git a/1.hello-world/7.read-video-nextjs/components/VideoDecode.tsx b/1.hello-world/7.read-video-nextjs/components/VideoDecode.tsx deleted file mode 100644 index c122f93e..00000000 --- a/1.hello-world/7.read-video-nextjs/components/VideoDecode.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import { BarcodeScanner } from "dynamsoft-javascript-barcode"; -import React from 'react'; -import styles from '@/styles/VideoDecode.module.css' - -class VideoDecode extends React.Component { - pScanner: Promise|null = null; - elRef: React.RefObject = React.createRef(); - async componentDidMount() { - try { - const scanner = await (this.pScanner = BarcodeScanner.createInstance()); - // Should judge if scanner is destroyed after 'await', as in development React runs setup and cleanup one extra time before the actual setup in Strict Mode. - if(scanner.isContextDestroyed()) return; - await scanner.setUIElement(this.elRef.current!); - // Should judge if scanner is destroyed after 'await', as in development React runs setup and cleanup one extra time before the actual setup in Strict Mode. - if(scanner.isContextDestroyed()) return; - scanner.onFrameRead = results => { - for (let result of results) { - console.log(result.barcodeText); - } - }; - scanner.onUniqueRead = (txt, result) => { - alert(txt); - } - await scanner.open(); - } catch (ex: any) { - if (ex.message.indexOf("network connection error")) { - let customMsg = "Failed to connect to Dynamsoft License Server: network connection error. Check your Internet connection or contact Dynamsoft Support (support@dynamsoft.com) to acquire an offline license."; - console.log(customMsg); - alert(customMsg); - } - throw ex; - } - } - async componentWillUnmount() { - if (this.pScanner) { - (await this.pScanner).destroyContext(); - console.log('BarcodeScanner Component Unmount'); - } - } - shouldComponentUpdate() { - // Never update UI after mount, dbrjs sdk use native way to bind event, update will remove it. - return false; - } - render() { - return ( -
- - -
-
-
-
-
- - -
-
- - - -
-
- ); - } -} - -export default VideoDecode; \ No newline at end of file diff --git a/1.hello-world/7.read-video-nextjs/dbr.ts b/1.hello-world/7.read-video-nextjs/dbr.ts deleted file mode 100644 index 716618cc..00000000 --- a/1.hello-world/7.read-video-nextjs/dbr.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { BarcodeReader } from "dynamsoft-javascript-barcode"; - -/** LICENSE ALERT - README - * To use the library, you need to first specify a license key using the API "license" as shown below. - */ - -BarcodeReader.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9'; - -/** - * You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&product=dbr&package=js to get your own trial license good for 30 days. - * Note that if you downloaded this sample from Dynamsoft while logged in, the above license key may already be your own 30-day trial license. - * For more information, see https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=9.6.32&utm_source=github#specify-the-license or contact support@dynamsoft.com. - * LICENSE ALERT - THE END - */ - -BarcodeReader.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.32/dist/"; \ No newline at end of file diff --git a/1.hello-world/7.read-video-nextjs/package.json b/1.hello-world/7.read-video-nextjs/package.json deleted file mode 100644 index a3f8b2c6..00000000 --- a/1.hello-world/7.read-video-nextjs/package.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "name": "read-video-nextjs", - "version": "0.1.0", - "private": true, - "scripts": { - "dev": "next dev", - "build": "next build", - "start": "next start", - "lint": "next lint" - }, - "dependencies": { - "@types/node": "18.15.3", - "@types/react": "18.0.28", - "@types/react-dom": "18.0.11", - "dynamsoft-javascript-barcode": "^9.6.32", - "next": "13.2.4", - "react": "18.2.0", - "react-dom": "18.2.0", - "typescript": "4.9.5" - } -} diff --git a/1.hello-world/7.read-video-nextjs/pages/_app.tsx b/1.hello-world/7.read-video-nextjs/pages/_app.tsx deleted file mode 100644 index 021681f4..00000000 --- a/1.hello-world/7.read-video-nextjs/pages/_app.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import '@/styles/globals.css' -import type { AppProps } from 'next/app' - -export default function App({ Component, pageProps }: AppProps) { - return -} diff --git a/1.hello-world/7.read-video-nextjs/pages/_document.tsx b/1.hello-world/7.read-video-nextjs/pages/_document.tsx deleted file mode 100644 index 54e8bf3e..00000000 --- a/1.hello-world/7.read-video-nextjs/pages/_document.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { Html, Head, Main, NextScript } from 'next/document' - -export default function Document() { - return ( - - - -
- - - - ) -} diff --git a/1.hello-world/7.read-video-nextjs/pages/api/hello.ts b/1.hello-world/7.read-video-nextjs/pages/api/hello.ts deleted file mode 100644 index f8bcc7e5..00000000 --- a/1.hello-world/7.read-video-nextjs/pages/api/hello.ts +++ /dev/null @@ -1,13 +0,0 @@ -// Next.js API route support: https://nextjs.org/docs/api-routes/introduction -import type { NextApiRequest, NextApiResponse } from 'next' - -type Data = { - name: string -} - -export default function handler( - req: NextApiRequest, - res: NextApiResponse -) { - res.status(200).json({ name: 'John Doe' }) -} diff --git a/1.hello-world/7.read-video-nextjs/pages/index.tsx b/1.hello-world/7.read-video-nextjs/pages/index.tsx deleted file mode 100644 index 8ab8a4db..00000000 --- a/1.hello-world/7.read-video-nextjs/pages/index.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import Head from 'next/head' -import styles from '@/styles/Home.module.css' -import HelloWorld from '../components/HelloWorld' - -export default function Home() { - return ( - <> - - Hello World for Next - Dynamsoft Barcode Reader Sample - - - - - - -
-
- -
-
- - ) -} diff --git a/1.hello-world/7.read-video-nextjs/styles/HelloWorld.module.css b/1.hello-world/7.read-video-nextjs/styles/HelloWorld.module.css deleted file mode 100644 index 779f5997..00000000 --- a/1.hello-world/7.read-video-nextjs/styles/HelloWorld.module.css +++ /dev/null @@ -1,26 +0,0 @@ -.helloWorld { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - width: 100%; - height: 100%; - color: #455A64; -} - -.header { - font-size: 1.5em; -} - -.button { - font-size: 1.5rem; - margin: 1.5vh 0; - border: 1px solid black; - background-color: white; - color: black; -} - -.container { - margin: 2vmin auto; - width: 100%; -} \ No newline at end of file diff --git a/1.hello-world/7.read-video-nextjs/styles/Home.module.css b/1.hello-world/7.read-video-nextjs/styles/Home.module.css deleted file mode 100644 index 3f440c73..00000000 --- a/1.hello-world/7.read-video-nextjs/styles/Home.module.css +++ /dev/null @@ -1,285 +0,0 @@ -.main { - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: center; - padding: 6rem; - min-height: 100vh; -} - -.description { - display: inherit; - justify-content: inherit; - align-items: inherit; - font-size: 0.85rem; - max-width: var(--max-width); - width: 100%; - z-index: 2; - font-family: var(--font-mono); -} - -.description a { - display: flex; - justify-content: center; - align-items: center; - gap: 0.5rem; -} - -.description p { - position: relative; - margin: 0; - padding: 1rem; - background-color: rgba(var(--callout-rgb), 0.5); - border: 1px solid rgba(var(--callout-border-rgb), 0.3); - border-radius: var(--border-radius); -} - -.code { - font-weight: 700; - font-family: var(--font-mono); -} - -.grid { - display: grid; - grid-template-columns: repeat(4, minmax(25%, auto)); - width: var(--max-width); - max-width: 100%; -} - -.card { - padding: 1rem 1.2rem; - border-radius: var(--border-radius); - background: rgba(var(--card-rgb), 0); - border: 1px solid rgba(var(--card-border-rgb), 0); - transition: background 200ms, border 200ms; -} - -.card span { - display: inline-block; - transition: transform 200ms; -} - -.card h2 { - font-weight: 600; - margin-bottom: 0.7rem; -} - -.card p { - margin: 0; - opacity: 0.6; - font-size: 0.9rem; - line-height: 1.5; - max-width: 30ch; -} - -.center { - display: flex; - justify-content: center; - align-items: center; - position: relative; - padding: 4rem 0; -} - -.center::before { - background: var(--secondary-glow); - border-radius: 50%; - width: 480px; - height: 360px; - margin-left: -400px; -} - -.center::after { - background: var(--primary-glow); - width: 240px; - height: 180px; - z-index: -1; -} - -.center::before, -.center::after { - content: ''; - left: 50%; - position: absolute; - filter: blur(45px); - transform: translateZ(0); -} - -.logo, -.thirteen { - position: relative; -} - -.thirteen { - display: flex; - justify-content: center; - align-items: center; - width: 75px; - height: 75px; - padding: 25px 10px; - margin-left: 16px; - transform: translateZ(0); - border-radius: var(--border-radius); - overflow: hidden; - box-shadow: 0px 2px 8px -1px #0000001a; -} - -.thirteen::before, -.thirteen::after { - content: ''; - position: absolute; - z-index: -1; -} - -/* Conic Gradient Animation */ -.thirteen::before { - animation: 6s rotate linear infinite; - width: 200%; - height: 200%; - background: var(--tile-border); -} - -/* Inner Square */ -.thirteen::after { - inset: 0; - padding: 1px; - border-radius: var(--border-radius); - background: linear-gradient( - to bottom right, - rgba(var(--tile-start-rgb), 1), - rgba(var(--tile-end-rgb), 1) - ); - background-clip: content-box; -} - -/* Enable hover only on non-touch devices */ -@media (hover: hover) and (pointer: fine) { - .card:hover { - background: rgba(var(--card-rgb), 0.1); - border: 1px solid rgba(var(--card-border-rgb), 0.15); - } - - .card:hover span { - transform: translateX(4px); - } -} - -@media (prefers-reduced-motion) { - .thirteen::before { - animation: none; - } - - .card:hover span { - transform: none; - } -} - -/* Mobile */ -@media (max-width: 700px) { - .content { - padding: 4rem; - } - - .grid { - grid-template-columns: 1fr; - margin-bottom: 120px; - max-width: 320px; - text-align: center; - } - - .card { - padding: 1rem 2.5rem; - } - - .card h2 { - margin-bottom: 0.5rem; - } - - .center { - padding: 8rem 0 6rem; - } - - .center::before { - transform: none; - height: 300px; - } - - .description { - font-size: 0.8rem; - } - - .description a { - padding: 1rem; - } - - .description p, - .description div { - display: flex; - justify-content: center; - position: fixed; - width: 100%; - } - - .description p { - align-items: center; - inset: 0 0 auto; - padding: 2rem 1rem 1.4rem; - border-radius: 0; - border: none; - border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25); - background: linear-gradient( - to bottom, - rgba(var(--background-start-rgb), 1), - rgba(var(--callout-rgb), 0.5) - ); - background-clip: padding-box; - backdrop-filter: blur(24px); - } - - .description div { - align-items: flex-end; - pointer-events: none; - inset: auto 0 0; - padding: 2rem; - height: 200px; - background: linear-gradient( - to bottom, - transparent 0%, - rgb(var(--background-end-rgb)) 40% - ); - z-index: 1; - } -} - -/* Tablet and Smaller Desktop */ -@media (min-width: 701px) and (max-width: 1120px) { - .grid { - grid-template-columns: repeat(2, 50%); - } -} - -@media (prefers-color-scheme: dark) { - .vercelLogo { - filter: invert(1); - } - - .logo, - .thirteen img { - filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70); - } -} - -@keyframes rotate { - from { - transform: rotate(360deg); - } - to { - transform: rotate(0deg); - } -} - -.UIElement { - margin: 2vmin auto; - text-align: center; - font-size: medium; - width: 80vw; -} \ No newline at end of file diff --git a/1.hello-world/7.read-video-nextjs/styles/VideoDecode.module.css b/1.hello-world/7.read-video-nextjs/styles/VideoDecode.module.css deleted file mode 100644 index 3bac7c0e..00000000 --- a/1.hello-world/7.read-video-nextjs/styles/VideoDecode.module.css +++ /dev/null @@ -1,13 +0,0 @@ -.component-barcode-scanner{width:100%;height:100%;/* min-width:640px; */min-height:480px;background:#eee;position:relative;resize:both;} -.dce-bg-loading{display:none;animation:1s linear infinite dce-rotate;width:40%;height:40%;position:absolute;margin:auto;left:0;top:0;right:0;bottom:0;fill:#aaa;} -.dce-bg-camera{display:none;width:40%;height:40%;position:absolute;margin:auto;left:0;top:0;right:0;bottom:0;fill:#aaa;} -.dce-video-container{position:absolute;left:0;top:0;width:100%;height:100%;} -.dce-scanarea{width:100%;height:100%;position:absolute;left:0;top:0;} -.dce-scanlight{display:none;width:100%;height:3%;position:absolute;animation:3s infinite dce-scanlight;border-radius:50%;box-shadow:0px 0px 2vw 1px #00e5ff;background:#fff;} -.div-select-container{position:absolute;left:0;top:0;} -.dce-sel-camera{display:block;} -.dce-sel-resolution{display:block;margin-top:5px;} -.dbr-msg-poweredby{position:absolute;left:50%;bottom:10%;transform:translateX(-50%);} -.dbr-msg-poweredby svg {height:max(3vmin,17px);fill:#FFFFFF;} -@keyframes dce-rotate{from{transform:rotate(0turn);}to{transform:rotate(1turn);}} -@keyframes dce-scanlight{from{top:0;}to{top:97%;}} \ No newline at end of file diff --git a/1.hello-world/8.read-video-nuxtjs/.gitignore b/1.hello-world/8.read-video-nuxtjs/.gitignore deleted file mode 100644 index 90e126da..00000000 --- a/1.hello-world/8.read-video-nuxtjs/.gitignore +++ /dev/null @@ -1,9 +0,0 @@ -node_modules -*.log* -.nuxt -.nitro -.cache -.output -.env -dist -.DS_Store diff --git a/1.hello-world/8.read-video-nuxtjs/.npmrc b/1.hello-world/8.read-video-nuxtjs/.npmrc deleted file mode 100644 index cf040424..00000000 --- a/1.hello-world/8.read-video-nuxtjs/.npmrc +++ /dev/null @@ -1,2 +0,0 @@ -shamefully-hoist=true -strict-peer-dependencies=false diff --git a/1.hello-world/8.read-video-nuxtjs/README.md b/1.hello-world/8.read-video-nuxtjs/README.md deleted file mode 100644 index 0255c1ee..00000000 --- a/1.hello-world/8.read-video-nuxtjs/README.md +++ /dev/null @@ -1,466 +0,0 @@ -# JavaScript Hello World Sample - NuxtJS - -[Nuxt](https://nuxtjs.org/) is a higher-level framework that builds on top of [Vue](https://vuejs.org/). Check out the following guide on how to implement Dynamsoft Barcode Reader JavaScript SDK (hereafter called "the library") into a Nuxt application. Note that in this sample `TypeScript` is used. - -## Official Sample - -* Hello World in Nuxt - Source Code - -## Preparation - -Make sure you have [node](https://nodejs.org/) installed. `node 14.21.3` and `nuxt 3.2.3` are used in this article. - -## Create the sample project - -### Create a Bootstrapped Nuxt Application - -```cmd -npx nuxi@latest init read-video-nuxtjs -``` - -You will be asked to configure quite a few things for the application during the creation. In our example, we chose the default one in every step. - -### **CD** to the root directory of the application and install the dependencies - -```cmd -cd read-video-nuxtjs -npm install -npm install dynamsoft-javascript-barcode -``` - -## Start to implement - -### Add a file "dbr.ts" at the root of the app to configure the library - -```typescript -import { BarcodeReader } from 'dynamsoft-javascript-barcode'; -BarcodeReader.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9'; -BarcodeReader.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode/dist/"; -``` - -> Note: -> -> * `license` specify a license key to use the library. You can visit `https://www.dynamsoft.com/customer/license/trialLicense?utm_source=sample&product=dbr&package=js` to get your own trial license good for 30 days. -> * `engineResourcePath` tells the library where to get the necessary resources at runtime. - -### Create a directory "components" and create the following files inside it to represent three components - -* VideoDecode.vue -* ImgDecode.vue -* HelloWorld.vue - -### Edit the `VideoDecode` component - -* In `VideoDecode.vue`, add code for initializing and destroying the `BarcodeScanner` instance. The `VideoDecode` component uses `BarcodeScanner` class of the library to help decode barcodes via camera. - -```vue - - - - - -``` - -> Note: -> -> * The element with class name "component-barcode-scanner" is used to build the UI for the library in this line -> -> ```typescript -> await scanner.setUIElement(elRefs.value); -> ``` -> -> * To release resources timely, the `BarcodeScanner` instance is destroyed with the component in the callback `onBeforeUnmount` . - -### Edit the `ImgDecode` component - -* In `ImgDecode.vue`, add code for initializing and destroying the `BarcodeReader` instance. The `ImgDecode` component uses `BarcodeReader` class of the library to help decode barcodes in an image. - -```vue - - - - - -``` - -### Add `VideoDecode` and `ImgDecode` components in `HelloWorld.vue` - -```vue - - - - - -``` - -> NOTE : -> -> * The method `loadWasm()` initializes the library in the background. - -### Add the `HelloWorld` component to `app.vue` - -Edit the file `app.vue` to be like this - -```vue - -``` - -* Try running the project. - -```cmd -npm run dev -``` - -If you have followed all the steps correctly, you should now have a functioning page that allows you to scan barcodes from a webcam or a built-in camera. Additionally, if you want to decode a local image, you can click the `Image Decode` button and select the image you want to decode. Any barcodes that are detected will be displayed in a dialog. - -## Project Setup - -```sh -npm install -``` - -### Compile and Hot-Reload for Development - -```sh -npm run dev -``` - -### Type-Check, Compile and Minify for Production - -```sh -npm run build -``` - -## Support - -If you have any questions, feel free to [contact Dynamsoft support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme). \ No newline at end of file diff --git a/1.hello-world/8.read-video-nuxtjs/components/HelloWorld.vue b/1.hello-world/8.read-video-nuxtjs/components/HelloWorld.vue deleted file mode 100644 index 267cda2c..00000000 --- a/1.hello-world/8.read-video-nuxtjs/components/HelloWorld.vue +++ /dev/null @@ -1,81 +0,0 @@ - - - - - \ No newline at end of file diff --git a/1.hello-world/8.read-video-nuxtjs/components/ImgDecode.vue b/1.hello-world/8.read-video-nuxtjs/components/ImgDecode.vue deleted file mode 100644 index 060ea421..00000000 --- a/1.hello-world/8.read-video-nuxtjs/components/ImgDecode.vue +++ /dev/null @@ -1,46 +0,0 @@ - - - - - \ No newline at end of file diff --git a/1.hello-world/8.read-video-nuxtjs/components/VideoDecode.vue b/1.hello-world/8.read-video-nuxtjs/components/VideoDecode.vue deleted file mode 100644 index 40f3863b..00000000 --- a/1.hello-world/8.read-video-nuxtjs/components/VideoDecode.vue +++ /dev/null @@ -1,214 +0,0 @@ - - - - - \ No newline at end of file diff --git a/1.hello-world/8.read-video-nuxtjs/dbr.ts b/1.hello-world/8.read-video-nuxtjs/dbr.ts deleted file mode 100644 index 716618cc..00000000 --- a/1.hello-world/8.read-video-nuxtjs/dbr.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { BarcodeReader } from "dynamsoft-javascript-barcode"; - -/** LICENSE ALERT - README - * To use the library, you need to first specify a license key using the API "license" as shown below. - */ - -BarcodeReader.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9'; - -/** - * You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&product=dbr&package=js to get your own trial license good for 30 days. - * Note that if you downloaded this sample from Dynamsoft while logged in, the above license key may already be your own 30-day trial license. - * For more information, see https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=9.6.32&utm_source=github#specify-the-license or contact support@dynamsoft.com. - * LICENSE ALERT - THE END - */ - -BarcodeReader.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.32/dist/"; \ No newline at end of file diff --git a/1.hello-world/8.read-video-nuxtjs/package.json b/1.hello-world/8.read-video-nuxtjs/package.json deleted file mode 100644 index 88554d44..00000000 --- a/1.hello-world/8.read-video-nuxtjs/package.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "private": true, - "scripts": { - "build": "nuxt build", - "dev": "nuxt dev", - "generate": "nuxt generate", - "preview": "nuxt preview", - "postinstall": "nuxt prepare" - }, - "devDependencies": { - "nuxt": "^3.2.3" - }, - "dependencies": { - "dynamsoft-javascript-barcode": "^9.6.32" - } -} diff --git a/1.hello-world/9.read-video-electron/README.md b/1.hello-world/9.read-video-electron/README.md deleted file mode 100644 index 9ac310b4..00000000 --- a/1.hello-world/9.read-video-electron/README.md +++ /dev/null @@ -1,180 +0,0 @@ -# Hello World Sample for Electron - -[Electron](https://www.electronjs.org/) is a framework for creating native applications with web technologies. Follow this guide to learn how to implement Dynamsoft Barcode Reader JavaScript SDK (hereafter called "the library") into an Electron application. - -## Official Sample - -* Read Barcodes from Camera - Source Code - -## Preparation - -Make sure you have [node](https://nodejs.org/) installed. `node 14.16.0` is used in this article. - -## Create an empty Application - -Create a folder with the name "read-video-electron" and a `package.json` file inside it with the following content: - -```json -{ - "name": "read-video-electron", - "version": "1.0.0", - "description": "How to read barcodes from a video input in an Electron App", - "main": "main.js", - "scripts": { - "start": "electron .", - "test": "echo \"Error: no test specified\" && exit 1" - }, - "author": "tom@dynamsoft.com", - "dependencies": { - "electron": "14.0.1", - "dynamsoft-javascript-barcode": "^9.6.32" - } -} -``` - -Then, run `npm install` to install the dependencies. - -```cmd -npm install -``` - -## Start to implement - -### Create a `main.js` file - -As defined in the `package.json` file, `main.js` is the entry point of the application, we define it like this: - -```javascript -const { app, BrowserWindow } = require('electron') - -function createWindow() { - const win = new BrowserWindow({ - width: 800, - height: 600, - }) - win.loadFile('index.html') -} - -app.whenReady().then(() => { - createWindow() - app.on('activate', () => { - if (BrowserWindow.getAllWindows().length === 0) { - createWindow() - } - }) -}) - -app.on('window-all-closed', () => { - if (process.platform !== 'darwin') { - app.quit() - } -}) -``` - -Two modules are imported in this file: - -* `app`: controls the application's event lifecycle. -* `BrowserWindow`: creates and manages application windows. - -The code basically opens `index.html` in a window. For more information, check out [Electron Quick Start](https://www.electronjs.org/docs/latest/tutorial/quick-start). - -### Create an index.html file - -Create the page to be loaded in the created window. - -```html - - - - - - Read barcodes from a video input in Electron! - - - - -

Read barcodes from a video input

- -
-
-
- - - - - - -``` - -The page loads action.js which makes use of the library to create a barcode scanner and read barcodes from a video input: - -```javascript -(async function () { - Dynamsoft.DBR.BarcodeReader.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9'; - Dynamsoft.DBR.BarcodeReader.loadWasm(); - let pScanner = null; - document.getElementById('readBarcode').onclick = async () => { - try { - let scanner = await (pScanner = pScanner || Dynamsoft.DBR.BarcodeScanner.createInstance()); - scanner.onFrameRead = results => { - if (results.length) { - console.log(results); - } - }; - scanner.onUniqueRead = (txt, result) => { - const format = result.barcodeFormat ? result.barcodeFormatString : result.barcodeFormatString_2; - document.getElementById('resultText').value = format + ': ' + txt; - }; - document.getElementById("barcodeScannerUI").appendChild(scanner.getUIElement()); - await scanner.show(); - } catch (ex) { - alert(ex.message); - throw ex; - } - }; -})(); -``` - -Also, style.css defines the styles for the UI - -```css -body { - text-align: center; -} - -#barcodeScannerUI { - width: 100%; - height: 100%; -} - -#UIElement { - margin: 2vmin auto; - text-align: center; - font-size: medium; - height: 40vh; - width: 80vw; -} -#resultText { - display: block; - margin: 0 auto; - padding: 0.4rem 0.8rem; - color: inherit; - width: 80vw; - border: none; - font-size: 1rem; - border-radius: 0.2rem; - text-align: center; -} -``` - -## Run the application - -Run the application with the following command and see how it goes. - -```cmd -npm start -``` - -## Support - -If you have any questions, feel free to [contact Dynamsoft support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme). diff --git a/1.hello-world/9.read-video-electron/action.js b/1.hello-world/9.read-video-electron/action.js deleted file mode 100644 index 325fdc9c..00000000 --- a/1.hello-world/9.read-video-electron/action.js +++ /dev/null @@ -1,40 +0,0 @@ -/** LICENSE ALERT - README - * To use the library, you need to first specify a license key using the API "license" as shown below. - */ - - Dynamsoft.DBR.BarcodeReader.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9'; - - /** - * You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&product=dbr&package=js to get your own trial license good for 30 days. - * Note that if you downloaded this sample from Dynamsoft while logged in, the above license key may already be your own 30-day trial license. - * For more information, see https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=9.6.32&utm_source=github#specify-the-license or contact support@dynamsoft.com. - * LICENSE ALERT - THE END - */ - - Dynamsoft.DBR.BarcodeReader.loadWasm(); - let pScanner = null; - document.getElementById('readBarcode').onclick = async () => { - try { - const scanner = await (pScanner = pScanner || Dynamsoft.DBR.BarcodeScanner.createInstance()); - scanner.onFrameRead = results => { - if (results.length) { - console.log(results); - } - }; - scanner.onUniqueRead = (txt, result) => { - alert(txt, result); - }; - document.getElementById("barcodeScannerUI").appendChild(scanner.getUIElement()); - await scanner.show(); - } catch (ex) { - let errMsg; - if (ex.message?.includes("network connection error")) { - errMsg = "Failed to connect to Dynamsoft License Server: network connection error. Check your Internet connection or contact Dynamsoft Support (support@dynamsoft.com) to acquire an offline license."; - } else { - errMsg = ex.message||ex; - } - console.error(errMsg); - alert(errMsg); - } - }; - \ No newline at end of file diff --git a/1.hello-world/9.read-video-electron/index.html b/1.hello-world/9.read-video-electron/index.html deleted file mode 100644 index 883ed252..00000000 --- a/1.hello-world/9.read-video-electron/index.html +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - - - Read barcodes from a video input in Electron! - - - - -

Hello World for Electron

- -
-
-
- - - - - - \ No newline at end of file diff --git a/1.hello-world/9.read-video-electron/main.js b/1.hello-world/9.read-video-electron/main.js deleted file mode 100644 index 11855925..00000000 --- a/1.hello-world/9.read-video-electron/main.js +++ /dev/null @@ -1,29 +0,0 @@ -const { app, BrowserWindow } = require('electron'); - -function createWindow() { - const win = new BrowserWindow({ - width: 800, - height: 600, - webPreferences: { - nativeWindowOpen: true - } - }) - - win.loadFile('index.html') -} - -app.whenReady().then(() => { - createWindow() - - app.on('activate', () => { - if (BrowserWindow.getAllWindows().length === 0) { - createWindow() - } - }) -}) - -app.on('window-all-closed', () => { - if (process.platform !== 'darwin') { - app.quit() - } -}) \ No newline at end of file diff --git a/1.hello-world/9.read-video-electron/package.json b/1.hello-world/9.read-video-electron/package.json deleted file mode 100644 index 7b737ef8..00000000 --- a/1.hello-world/9.read-video-electron/package.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "name": "read-video-electron", - "version": "1.0.0", - "description": "How to read barcodes from a video input in an Electron App", - "main": "main.js", - "scripts": { - "start": "electron .", - "test": "echo \"Error: no test specified\" && exit 1" - }, - "author": "tom@dynamsoft.com", - "dependencies": { - "dynamsoft-javascript-barcode": "^9.6.32", - "electron": "14.0.1" - } -} diff --git a/1.hello-world/9.read-video-electron/style.css b/1.hello-world/9.read-video-electron/style.css deleted file mode 100644 index 51092f2e..00000000 --- a/1.hello-world/9.read-video-electron/style.css +++ /dev/null @@ -1,28 +0,0 @@ - -body { - text-align: center; -} - -#barcodeScannerUI { - width: 100%; - height: 100%; -} - -#UIElement { - margin: 2vmin auto; - text-align: center; - font-size: medium; - height: 40vh; - width: 80vw; -} -#resultText { - display: block; - margin: 0 auto; - padding: 0.4rem 0.8rem; - color: inherit; - width: 80vw; - border: none; - font-size: 1rem; - border-radius: 0.2rem; - text-align: center; -} \ No newline at end of file diff --git a/1.hello-world/README.md b/1.hello-world/README.md deleted file mode 100644 index ce6a14e5..00000000 --- a/1.hello-world/README.md +++ /dev/null @@ -1,101 +0,0 @@ -# The Hello World Sample Set - -As you have already gone through the [user guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=9.6.32#getting-started---hello-world), you may have come across some basic "Hello World" code that can help you create a simple web application using our SDK quickly. - -In this set of samples, we will revisit the "Hello World" code and show how to implement it using some popular frameworks, such as Angular, React, and Vue. - -Let's now go through each of the samples. - -## Hello World - Read Barcodes via Video - -In this example, you will learn the minimum codes required to initialize and set up the SDK. - -Let's quickly break down the methods used in order: - -* `license`: This property specifies a license key. -* `createInstance()`: This method creates a `BarcodeScanner` object. This object can read barcodes directly from a video input with the help of its interactive UI (hidden by default) and the MediaDevices interface. -* `onFrameRead`: This event is triggered every time the SDK finishes scanning a video frame. The `results` object contains all the barcode results that the SDK have found on this frame. In this example, we print the results to the browser console. -* `onUniqueRead`: This event is triggered when the SDK finds a new barcode, which is unique among multiple frames. `txt` holds the barcode text value while `result` is an object that holds details of the barcode. In this example, an alert will be displayed on unique reads. -* `show()`: This method brings up the built-in UI of the `BarcodeScanner` object and starts scanning - -Actually, it is not necessary to define both onFrameRead and onUniqueRead in the code. onUniqueRead is more commonly used because it is triggered only when a new barcode is detected, rather than on every frame. - -## Hello World - Read Barcodes from an Image - -The second sample in this set focuses on the secondary class `BarcodeReader` which is a low-level barcode reader that processes static images and returns barcode results. - -In this sample, an event listener is set up so that the SDK decodes any images that the user uploads. - -When working with the BarcodeReader class, the main method to use is [`decode`](https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/BarcodeReader.html?ver=9.6.32#decode), although the class provides several other methods if you need to work with base64 strings or other formats. You can find the rest of the image decoding methods [here](https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/BarcodeReader.html?ver=9.6.32#decode-barcodes). - -## Hello World in Angular - -Read more in the README under "3.read-video-angular". - -## Hello World in React - -Read more in the README under "4.read-video-react". - -## Hello World in React using Hooks - -Read more in the README under "13.read-video-react-hooks". - -## Hello World in Vue 2 - -Read more in the README under "5.read-video-vue". - -## Hello World in Vue 3 - -Read more in the README under "6.read-video-vue3". - -## Hello World in Next.js - -Read more in the README under "7.read-video-nextjs". - -## Hello World in NuxtJS - -Read more in the README under "8.read-video-nuxtjs". - -## Hello World in Electron - -Read more in the README under "9.read-video-electron". - -## Hello World in PWA - -Read more in the README under "10.read-video-pwa". - -## Hello World with RequireJS - -This sample shows how to use the SDK in a web page based on RequireJS. - -Let's quickly break down the methods used in order: - -* `license`: This property specifies a license key. -* `createInstance()`: This method creates a `BarcodeScanner` object. This object can read barcodes directly from a video input with the help of its interactive UI (hidden by default) and the MediaDevices interface. -* `onFrameRead`: This event is triggered every time the SDK finishes scanning a video frame. The `results` object contains all the barcode results that the SDK have found on this frame. In this example, we print the results to the browser console. -* `onUniqueRead`: This event is triggered when the SDK finds a new barcode, which is unique among multiple frames. `txt` holds the barcode text value while `result` is an object that holds details of the barcode. In this example, an alert will be displayed on unique reads. -* `show()`: This method brings up the built-in UI of the `BarcodeScanner` object and starts scanning - -Actually, it is not necessary to define both onFrameRead and onUniqueRead in the code. onUniqueRead is more commonly used because it is triggered only when a new barcode is detected, rather than on every frame. - -## Hello World with ES6 - -This sample shows how to use the SDK in a web page based on ES6 (also known as ECMAScript 2015 or ECMAScript 6). - -Let's quickly break down the methods used in order: - -* `license`: This property specifies a license key. -* `createInstance()`: This method creates a `BarcodeScanner` object. This object can read barcodes directly from a video input with the help of its interactive UI (hidden by default) and the MediaDevices interface. -* `onFrameRead`: This event is triggered every time the SDK finishes scanning a video frame. The `results` object contains all the barcode results that the SDK have found on this frame. In this example, we print the results to the browser console. -* `onUniqueRead`: This event is triggered when the SDK finds a new barcode, which is unique among multiple frames. `txt` holds the barcode text value while `result` is an object that holds details of the barcode. In this example, an alert will be displayed on unique reads. -* `show()`: This method brings up the built-in UI of the `BarcodeScanner` object and starts scanning - -Actually, it is not necessary to define both onFrameRead and onUniqueRead in the code. onUniqueRead is more commonly used because it is triggered only when a new barcode is detected, rather than on every frame. - -## Hello World with WebView - -Read more in the README under "14.read-video-webview". - -## Support - -If you have any questions, feel free to contact Dynamsoft support via [email](mailto:support@dynamsoft.com) or [live chat](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) via the "Let's Chat" button. diff --git a/2.ui-tweaking/1.read-video-show-result.html b/2.ui-tweaking/1.read-video-show-result.html deleted file mode 100644 index 9126356e..00000000 --- a/2.ui-tweaking/1.read-video-show-result.html +++ /dev/null @@ -1,211 +0,0 @@ - - - - - - - - - Dynamsoft Barcode Reader Sample - Video Decoding with Default UI - - - - - - -

Use the Default Built-in UI

- -
-
- -
-
- All Results:
-
-
- - - - - - diff --git a/2.ui-tweaking/2.read-video-no-extra-control.html b/2.ui-tweaking/2.read-video-no-extra-control.html deleted file mode 100644 index b1a97a82..00000000 --- a/2.ui-tweaking/2.read-video-no-extra-control.html +++ /dev/null @@ -1,171 +0,0 @@ - - - - - - - - - Dynamsoft Barcode Reader Sample - Hide UI Controls - - - - - - -

Hide UI Controls

-
- -
-
-
-
- - - - - - - diff --git a/2.ui-tweaking/3.read-video-with-external-control.html b/2.ui-tweaking/3.read-video-with-external-control.html deleted file mode 100644 index 28ad8051..00000000 --- a/2.ui-tweaking/3.read-video-with-external-control.html +++ /dev/null @@ -1,620 +0,0 @@ - - - - - - - - - - Dynamsoft Barcode Reader Simple Sample - Read Video - External Control - - - - - -

Customized UI

- - -
-
-
- - - - -
-
-
    -
-
-
-
-
- - - - -
-
-
    -
    • -
  • ask 1920 x 1080
    • -
  • ask 1280 x 720
    • -
  • ask 720 x 576
    • -
  • ask 640 x 480
    • -
  • ask 480 x 360
    • -
  • ask 320 x 240
    • -
  • ask 176 x 144
    • -
-
-
-
- -
- Toggle Laser - Toggle Sound -
-
- -
-
-
- -
-
-
- - - - - - - diff --git a/2.ui-tweaking/4.difference-video-size.html b/2.ui-tweaking/4.difference-video-size.html deleted file mode 100644 index bd47fbd0..00000000 --- a/2.ui-tweaking/4.difference-video-size.html +++ /dev/null @@ -1,197 +0,0 @@ - - - - - - - - - Dynamsoft Barcode Reader Sample -Enlarge the Video Stream - - - - - -

Enlarge the Video Stream

-
- -
- -
-
- -
-
-
-
-
- - - - - - - diff --git a/2.ui-tweaking/5.read-video-with-custom-default-ui.html b/2.ui-tweaking/5.read-video-with-custom-default-ui.html deleted file mode 100644 index 0ec25ea2..00000000 --- a/2.ui-tweaking/5.read-video-with-custom-default-ui.html +++ /dev/null @@ -1,433 +0,0 @@ - - - - - - - - - Dynamsoft Barcode Reader Simple Sample - Read Video - Customized UI - - - - - -

Customized Default UI

-
-
-
- - - - -
-
-
    -
-
-
-
-
- - - - -
-
-
    -
    • -
  • ask 1920 x 1080
    • -
  • ask 1280 x 720
    • -
  • ask 720 x 576
    • -
  • ask 640 x 480
    • -
  • ask 480 x 360
    • -
  • ask 320 x 240
    • -
  • ask 176 x 144
    • -
-
-
-
-
-
-
- - - - - - - \ No newline at end of file diff --git a/2.ui-tweaking/README.md b/2.ui-tweaking/README.md deleted file mode 100644 index 268e0160..00000000 --- a/2.ui-tweaking/README.md +++ /dev/null @@ -1,112 +0,0 @@ -# JavaScript UI Customization Samples - -Dynamsoft Barcode Reader JavaScript SDK (hereafter called "the library") provides a built-in GUI to help developers build an interactive barcode reading interface. - -## Default GUI - -The following official sample demonstrates the default GUI built into the library. - -* Use the Default Camera UI - Demo -* Use the Default Camera UI - Source Code - -**GUI Elements** - -If you check the GUI on the demo page, you will find that it consists of the following elements - -* The video element that streams the video from a camera -* A laser beam moving vertically which indicates the working status of the library -* A dropdown box for selecting a camera -* A dropdown box for specifying the resolution for the selected camera -* A close button that closes the GUI when clicked - -There are a few other elements - -* Before the video starts streaming, there is a spinner that indicates the loading process -* When a barcode is found, the barcode is highlighted with an overlay -* If no camera is found on the device or camera access is denied on the page, the GUI will show a camera icon, which, when clicked, allows the user to select a local image or invoke the system camera interface - -## Hide Built-in Controllers - -The default UI of the BarcodeReader class includes several elements that may not match the style of your application. The following code snippet demonstrates how to remove the camera selector, resolution selector, and close button, as well as change the background color: - -```html -
- -
-
-
-
-``` - -```javascript -await scanner.setUIElement(document.getElementById('div-ui-container')); -``` - -Official sample: - -* Hide Built-in Controllers - Demo -* Hide Built-in Controllers - Source Code - -## Use External Controllers - -Based on the previous sample, you can build your own UI elements to control the barcode scanning process. - -For example, the following code adds a camera selector - -```html - -``` - -```javascript -async function updateCameras() { - let cameras = await scanner.getAllCameras(); - let cameraList = document.getElementById('cameraList'); - cameraList.options.length = 0; - for (let camera of cameras) { - let opt = new Option(camera.label, camera.deviceId); - cameraList.options.add(opt); - } -} -document.getElementById('cameraList').onchange = async function() { - try { - await scanner.setCurrentCamera(document.getElementById('cameraList').value); - } catch (ex) { - alert('Play video failed: ' + (ex.message || ex)); - } -}; -``` - -For more related customization, check out the following official sample: - -* Use External Controllers - Demo -* Use External Controllers - Source Code - -## Enlarge the Video Stream - -The library is usually used on mobile devices which have small screens. When scanning barcodes with the mobile camera, the video stream will be limited in the video element and may not be clear enough. Ideally, we should use the whole screen to play the video and find barcodes. - -The GUI is pure HTML. Thus modifying the size of the element is easy. The following code expands the element to fill the entire viewport: - -```javascript -document.getElementById('UIElement').style.height = '100vh'; -document.getElementById('UIElement').style.width = '100vw'; -document.getElementById('UIElement').style.position = 'absolute'; -``` - -Check out the following example code to see how you can expand the video stream to read a barcode and then restore it to its normal size: - -* Enlarge the Video Stream - Demo -* Enlarge the Video Stream - Source Code - -## Customize the Default Ui - -Check out the following example code that demonstrates how to create a custom viewer that is vastly different from the default one. You can feel the possibilities of customization: - -* Customize the Default Ui - Demo -* Customize the Default Ui - Source Code - -To learn more about UI customization, please refer to its corresponding [section](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/?ver=9.6.32#customize-the-ui-optional) in the user guide. - -## Support - -If you have any questions, feel free to contact Dynamsoft support via [email](mailto:support@dynamsoft.com) or [live chat](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) via the "Let's Chat" button. diff --git a/2.ui-tweaking/my.dbr.scanner.html b/2.ui-tweaking/my.dbr.scanner.html deleted file mode 100644 index 240b47b1..00000000 --- a/2.ui-tweaking/my.dbr.scanner.html +++ /dev/null @@ -1,30 +0,0 @@ -
- -
-
- -
- -
- - - \ No newline at end of file diff --git a/3.settings/1.barcodeFormats-expectedBarcodes.html b/3.settings/1.barcodeFormats-expectedBarcodes.html deleted file mode 100644 index d4a4d448..00000000 --- a/3.settings/1.barcodeFormats-expectedBarcodes.html +++ /dev/null @@ -1,117 +0,0 @@ - - - - - - - - - Dynamsoft Barcode Reader Sample - Limit Barcode Formats or Count - - - - - - - - -

Set Formats and Count

- - - - -
- -
-
- - - - - - - - - - - - \ No newline at end of file diff --git a/3.settings/2.localizationModes-binarizationModes.html b/3.settings/2.localizationModes-binarizationModes.html deleted file mode 100644 index e6cf3d01..00000000 --- a/3.settings/2.localizationModes-binarizationModes.html +++ /dev/null @@ -1,378 +0,0 @@ - - - - - - - - - - Dynamsoft Barcode Reader Sample - Blurred or Small Barcodes - - - - - - - - - -

Set Localization and Binarization

- - - - -
- -
-
- - - - - - - - - - - - diff --git a/3.settings/3.blurred-small-barcodes.html b/3.settings/3.blurred-small-barcodes.html deleted file mode 100644 index d2ba3832..00000000 --- a/3.settings/3.blurred-small-barcodes.html +++ /dev/null @@ -1,383 +0,0 @@ - - - - - - - - - - Dynamsoft Barcode Reader Sample - Blurred Small Barcodes - - - - - - - - -

Settings for Blurry or Small Codes

- - - - -
- -
-
- - - - - - - - - - - - diff --git a/3.settings/4.deformed-incomplete-barcodes.html b/3.settings/4.deformed-incomplete-barcodes.html deleted file mode 100644 index b338b341..00000000 --- a/3.settings/4.deformed-incomplete-barcodes.html +++ /dev/null @@ -1,198 +0,0 @@ - - - - - - - - - - Dynamsoft Barcode Reader Sample - Deformed or Incomplete Barcodes - - - - - - - - -

Settings for Deformed or Incomplete codes

- - - -
- -
-
- - - - - - - - - - - diff --git a/3.settings/5.regionOfInterest-regionPredetection.html b/3.settings/5.regionOfInterest-regionPredetection.html deleted file mode 100644 index 8406dcd5..00000000 --- a/3.settings/5.regionOfInterest-regionPredetection.html +++ /dev/null @@ -1,341 +0,0 @@ - - - - - - - - - - Dynamsoft Barcode Reader Sample - Region Definition or Pre-detection - - - - - - - - -

Define or Detect the Region of Interest

-

- - - -
- -
-
- - - - - - - - - - - - diff --git a/3.settings/6.dense-barcodes.html b/3.settings/6.dense-barcodes.html deleted file mode 100644 index dbdd4d43..00000000 --- a/3.settings/6.dense-barcodes.html +++ /dev/null @@ -1,99 +0,0 @@ - - - - - - - - - Dynamsoft Barcode Reader Sample - Dense Barcodes - - - - -
- - - - - diff --git a/3.settings/README.md b/3.settings/README.md deleted file mode 100644 index d580b984..00000000 --- a/3.settings/README.md +++ /dev/null @@ -1,158 +0,0 @@ -# JavaScript Parameter Settings Samples - -Dynamsoft Barcode Reader JavaScript SDK (hereafter called "the library") is built based on Dynamsoft's algorithm. The algorithm is very flexible and has many configurable parameters. In this article, we'll take a look at how the library makes use of these parameters. - -Please note that most of the styling is common across the samples in this sample set. To improve the readability, we grouped the styling all in one file, settings-css.css. Additionally, the samples also share the same scanner initialization code. For the sake of clarity, the initialization code was also grouped in the same JS file, initScanner.js, and referenced throughout the different samples in this set. - -## Specify the Barcode Types and Number of Barcodes Per Image - -In many scenarios, an application only needs to decode one or a few types of barcodes that are predetermined. In fact, the algorithm can operate more efficiently when it is aware of the number of barcodes expected on an image. The following code snippet demonstrates how to decode two QR codes from an image. - -```javascript -const settings = await scanner.getRuntimeSettings(); -settings.barcodeFormatIds = Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE; -settings.expectedBarcodesCount = 2; -await scanner.updateRuntimeSettings(settings); -``` - -The following official sample showcases the same features. - -* Specify Barcode Types and Count - Demo -* Specify Barcode Types and Count - Source Code - -## Set Localization and Binarization Modes - -Localization and binarization are two essential steps in the barcode reading process. - -* Localization Modes - -Localization modes specify how the algorithm localize a barcode. At present, 8 modes are available: "Connected Blocks", "Statistics", "Lines", "Scan Directly", "Statistics Marks", "Statistics Postal Code", "Center" and "OneD Fast Scan". More information can be found [here](https://www.dynamsoft.com/barcode-reader/parameters/reference/localization-modes.html?ver=9.6.32). A barcode reading session will attempt all of the set modes. The session will end once either the predefined number of barcodes are found or all of the set modes have been completed. The following code shows how to set multiple modes. - -```javascript -const settings = await scanner.getRuntimeSettings(); -settings.localizationModes = [2, 16, 4, 8, 32, 64, 0, 0]; -await scanner.updateRuntimeSettings(settings); -``` - -Note that each mode is represented by a number. - -Read more on [How to use different localization modes](https://www.dynamsoft.com/barcode-reader/parameters/scenario-settings/how-to-set-localization-modes.html). - -* Binarization Modes - -Binarization modes specify how the algorithm binarizes a colored or gray image. Right now, there are only two modes available: "Local Block" and "Threshold". More information can be found [here](https://www.dynamsoft.com/barcode-reader/parameters/reference/binarization-modes.html?ver=9.6.32). - -For each mode, there are a few arguments to fine-tune it for best performance. Read more on [How to configure the binarization parameters](https://www.dynamsoft.com/barcode-reader/parameters/scenario-settings/how-to-set-binarization-modes.html?ver=9.6.32). - -The following official sample demonstrates how to set Localization and Binarization modes. - -* Localization and Binarization - Demo -* Localization and Binarization - Source Code - -## Set Deblur Modes and Scale-up Modes - -* Deblur Modes - -The barcode reader often needs to handle blurry images, setting the deblur modes will help the algorithm better process them. In the library, there are 7 available modes: "Direct Binarization", "Threshold_Binarization", "Gray_Equalization", "Smoothing", "Morphing", "Deep_Analysis" and "Sharpening". More information can be found [here](https://www.dynamsoft.com/barcode-reader/parameters/reference/deblur-modes.html?ver=9.6.32). A barcode reading session will attempt all of the set modes. The session will end once either the predefined number of barcodes are found or all of the set modes have been completed. The following code shows how to set multiple deblur modes. - -```javascript -const settings = await scanner.getRuntimeSettings(); -settings.deblurModes = [1, 2, 4, 8, 0, 0, 0, 0, 0, 0]; -await scanner.updateRuntimeSettings(settings); -``` - -* Scale-up Modes - -In many cases, the barcodes appear very small on the image and makes it difficult to read. The scale-up modes can be used to enlarge such barcodes before reading them. In the library, there are 2 available modes: "Linear_Interpolation" and "Nearest_Neighbour_Interpolation". More information can be found [here](https://www.dynamsoft.com/barcode-reader/parameters/reference/scale-up-modes.html?ver=9.6.32). - -For each mode, there are a few arguments to fine-tune it for best performance. Read more on [How to read barcodes with small module sizes](https://www.dynamsoft.com/barcode-reader/parameters/scenario-settings/how-to-set-scaleup-modes.html?ver=9.6.32). - -The following official sample demonstrates how to set Deblur modes and Scale-up modes. - -* Deblur Modes and Scale-Up Modes - Demo -* Deblur Modes and Scale-Up Modes - Source Code - -## Deformation-Resisting Modes and Barcode-Complement Modes - -* Deformation-Resisting Modes - -As the name suggests, deformation-resisting modes deal with deformed barcocdes. Read more on [How to deal with deformed barcodes](https://www.dynamsoft.com/barcode-reader/parameters/scenario-settings/resist-deformation.html?ver=9.6.32). - -For now, there is only one available mode: "General". - -The following code enables deformation resisting. - -```javascript -const settings = await scanner.getRuntimeSettings(); -settings.furtherModes.deformationResistingModes = [2, 0, 0, 0, 0, 0, 0, 0]; -await scanner.updateRuntimeSettings(settings); -``` - -* Barcode-Complement Modes - -QR codes and Data Matrix codes can be picked up even if they are incomplete. Read more on [How to decode incomplete barcodes](https://www.dynamsoft.com/barcode-reader/parameters/scenario-settings/how-to-set-barcode-complememt-modes.html?ver=9.6.32). - -The parameter for this case is called [ `BarcodeComplementMode` ](https://www.dynamsoft.com/barcode-reader/parameters/reference/barcode-complement-modes.html?ver=9.6.32) which has only one available mode at present: "General". - -The following code enables incomplete barcode reading. - -```javascript -const settings = await scanner.getRuntimeSettings(); -settings.furtherModes.deformationResistingModes = [2, 0, 0, 0, 0, 0, 0, 0]; -await scanner.updateRuntimeSettings(settings); -``` - -The following official sample showcases deformation resisting and barcode complementing. - -* Deformation-Resisting Modes and Barcode-Complement Modes - Demo -* Deformation-Resisting Modes and Barcode-Complement Modes - Source Code - -## Define or Detect the Region of Interest - -When reading barcodes from a video input, the barcode normally takes up only a small portion of the video frame. If the barcode always appear around the same spot, we can configure the ROI (Region of Interest) to speed up the barcode reading process. There are two ways to do this. - -* Manually define the ROI - -If the ROI is predetermined in the use case, we can manually set the limit. For example, the following only reads 25% of the central area. - -```javascript -const settings = await scanner.getRuntimeSettings(); -settings.region.regionMeasuredByPercentage = 1; -settings.region.regionLeft = 25; -settings.region.regionTop = 25; -settings.region.regionRight = 75; -settings.region.regionBottom = 75; -await scanner.updateRuntimeSettings(settings); -``` - -* Automatically detect the ROI - -To let the algorithm detect the ROI automatically, we can set the parameter [ `RegionPredetectionModes` ](https://www.dynamsoft.com/barcode-reader/parameters/reference/region-predetection-modes.html?ver=9.6.32) which has four available modes: "General", "General_RGB_Contrast", "General_Gray_Contrast" and "General_HSV_Contrast". - -For each mode, there are a few arguments to fine-tune it for best performance. Read more on [How To Use Region Predetection](https://www.dynamsoft.com/barcode-reader/parameters/scenario-settings/how-to-use-region-predetection.html?ver=9.6.32). - -The following official sample showcases both ways to specify ROI. - -* Define or Detect the Region of Interest - Demo -* Define or Detect the Region of Interest - Source Code - -## Dealing with Dense Barcodes - -Some barcodes are designed to hold a lot of information which makes them very dense. To read such barcodes, we need to do two things - -1. Use a high resolution -2. Use the built-in "dense" template - -```javascript -await scanner.setResolution(3840, 2160); -await scanner.updateRuntimeSettings("dense"); -``` - -The following official sample showcases the performance of picking up dense barcodes with specific settings. - -* Dealing with Dense Barcodes - Demo -* Dealing with Dense Barcodes - Source Code - -## Support - -If you have any questions, feel free to contact Dynamsoft support via [email](mailto:support@dynamsoft.com) or [live chat](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) via the "Let's Chat" button. diff --git a/3.settings/initScanner.js b/3.settings/initScanner.js deleted file mode 100644 index aee45808..00000000 --- a/3.settings/initScanner.js +++ /dev/null @@ -1,112 +0,0 @@ -/* The purpose of this file is to combine the DBR Scanner initialization code as well as the common operations among all the samples in the settings folder */ - -if(location.protocol === "file:") { - const message = `The page is opened via file:// and "BarcodeScanner" may not work properly. Please open the page via https:// or host it on "http://localhost/".`; - console.warn(message); - alert(message); -} - -let pScanner = null; -let initialSettings = null; -let loadingText = document.getElementById('lib-load'); -let modalSettings = document.getElementById('settingsModal'); -let settingsBtn = document.getElementById('openSimpleSettingsMenu'); -let closeModalBtn = document.getElementById('closeModalBtn'); -let resultBox = document.getElementById('result'); - -// Create a BarcodeScanner instance on page load to speed things up. -window.onload = async function () { - try { - /** LICENSE ALERT - README - * To use the library, you need to first specify a license key using the API "license" as shown below. - */ - - Dynamsoft.DBR.BarcodeReader.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9'; - - /** - * You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&product=dbr&package=js to get your own trial license good for 30 days. - * Note that if you downloaded this sample from Dynamsoft while logged in, the above license key may already be your own 30-day trial license. - * For more information, see https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=9.6.32&utm_source=github#specify-the-license or contact support@dynamsoft.com. - * LICENSE ALERT - THE END - */ - - loadingText.hidden = false; - pScanner = pScanner || Dynamsoft.DBR.BarcodeScanner.createInstance(); - let scanner = await pScanner; - initialSettings = await scanner.getRuntimeSettings(); - await scanner.setUIElement(document.getElementById('div-ui-container')); - startReading(); - } catch (ex) { - let errMsg; - if (ex.message?.includes("network connection error")) { - errMsg = "Failed to connect to Dynamsoft License Server: network connection error. Check your Internet connection or contact Dynamsoft Support (support@dynamsoft.com) to acquire an offline license."; - } else { - errMsg = ex.message||ex; - } - console.error(errMsg); - alert(errMsg); - } - - // Open the settings modal menu once the settings button is clicked - settingsBtn.onclick = function () { - modalSettings.style.display = "block"; - } - - // Close the modal when the 'x' is clicked - closeModalBtn.onclick = function () { - modalSettings.style.display = "none"; - } - // When the user clicks anywhere outside of the modal, close it - window.onclick = function (event) { - if (event.target == modalSettings) { - modalSettings.style.display = "none"; - } - } - - /* The following defines an ontouchstart event for all the tooltip elements. This trigger is being added to take into account that there is no 'hover' event when using a mobile browser. Therefore, this event will be added so that the tooltip appears whenever it is tapped on a mobile browser */ - const tooltips = document.getElementsByClassName("tooltip"); - for (let _tip of tooltips) { - _tip.addEventListener('click', function () { - var _this = this; - _this.setAttribute('data-balloon-visible', ''); - setTimeout(function () { - _this.removeAttribute('data-balloon-visible'); - }, 3000); - }) - } - if (typeof initPage === "function") - initPage(); -}; - -// open the scanner video and start decoding once the Read Barcode button is clicked -async function startReading() { - try { - let scanner = await pScanner; - scanner.onFrameRead = (_results) => { - for (let result of _results) { - const format = result.barcodeFormatString; - resultBox.value = format + ": " + result.barcodeText; - } - }; - await scanner.show(); - loadingText.hidden = true; - resultBox.style.visibility = "visible"; - settingsBtn.style.visibility = "visible"; - } catch (ex) { - alert(ex.message); - throw ex; - } -} - -function showModes(elID, modes, index) { - var modesToShow = []; - for (var i = 0; i < modes.length; i++) { - var m = modes[i]; - if (i === index) { - modesToShow.push("" + m + "") - } else { - modesToShow.push(m) - } - } - document.getElementById(elID).innerHTML = modesToShow.join(", "); -} \ No newline at end of file diff --git a/3.settings/settings-css.css b/3.settings/settings-css.css deleted file mode 100644 index 9a28c076..00000000 --- a/3.settings/settings-css.css +++ /dev/null @@ -1,148 +0,0 @@ -body { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - overflow: hidden; - width: 100vw; - height: 90vh; - color: #455A64; - margin: 0; -} - -button { - font-size: 1.5rem; - margin-bottom: 2vh; -} - -strong { - font-size: x-large; - color: red; -} - -.modal { - display: none; - /* Hidden by default */ - position: fixed; - /* Stay in place */ - z-index: 100; - /* Sit on top */ - left: 0; - top: 0; - width: 100%; - /* Full width */ - height: 100%; - /* Full height */ - overflow: auto; - /* Enable scroll if needed */ - background-color: rgb(0, 0, 0); - /* Fallback color */ - background-color: rgba(0, 0, 0, 0.4); - /* Black w/ opacity */ -} - -.modal-content { - background-color: #f7e7e7; - margin: 5% auto; - /* 15% from the top and centered */ - padding: 2vmin; - border: 1px solid #888; - min-width: 300px; - max-width: 500px; - line-height: 5vh; - min-height: 400px; - max-height: 800px; - overflow: auto; - /* Could be more or less, depending on screen size */ -} - -/* The Close Button */ - -.closeModal { - color: rgb(131, 86, 86); - float: right; - font-size: 28px; - font-weight: bold; -} - -.closeModal:hover, .closeModal:focus { - color: black; - text-decoration: none; - cursor: pointer; -} - -/* Tooltip container */ - -.tooltip { - font-weight: bolder; - position: relative; - display: inline-block; - border-bottom: 1px dotted black; - /* If you want dots under the hoverable text */ -} - -/* All of the mode arguments of these options stay hidden until the user includes the option in its corresponding array/modes */ - -.localBlockForm, .thresholdForm, .liForm, .nniForm, .rgbContrastForm, .grayContrastForm { - display: none; - padding-left: 5px; -} - -/* CSS for the video viewer so that it is limited within the width of the screen size */ - -#div-ui-container { - text-align: center; - width: 100%; - height: 60vh; - overflow: hidden; - position: relative; -} - -#div-ui-container::after { - padding-top: 56.25%; - display: block; - content: ''; -} - -#div-ui-container .dce-video { - width: 100%; - height: 100%; - top: 0; - left: 0; - position: absolute; -} - -#openSimpleSettingsMenu { - visibility: hidden; -} - -[aria-label] { - line-height: 15px; -} - -.latest-result { - display: block; - visibility: hidden; - margin: 2vmin; - padding: 0.4rem 0.8rem; - color: inherit; - width: 80vw; - border: none; - font-size: 1rem; - border-radius: 0.2rem; - text-align: center; -} - -.latest-result::placeholder { - color: #B0BEC5; -} - -.latest-result:focus { - outline: none; - box-shadow: 0.1rem 0.4rem 0.8rem #fe8e14; -} - -.arguments { - border: 1px dashed gray; - padding-left: 3vw; -} \ No newline at end of file diff --git a/4.use-case/1.fill-a-form-with-barcode-reading.html b/4.use-case/1.fill-a-form-with-barcode-reading.html deleted file mode 100644 index 50cf5d79..00000000 --- a/4.use-case/1.fill-a-form-with-barcode-reading.html +++ /dev/null @@ -1,178 +0,0 @@ - - - - - - - - - - Dynamsoft Barcode Reader Simple Sample - Read Video - Fill Form - - - - - -

Read Barcodes as Input

- - Loading Library... - - - - - - - \ No newline at end of file diff --git a/4.use-case/2.read-a-drivers-license.html b/4.use-case/2.read-a-drivers-license.html deleted file mode 100644 index 777a71e1..00000000 --- a/4.use-case/2.read-a-drivers-license.html +++ /dev/null @@ -1,439 +0,0 @@ - - - - - - - - - - Dynamsoft Barcode Reader Simple Sample - Read Driver License - - - - - - Aim at the barcode on the driver's license. -

Read A Driver's License

-
- -
- Can't get scanning result for a long time? -

After setting the singleFrameMode as true, you can open the camera to shoot (mobile device) or choose from local to get a high-definition picture for recognition. Have a try

- -
-
-
- - - - -
- - - - - - - - diff --git a/4.use-case/3.show-result-texts-on-the-video.html b/4.use-case/3.show-result-texts-on-the-video.html deleted file mode 100644 index 735ee94b..00000000 --- a/4.use-case/3.show-result-texts-on-the-video.html +++ /dev/null @@ -1,168 +0,0 @@ - - - - - - - - - - Dynamsoft Barcode Reader Sample - Show Result Texts on the Video - - - - -
-
- - - - - - diff --git a/5.others/debug/public/index.html b/5.others/debug/public/index.html deleted file mode 100644 index 96deae88..00000000 --- a/5.others/debug/public/index.html +++ /dev/null @@ -1,147 +0,0 @@ - - - - - - - - - - - -

Read Barcodes from Camera - Debug

- -

- - - -

- -
-
- - - - - - - \ No newline at end of file diff --git a/README.md b/README.md index 5701f65a..778e8992 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ A default license is included which allows you to test the sample apps for up to ## Documentation -For the developer guide and full API reference of Dynamsoft Barcode Reader JavaScript library, please check out the [documentation](https://www.dynamsoft.com/barcode-reader/programming/javascript/?ver=9.6.32&utm_source=sampleReadme). +For the developer guide and full API reference of Dynamsoft Barcode Reader JavaScript library, please check out the [documentation](https://www.dynamsoft.com/barcode-reader/programming/javascript/?ver=10.0.20&utm_source=sampleReadme). ## Support @@ -20,45 +20,26 @@ If you have any questions, feel free to [contact Dynamsoft support](https://www. Get the basic features of the library working with plain/native JavaScript or within a framework like [Angular](https://angular.io/), [React](https://reactjs.org/) or [Vue](https://vuejs.org/), etc. -* [**Hello World**](https://demo.dynamsoft.com/samples/dbr/js/1.hello-world/1.hello-world.html?utm_source=sampleReadme): Scan barcodes from video stream with minimum code in JavaScript. -* [**Read an Image**](https://demo.dynamsoft.com/samples/dbr/js/1.hello-world/2.read-an-image.html?utm_source=sampleReadme): Decode barcodes from images in mobile album or desktop file system. -* [**Hello World in Angular**](https://demo.dynamsoft.com/samples/dbr/js/1.hello-world/3.read-video-angular/dist/hello-world/?utm_source=sampleReadme): Decode video stream in an Angular application from a webcam or a built-in camera. -* [**Hello World in React**](https://demo.dynamsoft.com/samples/dbr/js/1.hello-world/4.read-video-react/build/?utm_source=sampleReadme): Decode video stream in a React application from a webcam or a built-in camera. -* [**Hello World in React using Hooks**](https://demo.dynamsoft.com/samples/dbr/js/1.hello-world/13.read-video-react-hooks/build/?utm_source=sampleReadme): Decode video stream in a React application from a webcam or a built-in camera and use the Hooks charactor of React. -* [**Hello World in Vue**](https://demo.dynamsoft.com/samples/dbr/js/1.hello-world/5.read-video-vue/dist/?utm_source=sampleReadme): Decode video stream in a Vue 2 application from a webcam or a built-in camera. -* [**Hello World in Vue 3**](https://demo.dynamsoft.com/samples/dbr/js/1.hello-world/6.read-video-vue3/dist/?utm_source=sampleReadme): Decode video stream in a Vue 3 application from a webcam or a built-in camera. -* [**Hello World in Next.js**](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-nextjs.html?utm_source=sampleReadme): Decode video stream in a Next.js application from a webcam or a built-in camera. -* [**Hello World in Nuxt**](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-nuxtjs.html?utm_source=sampleReadme): Decode video stream in a Nuxt application from a webcam or a built-in camera. -* [**Hello World in Electron**](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-electron.html?utm_source=sampleReadme): Decode video stream in a Electron application from a webcam or a built-in camera. -* [**Hello World in PWA**](https://demo.dynamsoft.com/samples/dbr/js/1.hello-world/10.read-video-pwa/helloworld-pwa.html?utm_source=sampleReadme): Decode video stream in a PWA application from a webcam or a built-in camera. -* [**Hello World with RequireJS**](https://demo.dynamsoft.com/samples/dbr/js/1.hello-world/11.read-video-requirejs.html?utm_source=sampleReadme): Decode video stream in an application using RequireJS from a webcam or a built-in camera. -* [**Hello World with ES6**](https://demo.dynamsoft.com/samples/dbr/js/1.hello-world/12.read-video-es6.html?utm_source=sampleReadme): Decode video stream in an application using ES6 from a webcam or a built-in camera. -* [**Hello World in WebView**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/1.hello-world/14.read-video-webview): Decode video stream in an application in WebView from camera. -### Customize Camera UI - -* [**Use the Default Camera UI**](https://demo.dynamsoft.com/samples/dbr/js/2.ui-tweaking/1.read-video-show-result.html?utm_source=sampleReadme): Show the default camera UI to decode video stream from a webcam or a built-in camera. -* [**Hide Display Controls**](https://demo.dynamsoft.com/samples/dbr/js/2.ui-tweaking/2.read-video-no-extra-control.html?utm_source=sampleReadme): Hide built-in UI elements (camera selection, resolution selection, etc.) and show only the video stream. -* [**Set up External Controls**](https://demo.dynamsoft.com/samples/dbr/js/2.ui-tweaking/3.read-video-with-external-control.html?utm_source=sampleReadme): Use custom controllers to manipulate the Camera UI. -* [**Changing Size of Video Viewer**](https://demo.dynamsoft.com/samples/dbr/js/2.ui-tweaking/4.difference-video-size.html?utm_source=sampleReadme): Enlarge the video stream temporarily to read a barcode. -* [**Customize the Camera UI**](https://demo.dynamsoft.com/samples/dbr/js/2.ui-tweaking/5.read-video-with-custom-default-ui.html?utm_source=sampleReadme): Show the custom camera UI to decode video stream from a webcam or a built-in camera. - -### Parameter Settings - -How to configure different settings of the barcode scanning library. - -* [**Formats and Count**](https://demo.dynamsoft.com/samples/dbr/js/3.settings/1.barcodeFormats-expectedBarcodes.html?utm_source=sampleReadme): Set the barcode formats and the number of barcodes to read per image/frame. -* [**Localization and Binarization**](https://demo.dynamsoft.com/samples/dbr/js/3.settings/2.localizationModes-binarizationModes.html?utm_source=sampleReadme): Set how localization and binarization are done during barcode decoding. -* [**Blurry or Small codes**](https://demo.dynamsoft.com/samples/dbr/js/3.settings/3.blurred-small-barcodes.html?utm_source=sampleReadme): Set `DeblurModes` and `ScaleUpModes` for decoding blurry or small barcodes. -* [**Deformed or Incomplete codes**](https://demo.dynamsoft.com/samples/dbr/js/3.settings/4.deformed-incomplete-barcodes.html?utm_source=sampleReadme): Set `DeformationResistingModes` or `BarcodeComplementModes` for decoding deformed or incomplete barcodes. -* [**Define or Detect the Region**](https://demo.dynamsoft.com/samples/dbr/js/3.settings/5.regionOfInterest-regionPredetection.html?utm_source=sampleReadme): Set the region of interest manually or `regionPredetectionModes` to speed up the barcode reading process. -* [**Dense codes**](https://demo.dynamsoft.com/samples/dbr/js/3.settings/6.dense-barcodes.html?utm_source=sampleReadme): Set `dense` template and high resolution for decoding dense barcodes. +* [**Hello World**](https://demo.dynamsoft.com/samples/dbr/js/hello-world/hello-world.html?utm_source=sampleReadme): Scan barcodes from video stream with minimum code in JavaScript. +* [**Read an Image**](https://demo.dynamsoft.com/samples/dbr/js/hello-world/read-an-image.html?utm_source=sampleReadme): Decode barcodes from images in mobile album or desktop file system. +* [**Hello World in Angular**](https://demo.dynamsoft.com/samples/dbr/js/hello-world/angular/dist/angular?utm_source=sampleReadme): Read barcodes from camera and images in an Angular application. +* [**Hello World in React**](https://demo.dynamsoft.com/samples/dbr/js/hello-world/react/build/?utm_source=sampleReadme): Read barcodes from camera and images in a React application. +* [**Hello World in React using Hooks**](https://demo.dynamsoft.com/samples/dbr/js/hello-world/react-hooks/build/?utm_source=sampleReadme): Read barcodes from camera and images in a React application and use the Hooks charactor of React. +* [**Hello World in Vue**](https://demo.dynamsoft.com/samples/dbr/js/hello-world/vue/dist/?utm_source=sampleReadme): Read barcodes from camera and images in a Vue 3 application. +* [**Hello World in Next.js**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world/next#readme): Read barcodes from camera and images in a Next.js application. +* [**Hello World in Nuxt**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world/nuxt#readme): Read barcodes from camera and images in a Nuxt application. +* [**Hello World in Electron**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world/electron#readme): Read barcodes from camera and images in a Electron application. +* [**Hello World in PWA**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world/pwa#readme): Decode video stream in a PWA application from a webcam or a built-in camera. +* [**Hello World with RequireJS**](https://demo.dynamsoft.com/samples/dbr/js/hello-world/requirejs.html?utm_source=sampleReadme): Decode video stream in an application using RequireJS from a webcam or a built-in camera. +* [**Hello World with ES6**](https://demo.dynamsoft.com/samples/dbr/js/hello-world/es6.html?utm_source=sampleReadme): Decode video stream in an application using ES6 from a webcam or a built-in camera. +* [**Hello World in WebView**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world/webview): Decode video stream in an application in WebView from camera. ### Use Cases -* [**Read Video and Fill a Form**](https://demo.dynamsoft.com/samples/dbr/js/4.use-case/1.fill-a-form-with-barcode-reading.html?utm_source=sampleReadme): Read barcodes to fill a form. -* [**Read a Driver's License**](https://demo.dynamsoft.com/samples/dbr/js/4.use-case/2.read-a-drivers-license.html?utm_source=sampleReadme): Read the PDF417 barcode on a driver's license (AAMVA compliant) and parse it. -* [**Show Result Texts on the Video**](https://demo.dynamsoft.com/samples/dbr/js/4.use-case/3.show-result-texts-on-the-video.html?utm_source=sampleReadme): Read barcodes via camera and show result texts on the video. +* [**Read Video and Fill a Form**](https://demo.dynamsoft.com/samples/dbr/js/use-case/fill-a-form-with-barcode-reading.html?utm_source=sampleReadme): Read barcodes to fill a form. +* [**Read a Driver's License**](https://demo.dynamsoft.com/samples/dbr/js/use-case/read-a-drivers-license.html?utm_source=sampleReadme): Read the PDF417 barcode on a driver's license (AAMVA compliant) and parse it. +* [**Show Result Texts on the Video**](https://demo.dynamsoft.com/samples/dbr/js/use-case/show-result-texts-on-the-video.html?utm_source=sampleReadme): Read barcodes via camera and show result texts on the video. ### Others -* [**Debug**](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/debug.html?utm_source=sampleReadme): Collect the actual image frames for debugging purposes. +* [**Debug**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/other/debug#readme): Collect the actual image frames for debugging purposes. diff --git a/hello-world/README.md b/hello-world/README.md new file mode 100644 index 00000000..cdeb078f --- /dev/null +++ b/hello-world/README.md @@ -0,0 +1,94 @@ +# The Hello World Sample Set + +As you have already gone through the [user guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=10.0.20#getting-started---hello-world), you may have come across some basic "Hello World" code that can help you create a simple web application using our SDK quickly. + +In this set of samples, we will revisit the "Hello World" code and show how to implement it using some popular frameworks, such as Angular, React, and Vue. + +Let's now go through each of the samples. + +## Hello World + +In this example, you will learn the minimum codes required to initialize and set up the SDK. + +Let's quickly break down the methods used in order: + +- `Dynamsoft.License.LicenseManager.initLicense()`: This method initializes the license for using the SDK in the application. +- `Dynamsoft.CVR.CaptureVisionRouter.createInstance()`: This method creates a `CaptureVisionRouter` object `router` which controls the entire process in three steps: + - **Retrieve Images from the Image Source** + - `router` connects to the image source through the [`Image Source Adapter`](https://www.dynamsoft.com/capture-vision/docs/core/architecture/input.html#image-source-adapter?lang=js) interface with the method `setInput()`. + ```js + router.setInput(cameraEnhancer); + ``` + > The image source in our case is a CameraEnhancer object created with `Dynamsoft.DCE.CameraEnhancer.createInstance(view)` + - **Coordinate Image-Processing Tasks** + - The coordination happens behind the scenes. `router` starts the process by specifying a preset template "ReadSingleBarcode" with the method `startCapturing()`. + ```js + router.startCapturing("ReadSingleBarcode"); + ``` + - **Dispatch Results to Listening Objects** + - 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 `router` via the method `addResultReceiver()`. + ```js + router.addResultReceiver(resultReceiver); + ``` + - Also note that reading from video is extremely fast and there could be many duplicate results. We can use a `MultiFrameResultCrossFilter` object with result deduplication enabled to filter out the duplicate results. The object is registered to `router` via the method `addResultFilter()`. + ```js + router.addResultFilter(filter); + ``` + +> Read more on [Capture Vision Router](https://www.dynamsoft.com/capture-vision/docs/core/architecture/#capture-vision-router). + +## Hello World - Read Barcodes from an Image + +The second sample processes static images and returns barcode results. + +In this sample, an event listener is set up so that the SDK decodes any images that the user uploads. + +When working with the CaptureVisionRouter class for single image processing, the main method to use is [`capture`](https://dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/capture-vision-router/single-file-processing.html?product=dbr&repoType=web#capture), You can find more details about this method at the link above. + +## Hello World in Angular + +Read more in the README under "angular". + +## Hello World in React + +Read more in the README under "react". + +## Hello World in React using Hooks + +Read more in the README under "react-hooks". + +## Hello World in Vue + +Read more in the README under "vue". + +## Hello World in Next.js + +Read more in the README under "next". + +## Hello World in NuxtJS + +Read more in the README under "nuxt". + +## Hello World in Electron + +Read more in the README under "electron". + +## Hello World in PWA + +Read more in the README under "pwa". + +## Hello World with RequireJS + +This sample shows how to use the SDK in a web page based on RequireJS. + +## Hello World with ES6 + +This sample shows how to use the SDK in a web page based on ES6 (also known as ECMAScript 2015 or ECMAScript 6). + +## Hello World with WebView + +Read more in the README under "webview". + +## Support + +If you have any questions, feel free to [contact Dynamsoft support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme). diff --git a/1.hello-world/3.read-video-angular/.editorconfig b/hello-world/angular/.editorconfig similarity index 100% rename from 1.hello-world/3.read-video-angular/.editorconfig rename to hello-world/angular/.editorconfig diff --git a/1.hello-world/3.read-video-angular/.gitignore b/hello-world/angular/.gitignore similarity index 100% rename from 1.hello-world/3.read-video-angular/.gitignore rename to hello-world/angular/.gitignore diff --git a/hello-world/angular/README.md b/hello-world/angular/README.md new file mode 100644 index 00000000..477c789d --- /dev/null +++ b/hello-world/angular/README.md @@ -0,0 +1,409 @@ +# Hello World Sample for Angular + +[Angular](https://angular.io/) is one of the most popular and mature JavaScript frameworks. Check out the following on how to implement Dynamsoft Barcode Reader JavaScript SDK (hereafter called "the library") into an Angular application. + +## Official Sample + +* Hello World in Angular - Demo +* Hello World in Angular - Source Code + +## Preparation + +Make sure you have [node](https://nodejs.org/) and [Angular CLI](https://cli.angular.io/) installed. `node 16.20.1` and `Angular CLI 16.2.7` are used in the example below. + +## Create the sample project + +### Create an out-of-the-box raw Angular application + +```cmd +ng new my-app +``` + +### **CD** to the root directory of the application and install necessary libraries + +```cmd +cd my-app +npm install dynamsoft-core +npm install dynamsoft-license +npm install dynamsoft-utility +npm install dynamsoft-barcode-reader +npm install dynamsoft-capture-vision-router +npm install dynamsoft-camera-enhancer +``` + +## Start to implement + +### Add file "cvr.ts" under "/src/" to configure libraries + +```typescript +import { CoreModule } from 'dynamsoft-core'; +import { LicenseManager } from 'dynamsoft-license'; +import 'dynamsoft-barcode-reader'; + +/** LICENSE ALERT - README + * To use the library, you need to first specify a license key using the API "initLicense()" as shown below. + */ + +LicenseManager.initLicense( + 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9' +); + +/** + * You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&product=dbr&package=js to get your own trial license good for 30 days. + * Note that if you downloaded this sample from Dynamsoft while logged in, the above license key may already be your own 30-day trial license. + * For more information, see https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=10.0.20&utm_source=github#specify-the-license or contact support@dynamsoft.com. + * LICENSE ALERT - THE END + */ + +CoreModule.engineResourcePaths = { + std: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.0.0/dist/", + dip: "https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.0.30/dist/", + core: "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.0.32/dist/", + license: "https://cdn.jsdelivr.net/npm/dynamsoft-license@3.0.20/dist/", + cvr: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.0.31/dist/", + dbr: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.0.20/dist/", + dce: "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.1/dist/" +}; + +// Preload "BarcodeReader" module for reading barcodes. It will save time on the initial decoding by skipping the module loading. +CoreModule.loadWasm(['DBR']); +``` + +> Note: +> +> * `initLicense()` specify a license key to use the library. You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=sample&product=dbr&package=js to get your own trial license good for 30 days. +> * `engineResourcePaths` tells the library where to get the necessary resources at runtime. + +### Generate three components +* `video-capture` component helps read barcode from camera. +```cmd +ng generate component video-capture +``` +* `image-capture` component helps read barcode from still images. +```cmd +ng generate component image-capture +``` +* `hello-world` component offers buttons to switch components above. +```cmd +ng generate component hello-world +``` + +### Edit the video-capture component + +* Replace the original code in `video-capture.component.html` with code below. + +```html +
+Results: +
+
+``` + +* Add CSS style in `video-capture.component.css`. + +```css +.div-ui-container { + width: 100%; + height: 70vh; +} + +.div-results-container { + width: 100%; + height: 10vh; + overflow: auto; +} +``` + +* In `video-capture.component.ts`, add code for initializing and destroying some instances. + +```typescript +import { Component, ElementRef, ViewChild } from '@angular/core'; +import { EnumCapturedResultItemType } from 'dynamsoft-core' +import { DecodedBarcodesResult } from 'dynamsoft-barcode-reader'; +import { + CameraEnhancer, + CameraView, +} from 'dynamsoft-camera-enhancer'; +import { + CapturedResultReceiver, + CaptureVisionRouter, +} from 'dynamsoft-capture-vision-router'; +import { MultiFrameResultCrossFilter } from 'dynamsoft-utility'; +import '../../cvr'; // import side effects. The license, engineResourcePath, so on. + +@Component({ + selector: 'app-video-capture', + templateUrl: './video-capture.component.html', + styleUrls: ['./video-capture.component.css'], +}) +export class VideoCaptureComponent { + pInit: Promise<{ + cameraView: CameraView; + cameraEnhancer: CameraEnhancer; + router: CaptureVisionRouter; + }> | null = null; + + @ViewChild('uiContainer') uiContainer: ElementRef | null = + null; + @ViewChild('resultsContainer') resultsContainer: ElementRef | null = + null; + + async init(): Promise<{ + cameraView: CameraView; + cameraEnhancer: CameraEnhancer; + router: CaptureVisionRouter; + }> { + try { + // Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control. + const cameraView = await CameraView.createInstance(); + const cameraEnhancer = await CameraEnhancer.createInstance(cameraView); + this.uiContainer!.nativeElement.append(cameraView.getUIElement()); // Get default UI and append it to DOM. + + // Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source. + const router = await CaptureVisionRouter.createInstance(); + router.setInput(cameraEnhancer); + + // Define a callback for results. + const resultReceiver = new CapturedResultReceiver(); + resultReceiver.onDecodedBarcodesReceived = (result: DecodedBarcodesResult) => { + if (!result.barcodeResultItems.length) return; + + this.resultsContainer!.nativeElement.textContent = ''; + console.log(result); + for (let item of result.barcodeResultItems) { + this.resultsContainer!.nativeElement.append( + `${item.formatString}: ${item.text}`, + document.createElement('br'), + document.createElement('hr'), + ); + } + }; + router.addResultReceiver(resultReceiver); + + // Filter out unchecked and duplicate results. + const filter = new MultiFrameResultCrossFilter(); + filter.enableResultCrossVerification( + EnumCapturedResultItemType.CRIT_BARCODE, + true + ); // Filter out unchecked barcodes. + // Filter out duplicate barcodes within 3 seconds. + filter.enableResultDeduplication( + EnumCapturedResultItemType.CRIT_BARCODE, + true + ); + filter.setDuplicateForgetTime( + EnumCapturedResultItemType.CRIT_BARCODE, + 3000 + ); + await router.addResultFilter(filter); + + // Open camera and start scanning single barcode. + await cameraEnhancer.open(); + await router.startCapturing('ReadSingleBarcode'); + return { + cameraView, + cameraEnhancer, + router, + }; + } catch (ex: any) { + let errMsg = ex.message || ex; + console.error(errMsg); + alert(errMsg); + throw ex; + } + } + + async ngOnInit(): Promise { + this.pInit = this.init(); + } + + async ngOnDestroy() { + if (this.pInit) { + const { cameraView, cameraEnhancer, router } = await this.pInit; + router.dispose(); + cameraEnhancer.dispose(); + cameraView.dispose(); + } + this.uiContainer!.nativeElement.innerText = ""; + console.log('VideoCapture Component Unmount'); + } +} +``` + +### Edit the image-capture component + +* Replace the original code in `image-capture.component.html` with code below to select a local image via `input` element. + +```html +
+``` + +* Add CSS style in `image-capture.component.css`. + +```css +.div-image-capture { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + border: 1px solid black; +} +``` + +* In `image-capture.component.ts`, add code for initializing and destroying the `CaptureVisionRouter` instance. + +```typescript +import { Component } from '@angular/core'; +import { BarcodeResultItem } from 'dynamsoft-barcode-reader'; +import { CaptureVisionRouter } from 'dynamsoft-capture-vision-router'; +import '../../cvr'; // import side effects. The license, engineResourcePath, so on. + +@Component({ + selector: 'app-image-capture', + templateUrl: './image-capture.component.html', + styleUrls: ['./image-capture.component.css'], +}) +export class ImageCaptureComponent { + pInit: Promise | null = null; + + decodeImg = async (e: any) => { + try { + const router = await this.pInit; + // Decode selected image with 'ReadBarcodes_SpeedFirst' template. + const result = await router!.capture( + e.target.files[0], + 'ReadBarcodes_SpeedFirst' + ); + let texts = ''; + for (let item of result.items) { + console.log((item as BarcodeResultItem).text); + texts += (item as BarcodeResultItem).text + '\n'; + } + if (texts != '') alert(texts); + if (!result.items.length) alert('No barcode found'); + } catch (ex: any) { + let errMsg = ex.message || ex; + console.error(errMsg); + alert(errMsg); + } + e.target.value = ''; + }; + + async ngOnInit(): Promise { + this.pInit = CaptureVisionRouter.createInstance(); + } + + async ngOnDestroy() { + if (this.pInit) { + const router = await this.pInit; + router.dispose(); + } + console.log('ImageCapture Component Unmount'); + } +} + +``` + +### Edit the hello-world component + +* Use the components in `hello-world.component.html`. + +```html +
+

Hello World for Angular

+
+ + +
+
+ + +
+
+``` + +* Define the style of the element in `hello-world.component.css`. + +```css +.div-hello-world { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + color: #455A64; +} + +button { + font-size: 1.5rem; + margin: 1.5vh 0; + border: 1px solid black; + background-color: white; + color: black; +} + +.container { + margin: 2vmin auto; + height: 70vh; + width: 80vw; +} + +h1 { + font-size: 1.5em; +} +``` + +* Add following code to `hello-world.component.ts`. + +```typescript +import { Component } from '@angular/core'; +import '../../cvr'; // import side effects. The license, engineResourcePath, so on. + +@Component({ + selector: 'app-hello-world', + templateUrl: './hello-world.component.html', + styleUrls: ['./hello-world.component.css'] +}) +export class HelloWorldComponent { + bShowVideoCapture = true; + bShowImageCapture = false; + + showVideoCapture(): void { + this.bShowVideoCapture = true; + this.bShowImageCapture = false; + } + showImageCapture(): void { + this.bShowVideoCapture = false; + this.bShowImageCapture = true; + } +} +``` + +### Add the hello-world component to `app.component.html` + +Edit the file `app.component.html` to contain nothing but the following + +```html + +``` + +* Try running the project. + +```cmd +ng serve +``` + +If you have followed all the steps correctly, you should now have a functioning page that allows you to scan barcodes from a webcam or a built-in camera. Additionally, if you want to decode a local image, you can click the `Decode Image` button and select the image you want to decode. Any barcodes that are detected will be displayed in a dialog. + +## Development server + +Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. + +## Build + +Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build. + +## Support + +If you have any questions, feel free to [contact Dynamsoft support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme). diff --git a/1.hello-world/3.read-video-angular/angular.json b/hello-world/angular/angular.json similarity index 90% rename from 1.hello-world/3.read-video-angular/angular.json rename to hello-world/angular/angular.json index 5d7d7f44..38485846 100644 --- a/1.hello-world/3.read-video-angular/angular.json +++ b/hello-world/angular/angular.json @@ -3,7 +3,7 @@ "version": 1, "newProjectRoot": "projects", "projects": { - "read-video-angular": { + "angular": { "projectType": "application", "schematics": {}, "root": "", @@ -13,7 +13,7 @@ "build": { "builder": "@angular-devkit/build-angular:browser", "options": { - "outputPath": "dist/hello-world", + "outputPath": "dist/angular", "index": "src/index.html", "main": "src/main.ts", "polyfills": [ @@ -60,10 +60,10 @@ "builder": "@angular-devkit/build-angular:dev-server", "configurations": { "production": { - "browserTarget": "read-video-angular:build:production" + "browserTarget": "angular:build:production" }, "development": { - "browserTarget": "read-video-angular:build:development" + "browserTarget": "angular:build:development" } }, "defaultConfiguration": "development" @@ -71,7 +71,7 @@ "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { - "browserTarget": "read-video-angular:build" + "browserTarget": "angular:build" } }, "test": { diff --git a/hello-world/angular/package.json b/hello-world/angular/package.json new file mode 100644 index 00000000..fc65fdc6 --- /dev/null +++ b/hello-world/angular/package.json @@ -0,0 +1,44 @@ +{ + "name": "hello-world", + "version": "0.0.0", + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "watch": "ng build --watch --configuration development", + "test": "ng test" + }, + "private": true, + "dependencies": { + "@angular/animations": "^16.2.0", + "@angular/common": "^16.2.0", + "@angular/compiler": "^16.2.0", + "@angular/core": "^16.2.0", + "@angular/forms": "^16.2.0", + "@angular/platform-browser": "^16.2.0", + "@angular/platform-browser-dynamic": "^16.2.0", + "@angular/router": "^16.2.0", + "dynamsoft-barcode-reader": "10.0.20", + "dynamsoft-utility": "1.0.21", + "dynamsoft-camera-enhancer": "4.0.1", + "dynamsoft-capture-vision-router": "2.0.31", + "dynamsoft-core": "3.0.32", + "dynamsoft-license": "3.0.20", + "rxjs": "~7.8.0", + "tslib": "^2.3.0", + "zone.js": "~0.13.0" + }, + "devDependencies": { + "@angular-devkit/build-angular": "^16.2.7", + "@angular/cli": "^16.2.7", + "@angular/compiler-cli": "^16.2.0", + "@types/jasmine": "~4.3.0", + "jasmine-core": "~4.6.0", + "karma": "~6.4.0", + "karma-chrome-launcher": "~3.2.0", + "karma-coverage": "~2.2.0", + "karma-jasmine": "~5.1.0", + "karma-jasmine-html-reporter": "~2.1.0", + "typescript": "~5.1.3" + } +} diff --git a/1.hello-world/3.read-video-angular/src/app/app.component.css b/hello-world/angular/src/app/app.component.css similarity index 100% rename from 1.hello-world/3.read-video-angular/src/app/app.component.css rename to hello-world/angular/src/app/app.component.css diff --git a/1.hello-world/3.read-video-angular/src/app/app.component.html b/hello-world/angular/src/app/app.component.html similarity index 100% rename from 1.hello-world/3.read-video-angular/src/app/app.component.html rename to hello-world/angular/src/app/app.component.html diff --git a/1.hello-world/3.read-video-angular/src/app/app.component.spec.ts b/hello-world/angular/src/app/app.component.spec.ts similarity index 68% rename from 1.hello-world/3.read-video-angular/src/app/app.component.spec.ts rename to hello-world/angular/src/app/app.component.spec.ts index 3993792e..16b0b0c1 100644 --- a/1.hello-world/3.read-video-angular/src/app/app.component.spec.ts +++ b/hello-world/angular/src/app/app.component.spec.ts @@ -2,13 +2,9 @@ import { TestBed } from '@angular/core/testing'; import { AppComponent } from './app.component'; describe('AppComponent', () => { - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ - AppComponent - ], - }).compileComponents(); - }); + beforeEach(() => TestBed.configureTestingModule({ + declarations: [AppComponent] + })); it('should create the app', () => { const fixture = TestBed.createComponent(AppComponent); @@ -16,16 +12,16 @@ describe('AppComponent', () => { expect(app).toBeTruthy(); }); - it(`should have as title 'read-video-angular'`, () => { + it(`should have as title 'angular'`, () => { const fixture = TestBed.createComponent(AppComponent); const app = fixture.componentInstance; - expect(app.title).toEqual('read-video-angular'); + expect(app.title).toEqual('angular'); }); it('should render title', () => { const fixture = TestBed.createComponent(AppComponent); fixture.detectChanges(); const compiled = fixture.nativeElement as HTMLElement; - expect(compiled.querySelector('.content span')?.textContent).toContain('read-video-angular app is running!'); + expect(compiled.querySelector('.content span')?.textContent).toContain('angular app is running!'); }); }); diff --git a/1.hello-world/3.read-video-angular/src/app/app.component.ts b/hello-world/angular/src/app/app.component.ts similarity index 85% rename from 1.hello-world/3.read-video-angular/src/app/app.component.ts rename to hello-world/angular/src/app/app.component.ts index b0a3e2a6..597a7729 100644 --- a/1.hello-world/3.read-video-angular/src/app/app.component.ts +++ b/hello-world/angular/src/app/app.component.ts @@ -6,5 +6,5 @@ import { Component } from '@angular/core'; styleUrls: ['./app.component.css'] }) export class AppComponent { - title = 'read-video-angular'; + title = 'angular'; } diff --git a/1.hello-world/3.read-video-angular/src/app/app.module.ts b/hello-world/angular/src/app/app.module.ts similarity index 61% rename from 1.hello-world/3.read-video-angular/src/app/app.module.ts rename to hello-world/angular/src/app/app.module.ts index e0506f73..8ea8adde 100644 --- a/1.hello-world/3.read-video-angular/src/app/app.module.ts +++ b/hello-world/angular/src/app/app.module.ts @@ -2,16 +2,16 @@ import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; -import { VideoDecodeComponent } from './video-decode/video-decode.component'; -import { ImgDecodeComponent } from './img-decode/img-decode.component'; import { HelloWorldComponent } from './hello-world/hello-world.component'; +import { ImageCaptureComponent } from './image-capture/image-capture.component'; +import { VideoCaptureComponent } from './video-capture/video-capture.component'; @NgModule({ declarations: [ AppComponent, - VideoDecodeComponent, - ImgDecodeComponent, - HelloWorldComponent + HelloWorldComponent, + ImageCaptureComponent, + VideoCaptureComponent ], imports: [ BrowserModule diff --git a/1.hello-world/3.read-video-angular/src/app/hello-world/hello-world.component.css b/hello-world/angular/src/app/hello-world/hello-world.component.css similarity index 95% rename from 1.hello-world/3.read-video-angular/src/app/hello-world/hello-world.component.css rename to hello-world/angular/src/app/hello-world/hello-world.component.css index e8ab459f..86454a89 100644 --- a/1.hello-world/3.read-video-angular/src/app/hello-world/hello-world.component.css +++ b/hello-world/angular/src/app/hello-world/hello-world.component.css @@ -1,4 +1,4 @@ -.helloWorld { +.div-hello-world { display: flex; flex-direction: column; align-items: center; diff --git a/hello-world/angular/src/app/hello-world/hello-world.component.html b/hello-world/angular/src/app/hello-world/hello-world.component.html new file mode 100644 index 00000000..882d46a8 --- /dev/null +++ b/hello-world/angular/src/app/hello-world/hello-world.component.html @@ -0,0 +1,11 @@ +
+

Hello World for Angular

+
+ + +
+
+ + +
+
\ No newline at end of file diff --git a/1.hello-world/3.read-video-angular/src/app/hello-world/hello-world.component.spec.ts b/hello-world/angular/src/app/hello-world/hello-world.component.spec.ts similarity index 76% rename from 1.hello-world/3.read-video-angular/src/app/hello-world/hello-world.component.spec.ts rename to hello-world/angular/src/app/hello-world/hello-world.component.spec.ts index 4128c3b2..05bf2d74 100644 --- a/1.hello-world/3.read-video-angular/src/app/hello-world/hello-world.component.spec.ts +++ b/hello-world/angular/src/app/hello-world/hello-world.component.spec.ts @@ -6,12 +6,10 @@ describe('HelloWorldComponent', () => { let component: HelloWorldComponent; let fixture: ComponentFixture; - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ HelloWorldComponent ] - }) - .compileComponents(); - + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [HelloWorldComponent] + }); fixture = TestBed.createComponent(HelloWorldComponent); component = fixture.componentInstance; fixture.detectChanges(); diff --git a/hello-world/angular/src/app/hello-world/hello-world.component.ts b/hello-world/angular/src/app/hello-world/hello-world.component.ts new file mode 100644 index 00000000..f4f2aa59 --- /dev/null +++ b/hello-world/angular/src/app/hello-world/hello-world.component.ts @@ -0,0 +1,21 @@ +import { Component } from '@angular/core'; +import '../../cvr'; // import side effects. The license, engineResourcePath, so on. + +@Component({ + selector: 'app-hello-world', + templateUrl: './hello-world.component.html', + styleUrls: ['./hello-world.component.css'] +}) +export class HelloWorldComponent { + bShowVideoCapture = true; + bShowImageCapture = false; + + showVideoCapture(): void { + this.bShowVideoCapture = true; + this.bShowImageCapture = false; + } + showImageCapture(): void { + this.bShowVideoCapture = false; + this.bShowImageCapture = true; + } +} diff --git a/1.hello-world/3.read-video-angular/src/app/img-decode/img-decode.component.css b/hello-world/angular/src/app/image-capture/image-capture.component.css similarity index 63% rename from 1.hello-world/3.read-video-angular/src/app/img-decode/img-decode.component.css rename to hello-world/angular/src/app/image-capture/image-capture.component.css index 5dc0293d..462c83a2 100644 --- a/1.hello-world/3.read-video-angular/src/app/img-decode/img-decode.component.css +++ b/hello-world/angular/src/app/image-capture/image-capture.component.css @@ -1,7 +1,7 @@ -.ImgDecode { +.div-image-capture { display: flex; justify-content: center; align-items: center; width: 100%; - border: 1px solid black + border: 1px solid black; } \ No newline at end of file diff --git a/hello-world/angular/src/app/image-capture/image-capture.component.html b/hello-world/angular/src/app/image-capture/image-capture.component.html new file mode 100644 index 00000000..4bd9368c --- /dev/null +++ b/hello-world/angular/src/app/image-capture/image-capture.component.html @@ -0,0 +1 @@ +
\ No newline at end of file diff --git a/hello-world/angular/src/app/image-capture/image-capture.component.spec.ts b/hello-world/angular/src/app/image-capture/image-capture.component.spec.ts new file mode 100644 index 00000000..4c58d74d --- /dev/null +++ b/hello-world/angular/src/app/image-capture/image-capture.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ImageCaptureComponent } from './image-capture.component'; + +describe('ImageCaptureComponent', () => { + let component: ImageCaptureComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [ImageCaptureComponent] + }); + fixture = TestBed.createComponent(ImageCaptureComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/hello-world/angular/src/app/image-capture/image-capture.component.ts b/hello-world/angular/src/app/image-capture/image-capture.component.ts new file mode 100644 index 00000000..b7ccafb4 --- /dev/null +++ b/hello-world/angular/src/app/image-capture/image-capture.component.ts @@ -0,0 +1,48 @@ +import { Component } from '@angular/core'; +import { BarcodeResultItem } from 'dynamsoft-barcode-reader'; +import { CaptureVisionRouter } from 'dynamsoft-capture-vision-router'; +import '../../cvr'; // import side effects. The license, engineResourcePath, so on. + +@Component({ + selector: 'app-image-capture', + templateUrl: './image-capture.component.html', + styleUrls: ['./image-capture.component.css'], +}) +export class ImageCaptureComponent { + pInit: Promise | null = null; + + decodeImg = async (e: any) => { + try { + const router = await this.pInit; + // Decode selected image with 'ReadBarcodes_SpeedFirst' template. + const result = await router!.capture( + e.target.files[0], + 'ReadBarcodes_SpeedFirst' + ); + let texts = ''; + for (let item of result.items) { + console.log((item as BarcodeResultItem).text); + texts += (item as BarcodeResultItem).text + '\n'; + } + if (texts != '') alert(texts); + if (!result.items.length) alert('No barcode found'); + } catch (ex: any) { + let errMsg = ex.message || ex; + console.error(errMsg); + alert(errMsg); + } + e.target.value = ''; + }; + + async ngOnInit(): Promise { + this.pInit = CaptureVisionRouter.createInstance(); + } + + async ngOnDestroy() { + if (this.pInit) { + const router = await this.pInit; + router.dispose(); + } + console.log('ImageCapture Component Unmount'); + } +} diff --git a/hello-world/angular/src/app/video-capture/video-capture.component.css b/hello-world/angular/src/app/video-capture/video-capture.component.css new file mode 100644 index 00000000..37aae8a5 --- /dev/null +++ b/hello-world/angular/src/app/video-capture/video-capture.component.css @@ -0,0 +1,10 @@ +.div-ui-container { + width: 100%; + height: 70vh; +} + +.div-results-container { + width: 100%; + height: 10vh; + overflow: auto; +} diff --git a/hello-world/angular/src/app/video-capture/video-capture.component.html b/hello-world/angular/src/app/video-capture/video-capture.component.html new file mode 100644 index 00000000..7e75ede4 --- /dev/null +++ b/hello-world/angular/src/app/video-capture/video-capture.component.html @@ -0,0 +1,4 @@ +
+Results: +
+
diff --git a/hello-world/angular/src/app/video-capture/video-capture.component.spec.ts b/hello-world/angular/src/app/video-capture/video-capture.component.spec.ts new file mode 100644 index 00000000..23808a8b --- /dev/null +++ b/hello-world/angular/src/app/video-capture/video-capture.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { VideoCaptureComponent } from './video-capture.component'; + +describe('VideoCaptureComponent', () => { + let component: VideoCaptureComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [VideoCaptureComponent] + }); + fixture = TestBed.createComponent(VideoCaptureComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/hello-world/angular/src/app/video-capture/video-capture.component.ts b/hello-world/angular/src/app/video-capture/video-capture.component.ts new file mode 100644 index 00000000..78068811 --- /dev/null +++ b/hello-world/angular/src/app/video-capture/video-capture.component.ts @@ -0,0 +1,111 @@ +import { Component, ElementRef, ViewChild } from '@angular/core'; +import { EnumCapturedResultItemType } from 'dynamsoft-core' +import { DecodedBarcodesResult } from 'dynamsoft-barcode-reader'; +import { + CameraEnhancer, + CameraView, +} from 'dynamsoft-camera-enhancer'; +import { + CapturedResultReceiver, + CaptureVisionRouter, +} from 'dynamsoft-capture-vision-router'; +import { MultiFrameResultCrossFilter } from 'dynamsoft-utility'; +import '../../cvr'; // import side effects. The license, engineResourcePath, so on. + +@Component({ + selector: 'app-video-capture', + templateUrl: './video-capture.component.html', + styleUrls: ['./video-capture.component.css'], +}) +export class VideoCaptureComponent { + pInit: Promise<{ + cameraView: CameraView; + cameraEnhancer: CameraEnhancer; + router: CaptureVisionRouter; + }> | null = null; + + @ViewChild('uiContainer') uiContainer: ElementRef | null = + null; + @ViewChild('resultsContainer') resultsContainer: ElementRef | null = + null; + + async init(): Promise<{ + cameraView: CameraView; + cameraEnhancer: CameraEnhancer; + router: CaptureVisionRouter; + }> { + try { + // Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control. + const cameraView = await CameraView.createInstance(); + const cameraEnhancer = await CameraEnhancer.createInstance(cameraView); + this.uiContainer!.nativeElement.append(cameraView.getUIElement()); // Get default UI and append it to DOM. + + // Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source. + const router = await CaptureVisionRouter.createInstance(); + router.setInput(cameraEnhancer); + + // Define a callback for results. + const resultReceiver = new CapturedResultReceiver(); + resultReceiver.onDecodedBarcodesReceived = (result: DecodedBarcodesResult) => { + if (!result.barcodeResultItems.length) return; + + this.resultsContainer!.nativeElement.textContent = ''; + console.log(result); + for (let item of result.barcodeResultItems) { + this.resultsContainer!.nativeElement.append( + `${item.formatString}: ${item.text}`, + document.createElement('br'), + document.createElement('hr'), + ); + } + }; + router.addResultReceiver(resultReceiver); + + // Filter out unchecked and duplicate results. + const filter = new MultiFrameResultCrossFilter(); + filter.enableResultCrossVerification( + EnumCapturedResultItemType.CRIT_BARCODE, + true + ); // Filter out unchecked barcodes. + // Filter out duplicate barcodes within 3 seconds. + filter.enableResultDeduplication( + EnumCapturedResultItemType.CRIT_BARCODE, + true + ); + filter.setDuplicateForgetTime( + EnumCapturedResultItemType.CRIT_BARCODE, + 3000 + ); + await router.addResultFilter(filter); + + // Open camera and start scanning single barcode. + await cameraEnhancer.open(); + await router.startCapturing('ReadSingleBarcode'); + return { + cameraView, + cameraEnhancer, + router, + }; + } catch (ex: any) { + let errMsg = ex.message || ex; + console.error(errMsg); + alert(errMsg); + throw ex; + } + } + + async ngOnInit(): Promise { + this.pInit = this.init(); + } + + async ngOnDestroy() { + if (this.pInit) { + const { cameraView, cameraEnhancer, router } = await this.pInit; + router.dispose(); + cameraEnhancer.dispose(); + cameraView.dispose(); + } + this.uiContainer!.nativeElement.innerText = ""; + console.log('VideoCapture Component Unmount'); + } +} diff --git a/1.hello-world/3.read-video-angular/src/assets/.gitkeep b/hello-world/angular/src/assets/.gitkeep similarity index 100% rename from 1.hello-world/3.read-video-angular/src/assets/.gitkeep rename to hello-world/angular/src/assets/.gitkeep diff --git a/hello-world/angular/src/cvr.ts b/hello-world/angular/src/cvr.ts new file mode 100644 index 00000000..ac5f3ee2 --- /dev/null +++ b/hello-world/angular/src/cvr.ts @@ -0,0 +1,31 @@ +import { CoreModule } from 'dynamsoft-core'; +import { LicenseManager } from 'dynamsoft-license'; +import 'dynamsoft-barcode-reader'; + +/** LICENSE ALERT - README + * To use the library, you need to first specify a license key using the API "initLicense()" as shown below. + */ + +LicenseManager.initLicense( + 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9' +); + +/** + * You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&product=dbr&package=js to get your own trial license good for 30 days. + * Note that if you downloaded this sample from Dynamsoft while logged in, the above license key may already be your own 30-day trial license. + * For more information, see https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=10.0.20&utm_source=github#specify-the-license or contact support@dynamsoft.com. + * LICENSE ALERT - THE END + */ + +CoreModule.engineResourcePaths = { + std: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.0.0/dist/", + dip: "https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.0.30/dist/", + core: "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.0.32/dist/", + license: "https://cdn.jsdelivr.net/npm/dynamsoft-license@3.0.20/dist/", + cvr: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.0.31/dist/", + dbr: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.0.20/dist/", + dce: "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.1/dist/" +}; + +// Preload "BarcodeReader" module for reading barcodes. It will save time on the initial decoding by skipping the module loading. +CoreModule.loadWasm(['DBR']); diff --git a/1.hello-world/3.read-video-angular/src/favicon.ico b/hello-world/angular/src/favicon.ico similarity index 100% rename from 1.hello-world/3.read-video-angular/src/favicon.ico rename to hello-world/angular/src/favicon.ico diff --git a/1.hello-world/3.read-video-angular/src/index.html b/hello-world/angular/src/index.html similarity index 54% rename from 1.hello-world/3.read-video-angular/src/index.html rename to hello-world/angular/src/index.html index 59d59a62..c30ba8fb 100644 --- a/1.hello-world/3.read-video-angular/src/index.html +++ b/hello-world/angular/src/index.html @@ -2,12 +2,13 @@ - Hello-world for Angular - Dynamsoft Barcode Reader Sample + Hello World for Angular - Dynamsoft Barcode Reader Sample + - - - + + + diff --git a/1.hello-world/3.read-video-angular/src/main.ts b/hello-world/angular/src/main.ts similarity index 100% rename from 1.hello-world/3.read-video-angular/src/main.ts rename to hello-world/angular/src/main.ts diff --git a/1.hello-world/3.read-video-angular/src/styles.css b/hello-world/angular/src/styles.css similarity index 100% rename from 1.hello-world/3.read-video-angular/src/styles.css rename to hello-world/angular/src/styles.css diff --git a/1.hello-world/3.read-video-angular/tsconfig.app.json b/hello-world/angular/tsconfig.app.json similarity index 100% rename from 1.hello-world/3.read-video-angular/tsconfig.app.json rename to hello-world/angular/tsconfig.app.json diff --git a/1.hello-world/3.read-video-angular/tsconfig.json b/hello-world/angular/tsconfig.json similarity index 100% rename from 1.hello-world/3.read-video-angular/tsconfig.json rename to hello-world/angular/tsconfig.json diff --git a/1.hello-world/3.read-video-angular/tsconfig.spec.json b/hello-world/angular/tsconfig.spec.json similarity index 100% rename from 1.hello-world/3.read-video-angular/tsconfig.spec.json rename to hello-world/angular/tsconfig.spec.json diff --git a/hello-world/electron/README.md b/hello-world/electron/README.md new file mode 100644 index 00000000..54b02e5d --- /dev/null +++ b/hello-world/electron/README.md @@ -0,0 +1,229 @@ +# Hello World Sample for Electron + +[Electron](https://www.electronjs.org/) is a framework for creating native applications with web technologies. Follow this guide to learn how to implement Dynamsoft Barcode Reader JavaScript SDK (hereafter called "the library") into an Electron application. + +## Official Sample + +* Hello World in Electron~ - Source Code + +## Preparation + +Make sure you have [node](https://nodejs.org/) installed. `node 16.20.1` and `electron 26.4.1` are used in this article. + +## Initialize project + +```cmd +mkdir my-app && cd my-app +npm init +``` + +`npm init` will prompt you to configure some fields in your `package.json`. Note that the `entry point` should be `main.js` (it will be created later). + +## install necessary libraries + +```cmd +npm install electron --save-dev +npm install dynamsoft-capture-vision-std +npm install dynamsoft-image-processing +npm install dynamsoft-core +npm install dynamsoft-license +npm install dynamsoft-utility +npm install dynamsoft-barcode-reader +npm install dynamsoft-capture-vision-router +npm install dynamsoft-camera-enhancer +``` + +## Start to implement + +### Create a main.js file + +As defined in the `package.json` file, `main.js` is the entry point of the application, we define it like this: + +```javascript +const { app, BrowserWindow } = require("electron"); + +function createWindow() { + const win = new BrowserWindow({ + width: 800, + height: 600, + webPreferences: { + nativeWindowOpen: true, + }, + }); + + win.loadFile("index.html"); +} + +app.whenReady().then(() => { + createWindow(); + + app.on("activate", () => { + if (BrowserWindow.getAllWindows().length === 0) { + createWindow(); + } + }); +}); + +app.on("window-all-closed", () => { + if (process.platform !== "darwin") { + app.quit(); + } +}); +``` + +Two modules are imported in this file: + +* `app`: controls the application's event lifecycle. +* `BrowserWindow`: creates and manages application windows. + +The code basically opens `index.html` in a window. For more information, check out [Electron Quick Start](https://www.electronjs.org/docs/latest/tutorial/quick-start). + +### Create an `index.html` file + +Create the page to be loaded in the created window. + +```html + + + + + + + Dynamsoft Barcode Reader Sample - Electron + + + + + + + + + +

Hello World for Electron

+
+ Results: +
+
+ + + +``` + +### Create an `action.js` file + +`index.html` will loads `action.js`, which makes use of libraries to read barcodes from a video input: + +```javascript +/** LICENSE ALERT - README + * To use the library, you need to first specify a license key using the API "initLicense()" as shown below. + */ + +Dynamsoft.License.LicenseManager.initLicense( + "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9" +); + +/** + * You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&product=dbr&package=js to get your own trial license good for 30 days. + * Note that if you downloaded this sample from Dynamsoft while logged in, the above license key may already be your own 30-day trial license. + * For more information, see https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=10.0.20&utm_source=github#specify-the-license or contact support@dynamsoft.com. + * LICENSE ALERT - THE END + */ + +Dynamsoft.Core.CoreModule.engineResourcePaths = { + std: "./node_modules/dynamsoft-capture-vision-std/dist/", + dip: "./node_modules/dynamsoft-image-processing/dist/", + core: "./node_modules/dynamsoft-core/dist/", + license: "./node_modules/dynamsoft-license/dist/", + cvr: "./node_modules/dynamsoft-capture-vision-router/dist/", + dbr: "./node_modules/dynamsoft-barcode-reader/dist/", + dce: "./node_modules/dynamsoft-camera-enhancer/dist/" +}; +(async function () { + try { + // Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control. + const cameraView = await Dynamsoft.DCE.CameraView.createInstance(); + const cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance( + cameraView + ); + document + .querySelector("#div-ui-container") + .append(cameraView.getUIElement()); // Get default UI and append it to DOM. + + // Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source. + const router = await Dynamsoft.CVR.CaptureVisionRouter.createInstance(); + router.setInput(cameraEnhancer); + + // Define a callback for results. + const resultReceiver = new Dynamsoft.CVR.CapturedResultReceiver(); + resultReceiver.onDecodedBarcodesReceived = (result) => { + if (!result.barcodeResultItems.length) return; + + const resultsContainer = document.querySelector("#div-results-container"); + resultsContainer.textContent = ''; + console.log(result); + for (let item of result.barcodeResultItems) { + resultsContainer.append( + `${item.formatString}: ${item.text}`, + document.createElement('br'), + document.createElement('hr'), + ); + } + }; + router.addResultReceiver(resultReceiver); + + // Filter out unchecked and duplicate results. + const filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter(); + filter.enableResultCrossVerification( + Dynamsoft.Core.EnumCapturedResultItemType.CRIT_BARCODE, + true + ); // Filter out unchecked barcodes. + // Filter out duplicate barcodes within 3 seconds. + filter.enableResultDeduplication( + Dynamsoft.Core.EnumCapturedResultItemType.CRIT_BARCODE, + true + ); + filter.setDuplicateForgetTime( + Dynamsoft.Core.EnumCapturedResultItemType.CRIT_BARCODE, + 3000 + ); + await router.addResultFilter(filter); + + // Open camera and start scanning single barcode. + await cameraEnhancer.open(); + await router.startCapturing("ReadSingleBarcode"); + } catch (ex) { + let errMsg = ex.message || ex; + console.error(errMsg); + alert(errMsg); + } +})(); +``` + +### Create an `style.css` file + +`index.html` will loads `style.css`, which defines the styles for the UI + +```css +#div-ui-container { + width: 100%; + height: 80vh; +} + +#div-results-container { + width: 100%; + height: 10vh; + overflow: auto; +} +``` + +## Run the application + +Run the application with the following command and see how it goes. + +```cmd +npm start +``` + +## Support + +If you have any questions, feel free to [contact Dynamsoft support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme). diff --git a/hello-world/electron/action.js b/hello-world/electron/action.js new file mode 100644 index 00000000..f62a7579 --- /dev/null +++ b/hello-world/electron/action.js @@ -0,0 +1,83 @@ +/** LICENSE ALERT - README + * To use the library, you need to first specify a license key using the API "initLicense()" as shown below. + */ + +Dynamsoft.License.LicenseManager.initLicense( + "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9" +); + +/** + * You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&product=dbr&package=js to get your own trial license good for 30 days. + * Note that if you downloaded this sample from Dynamsoft while logged in, the above license key may already be your own 30-day trial license. + * For more information, see https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=10.0.20&utm_source=github#specify-the-license or contact support@dynamsoft.com. + * LICENSE ALERT - THE END + */ + +Dynamsoft.Core.CoreModule.engineResourcePaths = { + std: "./node_modules/dynamsoft-capture-vision-std/dist/", + dip: "./node_modules/dynamsoft-image-processing/dist/", + core: "./node_modules/dynamsoft-core/dist/", + license: "./node_modules/dynamsoft-license/dist/", + cvr: "./node_modules/dynamsoft-capture-vision-router/dist/", + dbr: "./node_modules/dynamsoft-barcode-reader/dist/", + dce: "./node_modules/dynamsoft-camera-enhancer/dist/", +}; +(async function () { + try { + // Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control. + const cameraView = await Dynamsoft.DCE.CameraView.createInstance(); + const cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance( + cameraView + ); + document + .querySelector("#div-ui-container") + .append(cameraView.getUIElement()); // Get default UI and append it to DOM. + + // Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source. + const router = await Dynamsoft.CVR.CaptureVisionRouter.createInstance(); + router.setInput(cameraEnhancer); + + // Define a callback for results. + const resultReceiver = new Dynamsoft.CVR.CapturedResultReceiver(); + resultReceiver.onDecodedBarcodesReceived = (result) => { + if (!result.barcodeResultItems.length) return; + + const resultsContainer = document.querySelector("#div-results-container"); + resultsContainer.textContent = ''; + console.log(result); + for (let item of result.barcodeResultItems) { + resultsContainer.append( + `${item.formatString}: ${item.text}`, + document.createElement('br'), + document.createElement('hr'), + ); + } + }; + router.addResultReceiver(resultReceiver); + + // Filter out unchecked and duplicate results. + const filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter(); + filter.enableResultCrossVerification( + Dynamsoft.Core.EnumCapturedResultItemType.CRIT_BARCODE, + true + ); // Filter out unchecked barcodes. + // Filter out duplicate barcodes within 3 seconds. + filter.enableResultDeduplication( + Dynamsoft.Core.EnumCapturedResultItemType.CRIT_BARCODE, + true + ); + filter.setDuplicateForgetTime( + Dynamsoft.Core.EnumCapturedResultItemType.CRIT_BARCODE, + 3000 + ); + await router.addResultFilter(filter); + + // Open camera and start scanning single barcode. + await cameraEnhancer.open(); + await router.startCapturing("ReadSingleBarcode"); + } catch (ex) { + let errMsg = ex.message || ex; + console.error(errMsg); + alert(errMsg); + } +})(); diff --git a/hello-world/electron/index.html b/hello-world/electron/index.html new file mode 100644 index 00000000..6556bb0b --- /dev/null +++ b/hello-world/electron/index.html @@ -0,0 +1,24 @@ + + + + + + + Dynamsoft Barcode Reader Sample - Electron + + + + + + + + + +

Hello World for Electron

+
+ Results: +
+
+ + + diff --git a/hello-world/electron/main.js b/hello-world/electron/main.js new file mode 100644 index 00000000..452d42f9 --- /dev/null +++ b/hello-world/electron/main.js @@ -0,0 +1,29 @@ +const { app, BrowserWindow } = require("electron"); + +function createWindow() { + const win = new BrowserWindow({ + width: 800, + height: 600, + webPreferences: { + nativeWindowOpen: true, + }, + }); + + win.loadFile("index.html"); +} + +app.whenReady().then(() => { + createWindow(); + + app.on("activate", () => { + if (BrowserWindow.getAllWindows().length === 0) { + createWindow(); + } + }); +}); + +app.on("window-all-closed", () => { + if (process.platform !== "darwin") { + app.quit(); + } +}); diff --git a/hello-world/electron/package.json b/hello-world/electron/package.json new file mode 100644 index 00000000..9444cc69 --- /dev/null +++ b/hello-world/electron/package.json @@ -0,0 +1,33 @@ +{ + "name": "hello-world", + "version": "1.0.0", + "description": "How to read barcodes from a video input in an Electron App", + "main": "main.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1", + "start": "electron ." + }, + "repository": { + "type": "git", + "url": "git+https://github.com/Dynamsoft/barcode-reader-javascript-samples.git" + }, + "author": "Dynamsoft", + "license": "ISC", + "bugs": { + "url": "https://github.com/Dynamsoft/barcode-reader-javascript-samples/issues" + }, + "homepage": "https://github.com/Dynamsoft/barcode-reader-javascript-samples#readme", + "devDependencies": { + "electron": "^26.4.1" + }, + "dependencies": { + "dynamsoft-barcode-reader": "10.0.20", + "dynamsoft-camera-enhancer": "4.0.1", + "dynamsoft-capture-vision-router": "2.0.31", + "dynamsoft-capture-vision-std": "1.0.0", + "dynamsoft-core": "3.0.32", + "dynamsoft-image-processing": "2.0.30", + "dynamsoft-license": "3.0.20", + "dynamsoft-utility": "1.0.21" + } +} diff --git a/hello-world/electron/style.css b/hello-world/electron/style.css new file mode 100644 index 00000000..864b4669 --- /dev/null +++ b/hello-world/electron/style.css @@ -0,0 +1,10 @@ +#div-ui-container { + width: 100%; + height: 80vh; +} + +#div-results-container { + width: 100%; + height: 10vh; + overflow: auto; +} diff --git a/hello-world/es6.html b/hello-world/es6.html new file mode 100644 index 00000000..775476df --- /dev/null +++ b/hello-world/es6.html @@ -0,0 +1,144 @@ + + + + + + + + + + Dynamsoft Barcode Reader Sample - Hello World for ES6 (Decode via Camera) + + + + +

Hello World for ES6 (Decode via Camera)

+
+ Results: +
+
+ + + + + diff --git a/hello-world/hello-world.html b/hello-world/hello-world.html new file mode 100644 index 00000000..5744765c --- /dev/null +++ b/hello-world/hello-world.html @@ -0,0 +1,116 @@ + + + + + + + + + + Dynamsoft Barcode Reader Sample - Hello World (Decode via Camera) + + + + + + + + + + +

Hello World (Decode via Camera)

+
+ Results: +
+
+ + + + diff --git a/1.hello-world/7.read-video-nextjs/.gitignore b/hello-world/next/.gitignore similarity index 95% rename from 1.hello-world/7.read-video-nextjs/.gitignore rename to hello-world/next/.gitignore index c87c9b39..8f322f0d 100644 --- a/1.hello-world/7.read-video-nextjs/.gitignore +++ b/hello-world/next/.gitignore @@ -23,7 +23,6 @@ npm-debug.log* yarn-debug.log* yarn-error.log* -.pnpm-debug.log* # local env files .env*.local diff --git a/hello-world/next/README.md b/hello-world/next/README.md new file mode 100644 index 00000000..512072fb --- /dev/null +++ b/hello-world/next/README.md @@ -0,0 +1,484 @@ +# Hello World Sample for Next.js + +[Next.js](https://nextjs.org/) is an open-source development framework built on top of Node.js enabling [React](https://reactjs.org/) based web applications functionalities such as server-side rendering and generating static websites. Follow this guide to learn how to implement Dynamsoft Barcode Reader JavaScript SDK (hereafter called "the library") into a Next.js application. Note that in this sample `TypeScript` is used. + +## Official Sample + +* Hello World in Next.js - Source Code + +## Preparation + +Make sure you have [node](https://nodejs.org/) installed. `node 16.20.1` and `next 13.5.6` are used in the example below. + +## Create the sample project + +### Create a Bootstrapped Raw Next.js Application + +```cmd +npx create-next-app@latest --typescript --no-tailwind +``` + +### **CD** to the root directory of the application and install necessary dependencies + +```cmd +npm install dynamsoft-core +npm install dynamsoft-license +npm install dynamsoft-utility +npm install dynamsoft-barcode-reader +npm install dynamsoft-capture-vision-router +npm install dynamsoft-camera-enhancer +``` + +## Start to implement + +### Add file "cvr.ts" under "/src/" to configure libraries + +```typescript +import { CoreModule } from 'dynamsoft-core'; +import { LicenseManager } from 'dynamsoft-license'; +import 'dynamsoft-barcode-reader'; + +/** LICENSE ALERT - README + * To use the library, you need to first specify a license key using the API "initLicense()" as shown below. + */ + +LicenseManager.initLicense( + 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9' +); + +/** + * You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&product=dbr&package=js to get your own trial license good for 30 days. + * Note that if you downloaded this sample from Dynamsoft while logged in, the above license key may already be your own 30-day trial license. + * For more information, see https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=10.0.20&utm_source=github#specify-the-license or contact support@dynamsoft.com. + * LICENSE ALERT - THE END + */ + +CoreModule.engineResourcePaths = { + std: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.0.0/dist/", + dip: "https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.0.30/dist/", + core: "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.0.32/dist/", + license: "https://cdn.jsdelivr.net/npm/dynamsoft-license@3.0.20/dist/", + cvr: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.0.31/dist/", + dbr: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.0.20/dist/", + dce: "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.1/dist/" +}; + +// Preload "BarcodeReader" module for reading barcodes. It will save time on the initial decoding by skipping the module loading. +CoreModule.loadWasm(['DBR']); +``` + +> Note: +> +> * `initLicense()` specify a license key to use the library. You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=sample&product=dbr&package=js to get your own trial license good for 30 days. +> * `engineResourcePaths` tells the library where to get the necessary resources at runtime. + +### Build directory structure + +* Create a directory "components", and then create another three directories "HelloWorld", "VideoCapture" and "ImageCapture" under "/src/components/". + +### Create and edit the `VideoCapture` component + +* Create `VideoCapture.tsx` and `VideoCapture.css` under "/components/VideoCapture/". The `VideoCapture` component helps decode barcodes via camera. + +* In `VideoCapture.tsx`, add code for initializing and destroying some instances. + +```tsx +"use client" + +import React, { useEffect, useRef } from "react"; +import { EnumCapturedResultItemType } from "dynamsoft-core"; +import { DecodedBarcodesResult } from "dynamsoft-barcode-reader"; +import { + CameraEnhancer, + CameraView, +} from "dynamsoft-camera-enhancer"; +import { + CapturedResultReceiver, + CaptureVisionRouter, +} from "dynamsoft-capture-vision-router"; +import { MultiFrameResultCrossFilter } from "dynamsoft-utility"; +import "./VideoCapture.css"; + +function VideoCapture() { + const uiContainer = useRef(null); + const resultsContainer = useRef(null); + + const pInit = useRef( + null as Promise<{ + cameraView: CameraView; + cameraEnhancer: CameraEnhancer; + router: CaptureVisionRouter; + }> | null + ); + const pDestroy = useRef(null as Promise | null); + + const init = async (): Promise<{ + cameraView: CameraView; + cameraEnhancer: CameraEnhancer; + router: CaptureVisionRouter; + }> => { + try { + // Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control. + const cameraView = await CameraView.createInstance(); + const cameraEnhancer = await CameraEnhancer.createInstance(cameraView); + uiContainer.current!.innerText = ""; + uiContainer.current!.append(cameraView.getUIElement()); // Get default UI and append it to DOM. + + // Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source. + const router = await CaptureVisionRouter.createInstance(); + router.setInput(cameraEnhancer); + + // Define a callback for results. + const resultReceiver = new CapturedResultReceiver(); + resultReceiver.onDecodedBarcodesReceived = ( + result: DecodedBarcodesResult + ) => { + if (!result.barcodeResultItems.length) return; + + resultsContainer.current!.textContent = ''; + console.log(result); + for (let item of result.barcodeResultItems) { + resultsContainer.current!.append( + `${item.formatString}: ${item.text}`, + document.createElement('br'), + document.createElement('hr'), + ); + } + }; + router.addResultReceiver(resultReceiver); + + // Filter out unchecked and duplicate results. + const filter = new MultiFrameResultCrossFilter(); + filter.enableResultCrossVerification( + EnumCapturedResultItemType.CRIT_BARCODE, + true + ); // Filter out unchecked barcodes. + // Filter out duplicate barcodes within 3 seconds. + filter.enableResultDeduplication( + EnumCapturedResultItemType.CRIT_BARCODE, + true + ); + filter.setDuplicateForgetTime( + EnumCapturedResultItemType.CRIT_BARCODE, + 3000 + ); + await router.addResultFilter(filter); + + // Open camera and start scanning single barcode. + await cameraEnhancer.open(); + await router.startCapturing("ReadSingleBarcode"); + return { + cameraView, + cameraEnhancer, + router, + }; + } catch (ex: any) { + let errMsg = ex.message || ex; + console.error(errMsg); + alert(errMsg); + throw ex; + } + }; + + const destroy = async (): Promise => { + if (pInit.current) { + const { cameraView, cameraEnhancer, router } = await pInit.current; + router.dispose(); + cameraEnhancer.dispose(); + cameraView.dispose(); + } + }; + + useEffect(() => { + (async () => { + // In 'development', React runs setup and cleanup one extra time before the actual setup in Strict Mode. + if (pDestroy.current) { + await pDestroy.current; + pInit.current = init(); + } else { + pInit.current = init(); + } + })(); + + return () => { + (async () => { + await (pDestroy.current = destroy()); + console.log("VideoCapture Component Unmount"); + })(); + }; + }, []); + + return ( +
+
+ Results: +
+
+
+ ); +} + +export default VideoCapture; +``` + +> Note: +> +> * The component should never update (check the code for `shouldComponentUpdate()`) so that events bound to the UI stay valid. + +* Define the style of the element in `VideoCapture.css` + +```css +.div-ui-container { + width: 100%; + height: 70vh; +} + +.div-results-container { + width: 100%; + height: 10vh; + overflow: auto; +} +``` + +### Create and edit the `ImageCapture` component + +* Create `ImageCapture.tsx` and `ImageCapture.css` under "/components/ImageCapture/". The `ImageCapture` component helps decode barcodes in an image. + +* In `ImageCapture.tsx`, add code for initializing and destroying the `CaptureVisionRouter` instance. + +```tsx +"use client" + +import React, { useRef, useEffect } from "react"; +import { BarcodeResultItem } from "dynamsoft-barcode-reader"; +import { CaptureVisionRouter } from "dynamsoft-capture-vision-router"; +import "../../cvr"; // import side effects. The license, engineResourcePath, so on. +import "./ImageCapture.css"; + +function ImageCapture() { + const pInit = useRef(null as null | Promise); + const pDestroy = useRef(null as null | Promise); + + const init = async (): Promise => { + const router = await CaptureVisionRouter.createInstance(); + return router; + }; + + const destroy = async (): Promise => { + if (pInit.current) { + const router = (await pInit.current)!; + router.dispose(); + } + }; + + const decodeImg = async (e: React.ChangeEvent) => { + try { + const router = (await pInit.current)!; + // Decode selected image with 'ReadBarcodes_SpeedFirst' template. + const result = await router.capture( + e.target.files![0], + "ReadBarcodes_SpeedFirst" + ); + let texts = ""; + for (let item of result.items) { + console.log((item as BarcodeResultItem).text); + texts += (item as BarcodeResultItem).text + "\n"; + } + if (texts !== "") alert(texts); + if (!result.items.length) alert("No barcode found"); + } catch (ex: any) { + let errMsg = ex.message || ex; + console.error(errMsg); + alert(errMsg); + } + e.target.value = ""; + }; + + useEffect(() => { + (async () => { + // In 'development', React runs setup and cleanup one extra time before the actual setup in Strict Mode. + if (pDestroy) { + await pDestroy; + pInit.current = init(); + } else { + pInit.current = init(); + } + })(); + + return () => { + (async () => { + await (pDestroy.current = destroy()); + console.log("ImageCapture Component Unmount"); + })(); + }; + }, []); + + return ( +
+ +
+ ); +} + +export default ImageCapture; +``` + +* Define the style of the element in `ImageCapture.css` + +```css +.div-image-capture { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + border: 1px solid black; +} +``` + +### Create and edit the `HelloWorld` component + +* Create `HelloWorld.tsx` and `HelloWorld.css` under "/src/components/HelloWorld/". The `HelloWorld` component offers buttons to switch components between `VideoCapture` and `ImageCapture`; + +* Add following code to `HelloWorld.tsx`. + +```tsx +"use client" + +import React, { useState } from "react"; +import "../../cvr"; // import side effects. The license, engineResourcePath, so on. +import VideoCapture from "../VideoCapture/VideoCapture"; +import ImageCapture from "../ImageCapture/ImageCapture"; +import "./HelloWorld.css"; + +function HelloWorld() { + let [bShowVideoCapture, setBShowVideoCapture] = useState(true); + let [bShowImageCapture, setBShowImageCapture] = useState(false); + + const showVideoCapture = () => { + setBShowVideoCapture(true); + setBShowImageCapture(false); + }; + + const showImageCapture = () => { + setBShowVideoCapture(false); + setBShowImageCapture(true); + }; + + return ( +
+

Hello World for Next

+
+ + +
+
+ {bShowVideoCapture ? : ""} + {bShowImageCapture ? : ""} +
+
+ ); +} + +export default HelloWorld; +``` + +* Define the style of the element in `HelloWorld.css` + +```css +.div-hello-world { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + color: #455A64; +} + +h1 { + font-size: 1.5em; +} + +button { + font-size: 1.5rem; + margin: 1.5vh 0; + border: 1px solid black; + background-color: white; + color: black; +} + +.container { + margin: 2vmin auto; + font-size: medium; + width: 80vw; +} +``` + +### Add the `HelloWorld` component to /app/page.tsx + +In `page.tsx`, import the `next/dynamic` to dynamically load `HelloWorld` component on the client side and disable server-rendering. + +```jsx +import dynamic from "next/dynamic"; + +// disable server-rendering for 'HelloWorld' component. +const DynamicHeader = dynamic( + () => import("../components/HelloWorld/HelloWorld"), + { + ssr: false, + } +); + +export default function Home() { + return ; +} +``` + +* Try running the project. + +```cmd +npm run dev +``` + +If you have followed all the steps correctly, you should now have a functioning page that allows you to scan barcodes from a webcam or a built-in camera. Additionally, if you want to decode a local image, you can click the `Decode Image` button and select the image you want to decode. Any barcodes that are detected will be displayed in a dialog. + +## Project Setup + +```sh +npm install +``` + +### Compile and Hot-Reload for Development + +```sh +npm run dev +``` + +### Type-Check, Compile and Minify for Production + +```sh +npm run build +``` + +## Support + +If you have any questions, feel free to [contact Dynamsoft support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme). \ No newline at end of file diff --git a/1.hello-world/7.read-video-nextjs/public/favicon.ico b/hello-world/next/app/favicon.ico similarity index 100% rename from 1.hello-world/7.read-video-nextjs/public/favicon.ico rename to hello-world/next/app/favicon.ico diff --git a/1.hello-world/7.read-video-nextjs/styles/globals.css b/hello-world/next/app/globals.css similarity index 99% rename from 1.hello-world/7.read-video-nextjs/styles/globals.css rename to hello-world/next/app/globals.css index 515036bf..d4f491e1 100644 --- a/1.hello-world/7.read-video-nextjs/styles/globals.css +++ b/hello-world/next/app/globals.css @@ -1,4 +1,4 @@ -/* :root { +:root { --max-width: 1100px; --border-radius: 12px; --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', @@ -104,4 +104,4 @@ a { html { color-scheme: dark; } -} */ +} diff --git a/hello-world/next/app/layout.tsx b/hello-world/next/app/layout.tsx new file mode 100644 index 00000000..f2f895ed --- /dev/null +++ b/hello-world/next/app/layout.tsx @@ -0,0 +1,23 @@ +import type { Metadata } from 'next' +import { Inter } from 'next/font/google' +// import './globals.css' + +const inter = Inter({ subsets: ['latin'] }) + +export const metadata: Metadata = { + title: 'Hello World for Next - Dynamsoft Barcode Reader Sample', + description: 'Dynamsoft Barcode Reader in a Next Application, helps read barcodes from camera or images.', + keywords: 'barcodes, camera, images, Next' +} + +export default function RootLayout({ + children, +}: { + children: React.ReactNode +}) { + return ( + + {children} + + ) +} diff --git a/hello-world/next/app/page.tsx b/hello-world/next/app/page.tsx new file mode 100644 index 00000000..a090ec45 --- /dev/null +++ b/hello-world/next/app/page.tsx @@ -0,0 +1,13 @@ +import dynamic from "next/dynamic"; + +// disable server-rendering for 'HelloWorld' component. +const DynamicHeader = dynamic( + () => import("../components/HelloWorld/HelloWorld"), + { + ssr: false, + } +); + +export default function Home() { + return ; +} diff --git a/1.hello-world/4.read-video-react/src/components/HelloWorld/HelloWorld.css b/hello-world/next/components/HelloWorld/HelloWorld.css similarity index 91% rename from 1.hello-world/4.read-video-react/src/components/HelloWorld/HelloWorld.css rename to hello-world/next/components/HelloWorld/HelloWorld.css index b3c0327a..afdfe7a2 100644 --- a/1.hello-world/4.read-video-react/src/components/HelloWorld/HelloWorld.css +++ b/hello-world/next/components/HelloWorld/HelloWorld.css @@ -1,4 +1,4 @@ -.helloWorld { +.div-hello-world { display: flex; flex-direction: column; align-items: center; @@ -22,7 +22,6 @@ button { .container { margin: 2vmin auto; - text-align: center; font-size: medium; width: 80vw; } \ No newline at end of file diff --git a/hello-world/next/components/HelloWorld/HelloWorld.tsx b/hello-world/next/components/HelloWorld/HelloWorld.tsx new file mode 100644 index 00000000..a26458d9 --- /dev/null +++ b/hello-world/next/components/HelloWorld/HelloWorld.tsx @@ -0,0 +1,53 @@ +"use client" + +import React, { useState } from "react"; +import "../../cvr"; // import side effects. The license, engineResourcePath, so on. +import VideoCapture from "../VideoCapture/VideoCapture"; +import ImageCapture from "../ImageCapture/ImageCapture"; +import "./HelloWorld.css"; + +function HelloWorld() { + let [bShowVideoCapture, setBShowVideoCapture] = useState(true); + let [bShowImageCapture, setBShowImageCapture] = useState(false); + + const showVideoCapture = () => { + setBShowVideoCapture(true); + setBShowImageCapture(false); + }; + + const showImageCapture = () => { + setBShowVideoCapture(false); + setBShowImageCapture(true); + }; + + return ( +
+

Hello World for Next

+
+ + +
+
+ {bShowVideoCapture ? : ""} + {bShowImageCapture ? : ""} +
+
+ ); +} + +export default HelloWorld; diff --git a/1.hello-world/13.read-video-react-hooks/src/components/ImgDecode/ImgDecode.css b/hello-world/next/components/ImageCapture/ImageCapture.css similarity index 51% rename from 1.hello-world/13.read-video-react-hooks/src/components/ImgDecode/ImgDecode.css rename to hello-world/next/components/ImageCapture/ImageCapture.css index 529c9e72..462c83a2 100644 --- a/1.hello-world/13.read-video-react-hooks/src/components/ImgDecode/ImgDecode.css +++ b/hello-world/next/components/ImageCapture/ImageCapture.css @@ -1,6 +1,7 @@ -.ImgDecode { +.div-image-capture { display: flex; justify-content: center; align-items: center; - border: 1px solid black + width: 100%; + border: 1px solid black; } \ No newline at end of file diff --git a/hello-world/next/components/ImageCapture/ImageCapture.tsx b/hello-world/next/components/ImageCapture/ImageCapture.tsx new file mode 100644 index 00000000..1deeba05 --- /dev/null +++ b/hello-world/next/components/ImageCapture/ImageCapture.tsx @@ -0,0 +1,78 @@ +"use client" + +import React, { useRef, useEffect } from "react"; +import { BarcodeResultItem } from "dynamsoft-barcode-reader"; +import { CaptureVisionRouter } from "dynamsoft-capture-vision-router"; +import "../../cvr"; // import side effects. The license, engineResourcePath, so on. +import "./ImageCapture.css"; + +function ImageCapture() { + const pInit = useRef(null as null | Promise); + const pDestroy = useRef(null as null | Promise); + + const init = async (): Promise => { + const router = await CaptureVisionRouter.createInstance(); + return router; + }; + + const destroy = async (): Promise => { + if (pInit.current) { + const router = (await pInit.current)!; + router.dispose(); + } + }; + + const decodeImg = async (e: React.ChangeEvent) => { + try { + const router = (await pInit.current)!; + // Decode selected image with 'ReadBarcodes_SpeedFirst' template. + const result = await router.capture( + e.target.files![0], + "ReadBarcodes_SpeedFirst" + ); + let texts = ""; + for (let item of result.items) { + console.log((item as BarcodeResultItem).text); + texts += (item as BarcodeResultItem).text + "\n"; + } + if (texts !== "") alert(texts); + if (!result.items.length) alert("No barcode found"); + } catch (ex: any) { + let errMsg = ex.message || ex; + console.error(errMsg); + alert(errMsg); + } + e.target.value = ""; + }; + + useEffect(() => { + (async () => { + // In 'development', React runs setup and cleanup one extra time before the actual setup in Strict Mode. + if (pDestroy) { + await pDestroy; + pInit.current = init(); + } else { + pInit.current = init(); + } + })(); + + return () => { + (async () => { + await (pDestroy.current = destroy()); + console.log("ImageCapture Component Unmount"); + })(); + }; + }, []); + + return ( +
+ +
+ ); +} + +export default ImageCapture; diff --git a/hello-world/next/components/VideoCapture/VideoCapture.css b/hello-world/next/components/VideoCapture/VideoCapture.css new file mode 100644 index 00000000..b9170e7b --- /dev/null +++ b/hello-world/next/components/VideoCapture/VideoCapture.css @@ -0,0 +1,10 @@ +.div-ui-container { + width: 100%; + height: 70vh; +} + +.div-results-container { + width: 100%; + height: 10vh; + overflow: auto; +} \ No newline at end of file diff --git a/hello-world/next/components/VideoCapture/VideoCapture.tsx b/hello-world/next/components/VideoCapture/VideoCapture.tsx new file mode 100644 index 00000000..4387d38f --- /dev/null +++ b/hello-world/next/components/VideoCapture/VideoCapture.tsx @@ -0,0 +1,137 @@ +"use client" + +import React, { useEffect, useRef } from "react"; +import { EnumCapturedResultItemType } from "dynamsoft-core"; +import { DecodedBarcodesResult } from "dynamsoft-barcode-reader"; +import { + CameraEnhancer, + CameraView, +} from "dynamsoft-camera-enhancer"; +import { + CapturedResultReceiver, + CaptureVisionRouter, +} from "dynamsoft-capture-vision-router"; +import { MultiFrameResultCrossFilter } from "dynamsoft-utility"; +import "../../cvr"; // import side effects. The license, engineResourcePath, so on. +import "./VideoCapture.css"; + +function VideoCapture() { + const uiContainer = useRef(null); + const resultsContainer = useRef(null); + + const pInit = useRef( + null as Promise<{ + cameraView: CameraView; + cameraEnhancer: CameraEnhancer; + router: CaptureVisionRouter; + }> | null + ); + const pDestroy = useRef(null as Promise | null); + + const init = async (): Promise<{ + cameraView: CameraView; + cameraEnhancer: CameraEnhancer; + router: CaptureVisionRouter; + }> => { + try { + // Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control. + const cameraView = await CameraView.createInstance(); + const cameraEnhancer = await CameraEnhancer.createInstance(cameraView); + uiContainer.current!.innerText = ""; + uiContainer.current!.append(cameraView.getUIElement()); // Get default UI and append it to DOM. + + // Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source. + const router = await CaptureVisionRouter.createInstance(); + router.setInput(cameraEnhancer); + + // Define a callback for results. + const resultReceiver = new CapturedResultReceiver(); + resultReceiver.onDecodedBarcodesReceived = ( + result: DecodedBarcodesResult + ) => { + if (!result.barcodeResultItems.length) return; + + resultsContainer.current!.textContent = ''; + console.log(result); + for (let item of result.barcodeResultItems) { + resultsContainer.current!.append( + `${item.formatString}: ${item.text}`, + document.createElement('br'), + document.createElement('hr'), + ); + } + }; + router.addResultReceiver(resultReceiver); + + // Filter out unchecked and duplicate results. + const filter = new MultiFrameResultCrossFilter(); + filter.enableResultCrossVerification( + EnumCapturedResultItemType.CRIT_BARCODE, + true + ); // Filter out unchecked barcodes. + // Filter out duplicate barcodes within 3 seconds. + filter.enableResultDeduplication( + EnumCapturedResultItemType.CRIT_BARCODE, + true + ); + filter.setDuplicateForgetTime( + EnumCapturedResultItemType.CRIT_BARCODE, + 3000 + ); + await router.addResultFilter(filter); + + // Open camera and start scanning single barcode. + await cameraEnhancer.open(); + await router.startCapturing("ReadSingleBarcode"); + return { + cameraView, + cameraEnhancer, + router, + }; + } catch (ex: any) { + let errMsg = ex.message || ex; + console.error(errMsg); + alert(errMsg); + throw ex; + } + }; + + const destroy = async (): Promise => { + if (pInit.current) { + const { cameraView, cameraEnhancer, router } = await pInit.current; + router.dispose(); + cameraEnhancer.dispose(); + cameraView.dispose(); + } + }; + + useEffect(() => { + (async () => { + // In 'development', React runs setup and cleanup one extra time before the actual setup in Strict Mode. + if (pDestroy.current) { + await pDestroy.current; + pInit.current = init(); + } else { + pInit.current = init(); + } + })(); + + return () => { + (async () => { + await (pDestroy.current = destroy()); + console.log("VideoCapture Component Unmount"); + })(); + }; + }, []); + + return ( +
+
+ Results: +
+
+
+ ); +} + +export default VideoCapture; diff --git a/hello-world/next/cvr.ts b/hello-world/next/cvr.ts new file mode 100644 index 00000000..4569f99a --- /dev/null +++ b/hello-world/next/cvr.ts @@ -0,0 +1,31 @@ +import { CoreModule } from 'dynamsoft-core'; +import { LicenseManager } from 'dynamsoft-license'; +import 'dynamsoft-barcode-reader'; + +/** LICENSE ALERT - README + * To use the library, you need to first specify a license key using the API "initLicense()" as shown below. + */ + +LicenseManager.initLicense( + 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9' +); + +/** + * You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&product=dbr&package=js to get your own trial license good for 30 days. + * Note that if you downloaded this sample from Dynamsoft while logged in, the above license key may already be your own 30-day trial license. + * For more information, see https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=10.0.20&utm_source=github#specify-the-license or contact support@dynamsoft.com. + * LICENSE ALERT - THE END + */ + +CoreModule.engineResourcePaths = { + std: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.0.0/dist/", + dip: "https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.0.30/dist/", + core: "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.0.32/dist/", + license: "https://cdn.jsdelivr.net/npm/dynamsoft-license@3.0.20/dist/", + cvr: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.0.31/dist/", + dbr: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.0.20/dist/", + dce: "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.1/dist/" +}; + +// Preload "BarcodeReader" module for reading barcodes. It will save time on the initial decoding by skipping the module loading. +CoreModule.loadWasm(['DBR']); \ No newline at end of file diff --git a/1.hello-world/7.read-video-nextjs/next.config.js b/hello-world/next/next.config.js similarity index 59% rename from 1.hello-world/7.read-video-nextjs/next.config.js rename to hello-world/next/next.config.js index a843cbee..767719fc 100644 --- a/1.hello-world/7.read-video-nextjs/next.config.js +++ b/hello-world/next/next.config.js @@ -1,6 +1,4 @@ /** @type {import('next').NextConfig} */ -const nextConfig = { - reactStrictMode: true, -} +const nextConfig = {} module.exports = nextConfig diff --git a/hello-world/next/package.json b/hello-world/next/package.json new file mode 100644 index 00000000..4feba8c8 --- /dev/null +++ b/hello-world/next/package.json @@ -0,0 +1,28 @@ +{ + "name": "hello-world", + "version": "0.1.0", + "private": true, + "scripts": { + "dev": "next dev", + "build": "next build", + "start": "next start", + "lint": "next lint" + }, + "dependencies": { + "dynamsoft-barcode-reader": "10.0.20", + "dynamsoft-camera-enhancer": "4.0.1", + "dynamsoft-capture-vision-router": "2.0.31", + "dynamsoft-core": "3.0.32", + "dynamsoft-license": "3.0.20", + "dynamsoft-utility": "1.0.21", + "next": "13.5.6", + "react": "^18", + "react-dom": "^18" + }, + "devDependencies": { + "@types/node": "^20", + "@types/react": "^18", + "@types/react-dom": "^18", + "typescript": "^5" + } +} diff --git a/hello-world/next/public/next.svg b/hello-world/next/public/next.svg new file mode 100644 index 00000000..5174b28c --- /dev/null +++ b/hello-world/next/public/next.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/1.hello-world/7.read-video-nextjs/public/vercel.svg b/hello-world/next/public/vercel.svg similarity index 100% rename from 1.hello-world/7.read-video-nextjs/public/vercel.svg rename to hello-world/next/public/vercel.svg diff --git a/1.hello-world/7.read-video-nextjs/tsconfig.json b/hello-world/next/tsconfig.json similarity index 70% rename from 1.hello-world/7.read-video-nextjs/tsconfig.json rename to hello-world/next/tsconfig.json index 8b8e5811..c7146963 100644 --- a/1.hello-world/7.read-video-nextjs/tsconfig.json +++ b/hello-world/next/tsconfig.json @@ -5,19 +5,23 @@ "allowJs": true, "skipLibCheck": true, "strict": true, - "forceConsistentCasingInFileNames": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", - "moduleResolution": "node", + "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "incremental": true, + "plugins": [ + { + "name": "next" + } + ], "paths": { "@/*": ["./*"] } }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], "exclude": ["node_modules"] } diff --git a/hello-world/nuxt/.gitignore b/hello-world/nuxt/.gitignore new file mode 100644 index 00000000..4a7f73a2 --- /dev/null +++ b/hello-world/nuxt/.gitignore @@ -0,0 +1,24 @@ +# Nuxt dev/build outputs +.output +.data +.nuxt +.nitro +.cache +dist + +# Node dependencies +node_modules + +# Logs +logs +*.log + +# Misc +.DS_Store +.fleet +.idea + +# Local env files +.env +.env.* +!.env.example diff --git a/hello-world/nuxt/README.md b/hello-world/nuxt/README.md new file mode 100644 index 00000000..ac811a80 --- /dev/null +++ b/hello-world/nuxt/README.md @@ -0,0 +1,399 @@ +# Hello World Sample for NuxtJS + +[Nuxt](https://nuxtjs.org/) is a higher-level framework that builds on top of [Vue](https://vuejs.org/). Check out the following guide on how to implement Dynamsoft Barcode Reader JavaScript SDK (hereafter called "the library") into a Nuxt application. Note that in this sample `TypeScript` is used. + +## Official Sample + +* Hello World in Nuxt - Source Code + +## Preparation + +Make sure you have [node](https://nodejs.org/) installed. `node 16.20.1` and `nuxt 3.2.3` are used in this article. + +## Create the sample project + +### Create a Bootstrapped Nuxt Application + +```cmd +npx nuxi@latest init my-app +``` + +You will be asked to configure quite a few things for the application during the creation. In our example, we chose the default one in every step. + +### **CD** to the root directory of the application and install the dependencies + +```cmd +cd my-app +npm install +npm install dynamsoft-core +npm install dynamsoft-license +npm install dynamsoft-utility +npm install dynamsoft-barcode-reader +npm install dynamsoft-capture-vision-router +npm install dynamsoft-camera-enhancer +``` + +## Start to implement + +### Add file "cvr.ts" at the root of the app to configure libraries + +```typescript +import { CoreModule } from 'dynamsoft-core'; +import { LicenseManager } from 'dynamsoft-license'; +import 'dynamsoft-barcode-reader'; + +/** LICENSE ALERT - README + * To use the library, you need to first specify a license key using the API "initLicense()" as shown below. + */ + +LicenseManager.initLicense( + 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9' +); + +/** + * You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&product=dbr&package=js to get your own trial license good for 30 days. + * Note that if you downloaded this sample from Dynamsoft while logged in, the above license key may already be your own 30-day trial license. + * For more information, see https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=10.0.20&utm_source=github#specify-the-license or contact support@dynamsoft.com. + * LICENSE ALERT - THE END + */ + +CoreModule.engineResourcePaths = { + std: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.0.0/dist/", + dip: "https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.0.30/dist/", + core: "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.0.32/dist/", + license: "https://cdn.jsdelivr.net/npm/dynamsoft-license@3.0.20/dist/", + cvr: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.0.31/dist/", + dbr: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.0.20/dist/", + dce: "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.1/dist/" +}; + +// Preload "BarcodeReader" module for reading barcodes. It will save time on the initial decoding by skipping the module loading. +CoreModule.loadWasm(['DBR']); +``` + +> Note: +> +> * `initLicense()` specify a license key to use the library. You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=sample&product=dbr&package=js to get your own trial license good for 30 days. +> * `engineResourcePaths` tells the library where to get the necessary resources at runtime. + +### Create a directory "components" and create the following files inside it to represent three components + +* VideoCapture.client.vue +* ImageCapture.client.vue +* HelloWorld.client.vue + +`.client` suffix means the component is rendered only client-side. + +### Edit the `VideoCapture` component + +* In `VideoCapture.client.vue`, add code for initializing and destroying some instances. The `VideoCapture` component helps decode barcodes via camera. + +```vue + + + + + +``` + +### Edit the `ImageCapture` component + +* In `ImageCapture.client.vue`, add code for initializing and destroying the `CaptureVisionRouter` instance. The `ImageCapture` helps decode barcodes in an image. + +```vue + + + + + + +``` + +### Add `VideoCapture` and `ImageCapture` components in `HelloWorld.client.vue` + +```vue + + + + + +``` + +### Add the `HelloWorld` component to `app.vue` + +Edit the file `app.vue` to be like this + +```vue + +``` + +* Try running the project. + +```cmd +npm run dev +``` + +If you have followed all the steps correctly, you should now have a functioning page that allows you to scan barcodes from a webcam or a built-in camera. Additionally, if you want to decode a local image, you can click the `Decode Image` button and select the image you want to decode. Any barcodes that are detected will be displayed in a dialog. + +## Project Setup + +```sh +npm install +``` + +### Compile and Hot-Reload for Development + +```sh +npm run dev +``` + +### Type-Check, Compile and Minify for Production + +```sh +npm run build +``` + +## Support + +If you have any questions, feel free to [contact Dynamsoft support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme). \ No newline at end of file diff --git a/1.hello-world/8.read-video-nuxtjs/app.vue b/hello-world/nuxt/app.vue similarity index 100% rename from 1.hello-world/8.read-video-nuxtjs/app.vue rename to hello-world/nuxt/app.vue diff --git a/hello-world/nuxt/components/HelloWorld.client.vue b/hello-world/nuxt/components/HelloWorld.client.vue new file mode 100644 index 00000000..639a18bf --- /dev/null +++ b/hello-world/nuxt/components/HelloWorld.client.vue @@ -0,0 +1,61 @@ + + + + + diff --git a/hello-world/nuxt/components/ImageCapture.client.vue b/hello-world/nuxt/components/ImageCapture.client.vue new file mode 100644 index 00000000..d343a623 --- /dev/null +++ b/hello-world/nuxt/components/ImageCapture.client.vue @@ -0,0 +1,62 @@ + + + + + diff --git a/hello-world/nuxt/components/VideoCapture.client.vue b/hello-world/nuxt/components/VideoCapture.client.vue new file mode 100644 index 00000000..cf55e512 --- /dev/null +++ b/hello-world/nuxt/components/VideoCapture.client.vue @@ -0,0 +1,130 @@ + + + + + diff --git a/hello-world/nuxt/cvr.ts b/hello-world/nuxt/cvr.ts new file mode 100644 index 00000000..4569f99a --- /dev/null +++ b/hello-world/nuxt/cvr.ts @@ -0,0 +1,31 @@ +import { CoreModule } from 'dynamsoft-core'; +import { LicenseManager } from 'dynamsoft-license'; +import 'dynamsoft-barcode-reader'; + +/** LICENSE ALERT - README + * To use the library, you need to first specify a license key using the API "initLicense()" as shown below. + */ + +LicenseManager.initLicense( + 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9' +); + +/** + * You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&product=dbr&package=js to get your own trial license good for 30 days. + * Note that if you downloaded this sample from Dynamsoft while logged in, the above license key may already be your own 30-day trial license. + * For more information, see https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=10.0.20&utm_source=github#specify-the-license or contact support@dynamsoft.com. + * LICENSE ALERT - THE END + */ + +CoreModule.engineResourcePaths = { + std: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.0.0/dist/", + dip: "https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.0.30/dist/", + core: "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.0.32/dist/", + license: "https://cdn.jsdelivr.net/npm/dynamsoft-license@3.0.20/dist/", + cvr: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.0.31/dist/", + dbr: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.0.20/dist/", + dce: "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.1/dist/" +}; + +// Preload "BarcodeReader" module for reading barcodes. It will save time on the initial decoding by skipping the module loading. +CoreModule.loadWasm(['DBR']); \ No newline at end of file diff --git a/1.hello-world/8.read-video-nuxtjs/nuxt.config.ts b/hello-world/nuxt/nuxt.config.ts similarity index 96% rename from 1.hello-world/8.read-video-nuxtjs/nuxt.config.ts rename to hello-world/nuxt/nuxt.config.ts index 5e7d9c6f..8d361178 100644 --- a/1.hello-world/8.read-video-nuxtjs/nuxt.config.ts +++ b/hello-world/nuxt/nuxt.config.ts @@ -1,4 +1,4 @@ // https://nuxt.com/docs/api/configuration/nuxt-config export default defineNuxtConfig({ - + }) diff --git a/hello-world/nuxt/package.json b/hello-world/nuxt/package.json new file mode 100644 index 00000000..d796ece6 --- /dev/null +++ b/hello-world/nuxt/package.json @@ -0,0 +1,23 @@ +{ + "name": "nuxt-app", + "private": true, + "type": "module", + "scripts": { + "build": "nuxt build", + "dev": "nuxt dev", + "generate": "nuxt generate", + "preview": "nuxt preview", + "postinstall": "nuxt prepare" + }, + "devDependencies": { + "nuxt": "3.2.3" + }, + "dependencies": { + "dynamsoft-barcode-reader": "10.0.20", + "dynamsoft-camera-enhancer": "4.0.1", + "dynamsoft-capture-vision-router": "2.0.31", + "dynamsoft-core": "3.0.32", + "dynamsoft-license": "3.0.20", + "dynamsoft-utility": "1.0.21" + } +} diff --git a/1.hello-world/8.read-video-nuxtjs/public/favicon.ico b/hello-world/nuxt/public/favicon.ico similarity index 100% rename from 1.hello-world/8.read-video-nuxtjs/public/favicon.ico rename to hello-world/nuxt/public/favicon.ico diff --git a/1.hello-world/8.read-video-nuxtjs/tsconfig.json b/hello-world/nuxt/tsconfig.json similarity index 100% rename from 1.hello-world/8.read-video-nuxtjs/tsconfig.json rename to hello-world/nuxt/tsconfig.json diff --git a/1.hello-world/10.read-video-pwa/README.md b/hello-world/pwa/README.md similarity index 51% rename from 1.hello-world/10.read-video-pwa/README.md rename to hello-world/pwa/README.md index 43dfffd1..f9e01714 100644 --- a/1.hello-world/10.read-video-pwa/README.md +++ b/hello-world/pwa/README.md @@ -1,11 +1,11 @@ -# JavaScript Hello World Sample - PWA +# Hello World Sample for PWA [PWA](https://web.dev/progressive-web-apps/) is short for Progressive Web Apps which stand for web applications that have been designed to behave like platform-specific (native) applications. Check out the following on how to implement Dynamsoft Barcode Reader JavaScript SDK (hereafter called "the library") into a PWA application. ## Official Sample -* Hello World in PWA - Demo -* Hello World in PWA - Source Code +* Hello World in PWA - Demo +* Hello World in PWA - Source Code ## Preparation @@ -20,41 +20,100 @@ First, create a file with the name "helloworld-pwa.html" and fill it with the fo - Dynamsoft Barcode Reader PWA Sample - Hello World (Decoding via Camera) + Hello World -

Hello World for PWA

- Loading... - - + + router.addResultReceiver(resultReceiver); + + // Filter out unchecked and duplicate results. + const filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter(); + filter.enableResultCrossVerification( + Dynamsoft.Core.EnumCapturedResultItemType.CRIT_BARCODE, + true + ); // Filter out unchecked barcodes. + // Filter out duplicate barcodes within 3 seconds. + filter.enableResultDeduplication( + Dynamsoft.Core.EnumCapturedResultItemType.CRIT_BARCODE, + true + ); + filter.setDuplicateForgetTime( + Dynamsoft.Core.EnumCapturedResultItemType.CRIT_BARCODE, + 3000 + ); + await router.addResultFilter(filter); + + // Open camera and start scanning single barcode. + await cameraEnhancer.open(); + await router.startCapturing("ReadSingleBarcode"); + } catch (ex) { + let errMsg = ex.message || ex; + console.error(errMsg); + alert(errMsg); + } + })(); + @@ -129,7 +188,7 @@ For more information, refer to [Making PWAs work offline with Service workers](h A web manifest file contains a list of information about a website in a JSON format. This information is used to present the web app correctly for installation on a device. -In our example, we first create a file "helloworld-pwa.webmanifest" with the following content: +In our example, we first create a file "helloworld-pwa.json" with the following content: ```json { @@ -161,7 +220,7 @@ In our example, we first create a file "helloworld-pwa.webmanifest" with the fol Then we include the file in the <head> block of the helloworld-pwa.html file: ```html - + ``` For compatibility on safari, we need add some `meta` in ``: @@ -184,23 +243,44 @@ For offline use, you need to cache more files. service-worker.js ```javascript -const dbrCdn = `https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.32/dist/`; -const dbrVersion = dbrCdn.match(/(?<=dynamsoft-javascript-barcode@).+(?=\/dist)/)[0]; +const coreResourcesDir = + "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.0.32/dist/", + utilityResourcesDir = + "https://cdn.jsdelivr.net/npm/dynamsoft-utility@1.0.21/dist/", + dbrResourcesDir = + "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.0.20/dist/", + cvrResourcesDir = + "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.0.31/dist/", + dceResourcesDir = + "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.1/dist/"; // Files to cache -const cacheName = 'helloworld-pwa'; +const cacheName = "helloworld-pwa"; const appShellFiles = [ - './helloworld-pwa.html', - './dynamsoft-192x192.png', - './dynamsoft-512x512.png', - './helloworld-pwa.json', - `${dbrCdn}dbr.js`, - `${dbrCdn}dbr-${dbrVersion}.full.wasm`, - `${dbrCdn}dbr-${dbrVersion}.full.wasm.js`, - `${dbrCdn}dbr-${dbrVersion}.browser.worker.js`, + "./helloworld-pwa.html", + "./dynamsoft-192x192.png", + "./dynamsoft-512x512.png", + "./helloworld-pwa.json", + `${coreResourcesDir}core.js`, + `${utilityResourcesDir}utility.js`, + `${dbrResourcesDir}dbr.js`, + `${dbrResourcesDir}dbr.wasm`, + `${dbrResourcesDir}DBR-PresetTemplates.json`, + `${cvrResourcesDir}cvr.js`, + `${cvrResourcesDir}cvr.wasm`, + `${cvrResourcesDir}cvr.wasm.js`, + `${cvrResourcesDir}cvr_wasm_glue.js`, + `${cvrResourcesDir}cvr.browser.worker.js`, + `${cvrResourcesDir}dls.license.dialog.html`, + `${cvrResourcesDir}dce.js`, + `${cvrResourcesDir}dce.ui.html`, ]; ``` ## Summary -In this article we took a look at how you can turn a simple barcode reading page into a PWA that is installable, re-engageable and capable of working offline. To learn more about Progressive web apps, you can click [here](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps). \ No newline at end of file +In this article we took a look at how you can turn a simple barcode reading page into a PWA that is installable, re-engageable and capable of working offline. To learn more about Progressive web apps, you can click [here](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps). + +## Support + +If you have any questions, feel free to [contact Dynamsoft support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme). \ No newline at end of file diff --git a/1.hello-world/10.read-video-pwa/dynamsoft-192x192.png b/hello-world/pwa/dynamsoft-192x192.png similarity index 100% rename from 1.hello-world/10.read-video-pwa/dynamsoft-192x192.png rename to hello-world/pwa/dynamsoft-192x192.png diff --git a/1.hello-world/10.read-video-pwa/dynamsoft-512x512.png b/hello-world/pwa/dynamsoft-512x512.png similarity index 100% rename from 1.hello-world/10.read-video-pwa/dynamsoft-512x512.png rename to hello-world/pwa/dynamsoft-512x512.png diff --git a/hello-world/pwa/helloworld-pwa.html b/hello-world/pwa/helloworld-pwa.html new file mode 100644 index 00000000..85d16036 --- /dev/null +++ b/hello-world/pwa/helloworld-pwa.html @@ -0,0 +1,137 @@ + + + + + + + + + Dynamsoft Barcode Reader PWA Sample - Hello World (Decode via Camera) + + + + + + + + + + + + + + + + + + + +

Hello World for PWA

+
+ Results: +
+
+ + + + + diff --git a/1.hello-world/10.read-video-pwa/helloworld-pwa.json b/hello-world/pwa/helloworld-pwa.json similarity index 100% rename from 1.hello-world/10.read-video-pwa/helloworld-pwa.json rename to hello-world/pwa/helloworld-pwa.json diff --git a/hello-world/pwa/service-worker.js b/hello-world/pwa/service-worker.js new file mode 100644 index 00000000..b53461a9 --- /dev/null +++ b/hello-world/pwa/service-worker.js @@ -0,0 +1,66 @@ +const resourcePaths = { + std: Dynamsoft.Core.engineResourcePaths.std.path || Dynamsoft.Core.engineResourcePaths.std, + dip: Dynamsoft.Core.engineResourcePaths.dip.path || Dynamsoft.Core.engineResourcePaths.dip, + core: Dynamsoft.Core.engineResourcePaths.core.path || Dynamsoft.Core.engineResourcePaths.core, + license: Dynamsoft.Core.engineResourcePaths.license.path || Dynamsoft.Core.engineResourcePaths.license, + utility: "https://cdn.jsdelivr.net/npm/dynamsoft-utility@1.0.21/dist/", + dbr: Dynamsoft.Core.engineResourcePaths.dbr.path || Dynamsoft.Core.engineResourcePaths.dbr, + cvr: Dynamsoft.Core.engineResourcePaths.cvr.path || Dynamsoft.Core.engineResourcePaths.cvr, + dce: Dynamsoft.Core.engineResourcePaths.dce.path || Dynamsoft.Core.engineResourcePaths.dce, +} + +// Files to cache +const cacheName = "helloworld-pwa"; +const appShellFiles = [ + "./helloworld-pwa.html", + "./dynamsoft-192x192.png", + "./dynamsoft-512x512.png", + "./helloworld-pwa.json", + `${resourcePaths.std}std.js`, + `${resourcePaths.std}std.wasm`, + `${resourcePaths.dip}dip.wasm`, + `${resourcePaths.core}core.js`, + `${resourcePaths.core}core.worker.js`, + `${resourcePaths.core}core.wasm`, + `${resourcePaths.license}license.js`, + `${resourcePaths.license}dls.license.dialog.html`, + `${resourcePaths.license}license.wasm`, + `${resourcePaths.utility}utility.js`, + `${resourcePaths.dbr}dbr.js`, + `${resourcePaths.dbr}dbr.wasm`, + `${resourcePaths.dbr}DBR-PresetTemplates.json`, + `${resourcePaths.cvr}cvr.js`, + `${resourcePaths.cvr}cvr.wasm`, + `${resourcePaths.cvr}cvr.worker.js`, + `${resourcePaths.dce}dce.js`, + `${resourcePaths.dce}dce.ui.html`, +]; + +// Installing Service Worker +self.addEventListener("install", (e) => { + console.log("[Service Worker] Install"); + e.waitUntil( + (async () => { + const cache = await caches.open(cacheName); + console.log("[Service Worker] Caching all: app shell and content"); + await cache.addAll(appShellFiles); + })() + ); +}); + +self.addEventListener("fetch", (e) => { + e.respondWith( + (async () => { + const r = await caches.match(e.request); + console.log(`[Service Worker] Fetching resource: ${e.request.url}`); + if (r) { + return r; + } + const response = await fetch(e.request); + const cache = await caches.open(cacheName); + console.log(`[Service Worker] Caching new resource: ${e.request.url}`); + if (e.request.method !== "POST") cache.put(e.request, response.clone()); + return response; + })() + ); +}); diff --git a/1.hello-world/13.read-video-react-hooks/.gitignore b/hello-world/react-hooks/.gitignore similarity index 100% rename from 1.hello-world/13.read-video-react-hooks/.gitignore rename to hello-world/react-hooks/.gitignore diff --git a/hello-world/react-hooks/README.md b/hello-world/react-hooks/README.md new file mode 100644 index 00000000..37e9503c --- /dev/null +++ b/hello-world/react-hooks/README.md @@ -0,0 +1,479 @@ +# Hello World Sample for React with Hooks + +[React](https://reactjs.org/) is a JavaScript library meant explicitly for creating interactive UIs. Follow this guide to learn how to implement Dynamsoft Barcode Reader JavaScript SDK (hereafter called "the library") into a React application. Note that in this sample we will use `TypeScript` and [Hooks](https://reactjs.org/docs/hooks-intro.html). Also, there is another sample `react` defining components as classes in React. + +## Official Sample + +* Hello World in React with Hooks - Demo +* Hello World in React with Hooks - Source Code + +## Preparation + +Make sure you have [node](https://nodejs.org/) installed. `node 16.20.1` and `react 18.2.0` used in the example below. + +## Create the sample project + +### Create a Bootstrapped Raw React Application with TypeScript + +```cmd +npx create-react-app my-app --template typescript +``` + +### **CD** to the root directory of the application and install necessary libraries + +```cmd +cd my-app +npm install dynamsoft-core +npm install dynamsoft-license +npm install dynamsoft-utility +npm install dynamsoft-barcode-reader +npm install dynamsoft-capture-vision-router +npm install dynamsoft-camera-enhancer +``` + +## Start to implement + +### Add file "cvr.ts" under "/src/" to configure libraries + +```typescript +import { CoreModule } from 'dynamsoft-core'; +import { LicenseManager } from 'dynamsoft-license'; +import 'dynamsoft-barcode-reader'; + +/** LICENSE ALERT - README + * To use the library, you need to first specify a license key using the API "initLicense()" as shown below. + */ + +LicenseManager.initLicense( + 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9' +); + +/** + * You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&product=dbr&package=js to get your own trial license good for 30 days. + * Note that if you downloaded this sample from Dynamsoft while logged in, the above license key may already be your own 30-day trial license. + * For more information, see https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=10.0.20&utm_source=github#specify-the-license or contact support@dynamsoft.com. + * LICENSE ALERT - THE END + */ + +CoreModule.engineResourcePaths = { + std: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.0.0/dist/", + dip: "https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.0.30/dist/", + core: "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.0.32/dist/", + license: "https://cdn.jsdelivr.net/npm/dynamsoft-license@3.0.20/dist/", + cvr: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.0.31/dist/", + dbr: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.0.20/dist/", + dce: "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.1/dist/" +}; + +// Preload "BarcodeReader" module for reading barcodes. It will save time on the initial decoding by skipping the module loading. +CoreModule.loadWasm(['DBR']); +``` + +> Note: +> +> * `initLicense()` specify a license key to use the library. You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=sample&product=dbr&package=js to get your own trial license good for 30 days. +> * `engineResourcePaths` tells the library where to get the necessary resources at runtime. + +### Build directory structure + +* Create a directory "components" under "/src/", and then create another three directories "HelloWorld", "VideoCapture" and "ImageCapture" under "/src/components/". + +### Create and edit the `VideoCapture` component + +* Create `VideoCapture.tsx` and `VideoCapture.css` under "/src/components/VideoCapture/". The `VideoCapture` component helps decode barcodes via camera. + +* In `VideoCapture.tsx`, add code for initializing and destroying some instances. + +```tsx +import React, { useEffect, useRef } from "react"; +import { EnumCapturedResultItemType } from "dynamsoft-core"; +import { DecodedBarcodesResult } from "dynamsoft-barcode-reader"; +import { + CameraEnhancer, + CameraView, +} from "dynamsoft-camera-enhancer"; +import { + CapturedResultReceiver, + CaptureVisionRouter, +} from "dynamsoft-capture-vision-router"; +import { MultiFrameResultCrossFilter } from "dynamsoft-utility"; +import "./VideoCapture.css"; + +function VideoCapture() { + const uiContainer = useRef(null); + const resultsContainer = useRef(null); + + const pInit = useRef( + null as Promise<{ + cameraView: CameraView; + cameraEnhancer: CameraEnhancer; + router: CaptureVisionRouter; + }> | null + ); + const pDestroy = useRef(null as Promise | null); + + const init = async (): Promise<{ + cameraView: CameraView; + cameraEnhancer: CameraEnhancer; + router: CaptureVisionRouter; + }> => { + try { + // Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control. + const cameraView = await CameraView.createInstance(); + const cameraEnhancer = await CameraEnhancer.createInstance(cameraView); + uiContainer.current!.innerText = ""; + uiContainer.current!.append(cameraView.getUIElement()); // Get default UI and append it to DOM. + + // Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source. + const router = await CaptureVisionRouter.createInstance(); + router.setInput(cameraEnhancer); + + // Define a callback for results. + const resultReceiver = new CapturedResultReceiver(); + resultReceiver.onDecodedBarcodesReceived = ( + result: DecodedBarcodesResult + ) => { + if (!result.barcodeResultItems.length) return; + + resultsContainer.current!.textContent = ''; + console.log(result); + for (let item of result.barcodeResultItems) { + resultsContainer.current!.append( + `${item.formatString}: ${item.text}`, + document.createElement('br'), + document.createElement('hr'), + ); + } + }; + router.addResultReceiver(resultReceiver); + + // Filter out unchecked and duplicate results. + const filter = new MultiFrameResultCrossFilter(); + filter.enableResultCrossVerification( + EnumCapturedResultItemType.CRIT_BARCODE, + true + ); // Filter out unchecked barcodes. + // Filter out duplicate barcodes within 3 seconds. + filter.enableResultDeduplication( + EnumCapturedResultItemType.CRIT_BARCODE, + true + ); + filter.setDuplicateForgetTime( + EnumCapturedResultItemType.CRIT_BARCODE, + 3000 + ); + await router.addResultFilter(filter); + + // Open camera and start scanning single barcode. + await cameraEnhancer.open(); + await router.startCapturing("ReadSingleBarcode"); + return { + cameraView, + cameraEnhancer, + router, + }; + } catch (ex: any) { + let errMsg = ex.message || ex; + console.error(errMsg); + alert(errMsg); + throw ex; + } + }; + + const destroy = async (): Promise => { + if (pInit.current) { + const { cameraView, cameraEnhancer, router } = await pInit.current; + router.dispose(); + cameraEnhancer.dispose(); + cameraView.dispose(); + } + }; + + useEffect(() => { + (async () => { + // In 'development', React runs setup and cleanup one extra time before the actual setup in Strict Mode. + if (pDestroy.current) { + await pDestroy.current; + pInit.current = init(); + } else { + pInit.current = init(); + } + })(); + + return () => { + (async () => { + await (pDestroy.current = destroy()); + console.log("VideoCapture Component Unmount"); + })(); + }; + }, []); + + return ( +
+
+ Results: +
+
+
+ ); +} + +export default VideoCapture; +``` + +> Note: +> +> * The component should never update (check the code for `shouldComponentUpdate()`) so that events bound to the UI stay valid. + +* Define the style of the element in `VideoCapture.css` + +```css +.div-ui-container { + width: 100%; + height: 70vh; +} + +.div-results-container { + width: 100%; + height: 10vh; + overflow: auto; +} +``` + +### Create and edit the `ImageCapture` component + +* Create `ImageCapture.tsx` and `ImageCapture.css` under "/src/components/ImageCapture/". The `ImageCapture` component helps decode barcodes in an image. + +* In `ImageCapture.tsx`, add code for initializing and destroying the `CaptureVisionRouter` instance. + +```tsx +import React, { useRef, useEffect } from "react"; +import { BarcodeResultItem } from "dynamsoft-barcode-reader"; +import { CaptureVisionRouter } from "dynamsoft-capture-vision-router"; +import "../../cvr"; // import side effects. The license, engineResourcePath, so on. +import "./ImageCapture.css"; + +function ImageCapture() { + const pInit = useRef(null as null | Promise); + const pDestroy = useRef(null as null | Promise); + + const init = async (): Promise => { + const router = await CaptureVisionRouter.createInstance(); + return router; + }; + + const destroy = async (): Promise => { + if (pInit.current) { + const router = (await pInit.current)!; + router.dispose(); + } + }; + + const decodeImg = async (e: React.ChangeEvent) => { + try { + const router = (await pInit.current)!; + // Decode selected image with 'ReadBarcodes_SpeedFirst' template. + const result = await router.capture( + e.target.files![0], + "ReadBarcodes_SpeedFirst" + ); + let texts = ""; + for (let item of result.items) { + console.log((item as BarcodeResultItem).text); + texts += (item as BarcodeResultItem).text + "\n"; + } + if (texts !== "") alert(texts); + if (!result.items.length) alert("No barcode found"); + } catch (ex: any) { + let errMsg = ex.message || ex; + console.error(errMsg); + alert(errMsg); + } + e.target.value = ""; + }; + + useEffect(() => { + (async () => { + // In 'development', React runs setup and cleanup one extra time before the actual setup in Strict Mode. + if (pDestroy) { + await pDestroy; + pInit.current = init(); + } else { + pInit.current = init(); + } + })(); + + return () => { + (async () => { + await (pDestroy.current = destroy()); + console.log("ImageCapture Component Unmount"); + })(); + }; + }, []); + + return ( +
+ +
+ ); +} + +export default ImageCapture; +``` + +* Define the style of the element in `ImageCapture.css` + +```css +.div-image-capture { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + border: 1px solid black; +} +``` + +### Create and edit the `HelloWorld` component + +* Create `HelloWorld.tsx` and `HelloWorld.css` under "/src/components/HelloWorld/". The `HelloWorld` component offers buttons to switch components between `VideoCapture` and `ImageCapture`; + +* Add following code to `HelloWorld.tsx`. + +```tsx +import React, { useState } from "react"; +import "../../cvr"; // import side effects. The license, engineResourcePath, so on. +import VideoCapture from "../VideoCapture/VideoCapture"; +import ImageCapture from "../ImageCapture/ImageCapture"; +import "./HelloWorld.css"; + +function HelloWorld() { + let [bShowVideoCapture, setBShowVideoCapture] = useState(true); + let [bShowImageCapture, setBShowImageCapture] = useState(false); + + const showVideoCapture = () => { + setBShowVideoCapture(true); + setBShowImageCapture(false); + }; + + const showImageCapture = () => { + setBShowVideoCapture(false); + setBShowImageCapture(true); + }; + + return ( +
+

Hello World for React(Hooks)

+
+ + +
+
+ {bShowVideoCapture ? : ""} + {bShowImageCapture ? : ""} +
+
+ ); +} + +export default HelloWorld; +``` + +* Define the style of the element in `HelloWorld.css` + +```css +.div-hello-world { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + color: #455A64; +} + +h1 { + font-size: 1.5em; +} + +button { + font-size: 1.5rem; + margin: 1.5vh 0; + border: 1px solid black; + background-color: white; + color: black; +} + +.container { + margin: 2vmin auto; + font-size: medium; + width: 80vw; +} +``` + +### Add the `HelloWorld` component to `App.tsx` + +Edit the file `App.tsx` to be like this + +```jsx +import HelloWorld from './components/HelloWorld/HelloWorld'; +import './App.css'; + +function App() { + return ( +
+ +
+ ); +} + +export default App; +``` + +* Try running the project. + +```cmd +npm start +``` + +If you followed all the steps correctly, you will have a working page that turns one of the cameras hooked to or built in your computer or mobile device into a barcode scanner. Also, if you want to decode a local image, just click the `Image Decode` button and select the image you want to decode. Once barcodes are found, the results will show in a dialog. + +## Development server + +Runs the app in the development mode.\ +Open [http://localhost:3000](http://localhost:3000) to view it in the browser. + +The page will reload if you make edits.\ +You will also see any lint errors in the console. + +## Build + +Builds the app for production to the `build` folder.\ +It correctly bundles React in production mode and optimizes the build for the best performance. + +The build is minified and the filenames include the hashes.\ +Your app is ready to be deployed! + +See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. + +## Support + +If you have any questions, feel free to [contact Dynamsoft support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme). \ No newline at end of file diff --git a/1.hello-world/13.read-video-react-hooks/package.json b/hello-world/react-hooks/package.json similarity index 67% rename from 1.hello-world/13.read-video-react-hooks/package.json rename to hello-world/react-hooks/package.json index 05ab8efa..1104c108 100644 --- a/1.hello-world/13.read-video-react-hooks/package.json +++ b/hello-world/react-hooks/package.json @@ -1,17 +1,22 @@ { - "name": "read-video-react-hooks", + "name": "hello-world", "version": "0.1.0", - "homepage": "./", "private": true, + "homepage": "./", "dependencies": { - "@testing-library/jest-dom": "^5.16.5", + "dynamsoft-barcode-reader": "10.0.20", + "dynamsoft-camera-enhancer": "4.0.1", + "dynamsoft-capture-vision-router": "2.0.31", + "dynamsoft-core": "3.0.32", + "dynamsoft-license": "3.0.20", + "dynamsoft-utility": "1.0.21", + "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "@types/jest": "^27.5.2", - "@types/node": "^16.18.12", - "@types/react": "^18.0.27", - "@types/react-dom": "^18.0.10", - "dynamsoft-javascript-barcode": "^9.6.32", + "@types/node": "^16.18.59", + "@types/react": "^18.2.31", + "@types/react-dom": "^18.2.14", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", diff --git a/1.hello-world/13.read-video-react-hooks/public/favicon.ico b/hello-world/react-hooks/public/favicon.ico similarity index 100% rename from 1.hello-world/13.read-video-react-hooks/public/favicon.ico rename to hello-world/react-hooks/public/favicon.ico diff --git a/1.hello-world/4.read-video-react/public/index.html b/hello-world/react-hooks/public/index.html similarity index 66% rename from 1.hello-world/4.read-video-react/public/index.html rename to hello-world/react-hooks/public/index.html index 31dfccdb..3a393f38 100644 --- a/1.hello-world/4.read-video-react/public/index.html +++ b/hello-world/react-hooks/public/index.html @@ -5,10 +5,15 @@ - - - + + + + + - React App + Hello World for React with Hooks - Dynamsoft Barcode Reader Sample diff --git a/1.hello-world/13.read-video-react-hooks/public/logo192.png b/hello-world/react-hooks/public/logo192.png similarity index 100% rename from 1.hello-world/13.read-video-react-hooks/public/logo192.png rename to hello-world/react-hooks/public/logo192.png diff --git a/1.hello-world/13.read-video-react-hooks/public/logo512.png b/hello-world/react-hooks/public/logo512.png similarity index 100% rename from 1.hello-world/13.read-video-react-hooks/public/logo512.png rename to hello-world/react-hooks/public/logo512.png diff --git a/1.hello-world/13.read-video-react-hooks/public/manifest.json b/hello-world/react-hooks/public/manifest.json similarity index 100% rename from 1.hello-world/13.read-video-react-hooks/public/manifest.json rename to hello-world/react-hooks/public/manifest.json diff --git a/1.hello-world/13.read-video-react-hooks/public/robots.txt b/hello-world/react-hooks/public/robots.txt similarity index 100% rename from 1.hello-world/13.read-video-react-hooks/public/robots.txt rename to hello-world/react-hooks/public/robots.txt diff --git a/1.hello-world/4.read-video-react/src/App.css b/hello-world/react-hooks/src/App.css similarity index 91% rename from 1.hello-world/4.read-video-react/src/App.css rename to hello-world/react-hooks/src/App.css index f4091d6f..2d26ac5c 100644 --- a/1.hello-world/4.read-video-react/src/App.css +++ b/hello-world/react-hooks/src/App.css @@ -1,9 +1,5 @@ -.App { - text-align: center; -} - .App-logo { - height: 5vmin; + height: 40vmin; pointer-events: none; } diff --git a/1.hello-world/13.read-video-react-hooks/src/App.test.tsx b/hello-world/react-hooks/src/App.test.tsx similarity index 100% rename from 1.hello-world/13.read-video-react-hooks/src/App.test.tsx rename to hello-world/react-hooks/src/App.test.tsx diff --git a/1.hello-world/13.read-video-react-hooks/src/App.tsx b/hello-world/react-hooks/src/App.tsx similarity index 88% rename from 1.hello-world/13.read-video-react-hooks/src/App.tsx rename to hello-world/react-hooks/src/App.tsx index 7648844a..4b4a9922 100644 --- a/1.hello-world/13.read-video-react-hooks/src/App.tsx +++ b/hello-world/react-hooks/src/App.tsx @@ -1,6 +1,5 @@ -import React from 'react'; -import './App.css'; import HelloWorld from './components/HelloWorld/HelloWorld'; +import './App.css'; function App() { return ( diff --git a/1.hello-world/13.read-video-react-hooks/src/components/HelloWorld/HelloWorld.css b/hello-world/react-hooks/src/components/HelloWorld/HelloWorld.css similarity index 91% rename from 1.hello-world/13.read-video-react-hooks/src/components/HelloWorld/HelloWorld.css rename to hello-world/react-hooks/src/components/HelloWorld/HelloWorld.css index b3c0327a..afdfe7a2 100644 --- a/1.hello-world/13.read-video-react-hooks/src/components/HelloWorld/HelloWorld.css +++ b/hello-world/react-hooks/src/components/HelloWorld/HelloWorld.css @@ -1,4 +1,4 @@ -.helloWorld { +.div-hello-world { display: flex; flex-direction: column; align-items: center; @@ -22,7 +22,6 @@ button { .container { margin: 2vmin auto; - text-align: center; font-size: medium; width: 80vw; } \ No newline at end of file diff --git a/hello-world/react-hooks/src/components/HelloWorld/HelloWorld.tsx b/hello-world/react-hooks/src/components/HelloWorld/HelloWorld.tsx new file mode 100644 index 00000000..b4d55c04 --- /dev/null +++ b/hello-world/react-hooks/src/components/HelloWorld/HelloWorld.tsx @@ -0,0 +1,51 @@ +import React, { useState } from "react"; +import "../../cvr"; // import side effects. The license, engineResourcePath, so on. +import VideoCapture from "../VideoCapture/VideoCapture"; +import ImageCapture from "../ImageCapture/ImageCapture"; +import "./HelloWorld.css"; + +function HelloWorld() { + let [bShowVideoCapture, setBShowVideoCapture] = useState(true); + let [bShowImageCapture, setBShowImageCapture] = useState(false); + + const showVideoCapture = () => { + setBShowVideoCapture(true); + setBShowImageCapture(false); + }; + + const showImageCapture = () => { + setBShowVideoCapture(false); + setBShowImageCapture(true); + }; + + return ( +
+

Hello World for React(Hooks)

+
+ + +
+
+ {bShowVideoCapture ? : ""} + {bShowImageCapture ? : ""} +
+
+ ); +} + +export default HelloWorld; diff --git a/1.hello-world/4.read-video-react/src/components/ImgDecode/ImgDecode.css b/hello-world/react-hooks/src/components/ImageCapture/ImageCapture.css similarity index 51% rename from 1.hello-world/4.read-video-react/src/components/ImgDecode/ImgDecode.css rename to hello-world/react-hooks/src/components/ImageCapture/ImageCapture.css index 529c9e72..462c83a2 100644 --- a/1.hello-world/4.read-video-react/src/components/ImgDecode/ImgDecode.css +++ b/hello-world/react-hooks/src/components/ImageCapture/ImageCapture.css @@ -1,6 +1,7 @@ -.ImgDecode { +.div-image-capture { display: flex; justify-content: center; align-items: center; - border: 1px solid black + width: 100%; + border: 1px solid black; } \ No newline at end of file diff --git a/hello-world/react-hooks/src/components/ImageCapture/ImageCapture.tsx b/hello-world/react-hooks/src/components/ImageCapture/ImageCapture.tsx new file mode 100644 index 00000000..31a038bf --- /dev/null +++ b/hello-world/react-hooks/src/components/ImageCapture/ImageCapture.tsx @@ -0,0 +1,75 @@ +import React, { useRef, useEffect } from "react"; +import { BarcodeResultItem } from "dynamsoft-barcode-reader"; +import { CaptureVisionRouter } from "dynamsoft-capture-vision-router"; +import "../../cvr"; // import side effects. The license, engineResourcePath, so on. +import "./ImageCapture.css"; + +function ImageCapture() { + const pInit = useRef(null as null | Promise); + const pDestroy = useRef(null as null | Promise); + + const init = async (): Promise => { + const router = await CaptureVisionRouter.createInstance(); + return router; + }; + + const destroy = async (): Promise => { + if (pInit.current) { + const router = (await pInit.current)!; + router.dispose(); + } + }; + + const decodeImg = async (e: React.ChangeEvent) => { + try { + const router = (await pInit.current)!; + // Decode selected image with 'ReadBarcodes_SpeedFirst' template. + const result = await router.capture( + e.target.files![0], + "ReadBarcodes_SpeedFirst" + ); + let texts = ""; + for (let item of result.items) { + console.log((item as BarcodeResultItem).text); + texts += (item as BarcodeResultItem).text + "\n"; + } + if (texts !== "") alert(texts); + if (!result.items.length) alert("No barcode found"); + } catch (ex: any) { + let errMsg = ex.message || ex; + console.error(errMsg); + } + e.target.value = ""; + }; + + useEffect(() => { + (async () => { + // In 'development', React runs setup and cleanup one extra time before the actual setup in Strict Mode. + if (pDestroy) { + await pDestroy; + pInit.current = init(); + } else { + pInit.current = init(); + } + })(); + + return () => { + (async () => { + await (pDestroy.current = destroy()); + console.log("ImageCapture Component Unmount"); + })(); + }; + }, []); + + return ( +
+ +
+ ); +} + +export default ImageCapture; diff --git a/hello-world/react-hooks/src/components/VideoCapture/VideoCapture.css b/hello-world/react-hooks/src/components/VideoCapture/VideoCapture.css new file mode 100644 index 00000000..37aae8a5 --- /dev/null +++ b/hello-world/react-hooks/src/components/VideoCapture/VideoCapture.css @@ -0,0 +1,10 @@ +.div-ui-container { + width: 100%; + height: 70vh; +} + +.div-results-container { + width: 100%; + height: 10vh; + overflow: auto; +} diff --git a/hello-world/react-hooks/src/components/VideoCapture/VideoCapture.tsx b/hello-world/react-hooks/src/components/VideoCapture/VideoCapture.tsx new file mode 100644 index 00000000..87110207 --- /dev/null +++ b/hello-world/react-hooks/src/components/VideoCapture/VideoCapture.tsx @@ -0,0 +1,135 @@ +import React, { useEffect, useRef } from "react"; +import { EnumCapturedResultItemType } from "dynamsoft-core"; +import { DecodedBarcodesResult } from "dynamsoft-barcode-reader"; +import { + CameraEnhancer, + CameraView, +} from "dynamsoft-camera-enhancer"; +import { + CapturedResultReceiver, + CaptureVisionRouter, +} from "dynamsoft-capture-vision-router"; +import { MultiFrameResultCrossFilter } from "dynamsoft-utility"; +import "../../cvr"; // import side effects. The license, engineResourcePath, so on. +import "./VideoCapture.css"; + +function VideoCapture() { + const uiContainer = useRef(null); + const resultsContainer = useRef(null); + + const pInit = useRef( + null as Promise<{ + cameraView: CameraView; + cameraEnhancer: CameraEnhancer; + router: CaptureVisionRouter; + }> | null + ); + const pDestroy = useRef(null as Promise | null); + + const init = async (): Promise<{ + cameraView: CameraView; + cameraEnhancer: CameraEnhancer; + router: CaptureVisionRouter; + }> => { + try { + // Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control. + const cameraView = await CameraView.createInstance(); + const cameraEnhancer = await CameraEnhancer.createInstance(cameraView); + uiContainer.current!.innerText = ""; + uiContainer.current!.append(cameraView.getUIElement()); // Get default UI and append it to DOM. + + // Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source. + const router = await CaptureVisionRouter.createInstance(); + router.setInput(cameraEnhancer); + + // Define a callback for results. + const resultReceiver = new CapturedResultReceiver(); + resultReceiver.onDecodedBarcodesReceived = ( + result: DecodedBarcodesResult + ) => { + if (!result.barcodeResultItems.length) return; + + resultsContainer.current!.textContent = ''; + console.log(result); + for (let item of result.barcodeResultItems) { + resultsContainer.current!.append( + `${item.formatString}: ${item.text}`, + document.createElement('br'), + document.createElement('hr'), + ); + } + }; + router.addResultReceiver(resultReceiver); + + // Filter out unchecked and duplicate results. + const filter = new MultiFrameResultCrossFilter(); + filter.enableResultCrossVerification( + EnumCapturedResultItemType.CRIT_BARCODE, + true + ); // Filter out unchecked barcodes. + // Filter out duplicate barcodes within 3 seconds. + filter.enableResultDeduplication( + EnumCapturedResultItemType.CRIT_BARCODE, + true + ); + filter.setDuplicateForgetTime( + EnumCapturedResultItemType.CRIT_BARCODE, + 3000 + ); + await router.addResultFilter(filter); + + // Open camera and start scanning single barcode. + await cameraEnhancer.open(); + await router.startCapturing("ReadSingleBarcode"); + return { + cameraView, + cameraEnhancer, + router, + }; + } catch (ex: any) { + let errMsg = ex.message || ex; + console.error(errMsg); + alert(errMsg); + throw ex; + } + }; + + const destroy = async (): Promise => { + if (pInit.current) { + const { cameraView, cameraEnhancer, router } = await pInit.current; + router.dispose(); + cameraEnhancer.dispose(); + cameraView.dispose(); + } + }; + + useEffect(() => { + (async () => { + // In 'development', React runs setup and cleanup one extra time before the actual setup in Strict Mode. + if (pDestroy.current) { + await pDestroy.current; + pInit.current = init(); + } else { + pInit.current = init(); + } + })(); + + return () => { + (async () => { + await (pDestroy.current = destroy()); + console.log("VideoCapture Component Unmount"); + })(); + }; + }, []); + + return ( +
+
+ Results: +
+
+
+ ); +} + +export default VideoCapture; diff --git a/hello-world/react-hooks/src/cvr.ts b/hello-world/react-hooks/src/cvr.ts new file mode 100644 index 00000000..4569f99a --- /dev/null +++ b/hello-world/react-hooks/src/cvr.ts @@ -0,0 +1,31 @@ +import { CoreModule } from 'dynamsoft-core'; +import { LicenseManager } from 'dynamsoft-license'; +import 'dynamsoft-barcode-reader'; + +/** LICENSE ALERT - README + * To use the library, you need to first specify a license key using the API "initLicense()" as shown below. + */ + +LicenseManager.initLicense( + 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9' +); + +/** + * You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&product=dbr&package=js to get your own trial license good for 30 days. + * Note that if you downloaded this sample from Dynamsoft while logged in, the above license key may already be your own 30-day trial license. + * For more information, see https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=10.0.20&utm_source=github#specify-the-license or contact support@dynamsoft.com. + * LICENSE ALERT - THE END + */ + +CoreModule.engineResourcePaths = { + std: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.0.0/dist/", + dip: "https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.0.30/dist/", + core: "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.0.32/dist/", + license: "https://cdn.jsdelivr.net/npm/dynamsoft-license@3.0.20/dist/", + cvr: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.0.31/dist/", + dbr: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.0.20/dist/", + dce: "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.1/dist/" +}; + +// Preload "BarcodeReader" module for reading barcodes. It will save time on the initial decoding by skipping the module loading. +CoreModule.loadWasm(['DBR']); \ No newline at end of file diff --git a/1.hello-world/13.read-video-react-hooks/src/index.css b/hello-world/react-hooks/src/index.css similarity index 100% rename from 1.hello-world/13.read-video-react-hooks/src/index.css rename to hello-world/react-hooks/src/index.css diff --git a/1.hello-world/13.read-video-react-hooks/src/index.tsx b/hello-world/react-hooks/src/index.tsx similarity index 100% rename from 1.hello-world/13.read-video-react-hooks/src/index.tsx rename to hello-world/react-hooks/src/index.tsx diff --git a/1.hello-world/13.read-video-react-hooks/src/logo.svg b/hello-world/react-hooks/src/logo.svg similarity index 100% rename from 1.hello-world/13.read-video-react-hooks/src/logo.svg rename to hello-world/react-hooks/src/logo.svg diff --git a/1.hello-world/13.read-video-react-hooks/src/react-app-env.d.ts b/hello-world/react-hooks/src/react-app-env.d.ts similarity index 100% rename from 1.hello-world/13.read-video-react-hooks/src/react-app-env.d.ts rename to hello-world/react-hooks/src/react-app-env.d.ts diff --git a/1.hello-world/13.read-video-react-hooks/src/reportWebVitals.ts b/hello-world/react-hooks/src/reportWebVitals.ts similarity index 100% rename from 1.hello-world/13.read-video-react-hooks/src/reportWebVitals.ts rename to hello-world/react-hooks/src/reportWebVitals.ts diff --git a/1.hello-world/13.read-video-react-hooks/src/setupTests.ts b/hello-world/react-hooks/src/setupTests.ts similarity index 100% rename from 1.hello-world/13.read-video-react-hooks/src/setupTests.ts rename to hello-world/react-hooks/src/setupTests.ts diff --git a/1.hello-world/13.read-video-react-hooks/tsconfig.json b/hello-world/react-hooks/tsconfig.json similarity index 100% rename from 1.hello-world/13.read-video-react-hooks/tsconfig.json rename to hello-world/react-hooks/tsconfig.json diff --git a/1.hello-world/4.read-video-react/.gitignore b/hello-world/react/.gitignore similarity index 100% rename from 1.hello-world/4.read-video-react/.gitignore rename to hello-world/react/.gitignore diff --git a/hello-world/react/README.md b/hello-world/react/README.md new file mode 100644 index 00000000..649d7b8c --- /dev/null +++ b/hello-world/react/README.md @@ -0,0 +1,530 @@ +# Hello World Sample for React + +[React](https://reactjs.org/) is a JavaScript library meant explicitly for creating interactive UIs. Follow this guide to learn how to implement Dynamsoft Barcode Reader JavaScript SDK (hereafter called "the library") into a React application. Note that in this sample we will use `TypeScript` and define components as classes. Also, there is another sample `react-hooks` using `Hooks` in React. + +## Official Sample + +* Hello World in React - Demo +* Hello World in React - Source Code + +## Preparation + +Make sure you have [node](https://nodejs.org/) installed. `node 16.20.1` and `react 18.2.0` are used in the example below. + +## Create the sample project + +### Create a Bootstrapped Raw React Application with TypeScript + +```cmd +npx create-react-app my-app --template typescript +``` + +### **CD** to the root directory of the application and install necessary libraries + +```cmd +cd my-app +npm install dynamsoft-core +npm install dynamsoft-license +npm install dynamsoft-utility +npm install dynamsoft-barcode-reader +npm install dynamsoft-capture-vision-router +npm install dynamsoft-camera-enhancer +``` + +## Start to implement + +### Add file "cvr.ts" under "/src/" to configure libraries + +```typescript +# Hello World Sample for NuxtJS + +[Nuxt](https://nuxtjs.org/) is a higher-level framework that builds on top of [Vue](https://vuejs.org/). Check out the following guide on how to implement Dynamsoft Barcode Reader JavaScript SDK (hereafter called "the library") into a Nuxt application. Note that in this sample `TypeScript` is used. + +## Official Sample + +* Hello World in Nuxt - Source Code + +## Preparation + +Make sure you have [node](https://nodejs.org/) installed. `node 16.20.1` and `nuxt 3.2.3` are used in this article. + +## Create the sample project + +### Create a Bootstrapped Nuxt Application + +```cmd +npx nuxi@latest init my-app +``` + +You will be asked to configure quite a few things for the application during the creation. In our example, we chose the default one in every step. + +### **CD** to the root directory of the application and install the dependencies + +```cmd +cd my-app +npm install +npm install dynamsoft-core +npm install dynamsoft-license +npm install dynamsoft-utility +npm install dynamsoft-barcode-reader +npm install dynamsoft-capture-vision-router +npm install dynamsoft-camera-enhancer +``` + +## Start to implement + +### Add file "cvr.ts" at the root of the app to configure libraries + +```typescript +import { CoreModule } from 'dynamsoft-core'; +import { LicenseManager } from 'dynamsoft-license'; +import 'dynamsoft-barcode-reader'; + +/** LICENSE ALERT - README + * To use the library, you need to first specify a license key using the API "initLicense()" as shown below. + */ + +LicenseManager.initLicense( + 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9' +); + +/** + * You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&product=dbr&package=js to get your own trial license good for 30 days. + * Note that if you downloaded this sample from Dynamsoft while logged in, the above license key may already be your own 30-day trial license. + * For more information, see https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=10.0.20&utm_source=github#specify-the-license or contact support@dynamsoft.com. + * LICENSE ALERT - THE END + */ + +CoreModule.engineResourcePaths = { + std: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.0.0/dist/", + dip: "https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.0.30/dist/", + core: "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.0.32/dist/", + license: "https://cdn.jsdelivr.net/npm/dynamsoft-license@3.0.20/dist/", + cvr: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.0.31/dist/", + dbr: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.0.20/dist/", + dce: "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.1/dist/" +}; + +// Preload "BarcodeReader" module for reading barcodes. It will save time on the initial decoding by skipping the module loading. +CoreModule.loadWasm(['DBR']); +``` + +> Note: +> +> * `initLicense()` specify a license key to use the library. You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=sample&product=dbr&package=js to get your own trial license good for 30 days. +> * `engineResourcePaths` tells the library where to get the necessary resources at runtime. + +### Build directory structure + +* Create a directory "components" under "/src/", and then create another three directories "HelloWorld", "VideoCapture" and "ImageCapture" under "/src/components/". + +### Create and edit the `VideoCapture` component + +* Create `VideoCapture.tsx` and `VideoCapture.css` under "/src/components/VideoCapture/". The `VideoCapture` component helps decode barcodes via camera. + +* In `VideoCapture.tsx`, add code for initializing and destroying some instances. + +```tsx +import React from "react"; +import { EnumCapturedResultItemType } from "dynamsoft-core"; +import { DecodedBarcodesResult } from "dynamsoft-barcode-reader"; +import { + CameraEnhancer, + CameraView, +} from "dynamsoft-camera-enhancer"; +import { + CapturedResultReceiver, + CaptureVisionRouter, +} from "dynamsoft-capture-vision-router"; +import { MultiFrameResultCrossFilter } from "dynamsoft-utility"; +import "./VideoCapture.css"; + +class VideoCapture extends React.Component { + pInit: Promise<{ + cameraView: CameraView; + cameraEnhancer: CameraEnhancer; + router: CaptureVisionRouter; + }> | null = null; + pDestroy: Promise | null = null; + + uiContainer: React.RefObject = React.createRef(); + resultsContainer: React.RefObject = React.createRef(); + + async init(): Promise<{ + cameraView: CameraView; + cameraEnhancer: CameraEnhancer; + router: CaptureVisionRouter; + }> { + try { + // Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control. + const cameraView = await CameraView.createInstance(); + const cameraEnhancer = await CameraEnhancer.createInstance(cameraView); + this.uiContainer.current!.innerText = ""; + this.uiContainer.current!.append(cameraView.getUIElement()); // Get default UI and append it to DOM. + + // Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source. + const router = await CaptureVisionRouter.createInstance(); + router.setInput(cameraEnhancer); + + // Define a callback for results. + const resultReceiver = new CapturedResultReceiver(); + resultReceiver.onDecodedBarcodesReceived = ( + result: DecodedBarcodesResult + ) => { + if (!result.barcodeResultItems.length) return; + + resultsContainer.current!.textContent = ''; + console.log(result); + for (let item of result.barcodeResultItems) { + resultsContainer.current!.append( + `${item.formatString}: ${item.text}`, + document.createElement('br'), + document.createElement('hr'), + ); + } + }; + router.addResultReceiver(resultReceiver); + + // Filter out unchecked and duplicate results. + const filter = new MultiFrameResultCrossFilter(); + filter.enableResultCrossVerification( + EnumCapturedResultItemType.CRIT_BARCODE, + true + ); // Filter out unchecked barcodes. + // Filter out duplicate barcodes within 3 seconds. + filter.enableResultDeduplication( + EnumCapturedResultItemType.CRIT_BARCODE, + true + ); + filter.setDuplicateForgetTime( + EnumCapturedResultItemType.CRIT_BARCODE, + 3000 + ); + await router.addResultFilter(filter); + + // Open camera and start scanning single barcode. + await cameraEnhancer.open(); + await router.startCapturing("ReadSingleBarcode"); + return { + cameraView, + cameraEnhancer, + router, + }; + } catch (ex: any) { + let errMsg = ex.message || ex; + console.error(errMsg); + alert(errMsg); + throw ex; + } + } + + async destroy(): Promise { + if (this.pInit) { + const { cameraView, cameraEnhancer, router } = await this.pInit; + router.dispose(); + cameraEnhancer.dispose(); + cameraView.dispose(); + } + } + + async componentDidMount() { + // In 'development', React runs setup and cleanup one extra time before the actual setup in Strict Mode. + if (this.pDestroy) { + await this.pDestroy; + this.pInit = this.init(); + } else { + this.pInit = this.init(); + } + } + + async componentWillUnmount() { + await (this.pDestroy = this.destroy()); + console.log("VideoCapture Component Unmount"); + } + + shouldComponentUpdate() { + // Never update UI after mount, sdk use native way to bind event, update will remove it. + return false; + } + + render() { + return ( +
+
+ Results: +

+
+
+ ); + } +} + +export default VideoCapture; +``` + +> Note: +> +> * The component should never update (check the code for `shouldComponentUpdate()`) so that events bound to the UI stay valid. + +* Define the style of the element in `VideoCapture.css` + +```css +.div-ui-container { + width: 100%; + height: 70vh; +} + +.div-results-container { + width: 100%; + height: 10vh; + overflow: auto; +} +``` + +### Create and edit the `ImageCapture` component + +* Create `ImageCapture.tsx` and `ImageCapture.css` under "/src/components/ImageCapture/". The `ImageCapture` component helps decode barcodes in an image. + +* In `ImageCapture.tsx`, add code for initializing and destroying the `CaptureVisionRouter` instance. + +```tsx +import React from "react"; +import { BarcodeResultItem } from "dynamsoft-barcode-reader"; +import { CaptureVisionRouter } from "dynamsoft-capture-vision-router"; +import "../../cvr"; // import side effects. The license, engineResourcePath, so on. +import "./ImageCapture.css"; + +class ImageCapture extends React.Component { + pInit: Promise | null = null; + pDestroy: Promise | null = null; + + async init(): Promise { + const router = await CaptureVisionRouter.createInstance(); + return router; + } + + async destroy(): Promise { + if (this.pInit) { + const router = await this.pInit; + router.dispose(); + } + } + + decodeImg = async (e: React.ChangeEvent) => { + try { + const router = await this.pInit; + // Decode selected image with 'ReadBarcodes_SpeedFirst' template. + const result = await router!.capture( + e.target.files![0], + "ReadBarcodes_SpeedFirst" + ); + let texts = ""; + for (let item of result.items) { + console.log((item as BarcodeResultItem).text); + texts += (item as BarcodeResultItem).text + "\n"; + } + if (texts !== "") alert(texts); + if (!result.items.length) alert("No barcode found"); + } catch (ex: any) { + let errMsg = ex.message || ex; + console.error(errMsg); + alert(errMsg); + } + e.target.value = ""; + }; + + async componentDidMount() { + // In 'development', React runs setup and cleanup one extra time before the actual setup in Strict Mode. + if (this.pDestroy) { + await this.pDestroy; + this.pInit = this.init(); + } else { + this.pInit = this.init(); + } + } + + async componentWillUnmount() { + await (this.pDestroy = this.destroy()); + console.log("ImageCapture Component Unmount"); + } + + render() { + return ( +
+ +
+ ); + } +} + +export default ImageCapture; +``` + +* Define the style of the element in `ImageCapture.css` + +```css +.div-image-capture { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + border: 1px solid black; +} +``` + +### Create and edit the `HelloWorld` component + +* Create `HelloWorld.tsx` and `HelloWorld.css` under "/src/components/HelloWorld/". The `HelloWorld` component offers buttons to switch components between `VideoCapture` and `ImageCapture`; + +* Add following code to `HelloWorld.tsx`. + +```tsx +import React from "react"; +import "../../cvr"; // import side effects. The license, engineResourcePath, so on. +import VideoCapture from "../VideoCapture/VideoCapture"; +import ImageCapture from "../ImageCapture/ImageCapture"; +import "./HelloWorld.css"; + +class HelloWorld extends React.Component { + state = { + bShowVideoCapture: true, + bShowImageCapture: false, + }; + + showVideoCapture = () => { + this.setState({ + bShowVideoCapture: true, + bShowImageCapture: false, + }); + }; + + showImageCapture = () => { + this.setState({ + bShowVideoCapture: false, + bShowImageCapture: true, + }); + }; + + render() { + return ( +
+

Hello World for React

+
+ + +
+
+ {this.state.bShowVideoCapture ? : ""} + {this.state.bShowImageCapture ? : ""} +
+
+ ); + } +} + +export default HelloWorld; +``` + +* Define the style of the element in `HelloWorld.css` + +```css +.div-hello-world { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + color: #455A64; +} + +h1 { + font-size: 1.5em; +} + +button { + font-size: 1.5rem; + margin: 1.5vh 0; + border: 1px solid black; + background-color: white; + color: black; +} + +.container { + margin: 2vmin auto; + font-size: medium; + width: 80vw; +} +``` + +### Add the `HelloWorld` component to `App.tsx` + +Edit the file `App.tsx` to be like this + +```jsx +import HelloWorld from './components/HelloWorld/HelloWorld'; +import './App.css'; + +function App() { + return ( +
+ +
+ ); +} + +export default App; +``` + +* Try running the project. + +```cmd +npm start +``` + +If you have followed all the steps correctly, you should now have a functioning page that allows you to scan barcodes from a webcam or a built-in camera. Additionally, if you want to decode a local image, you can click the `Decode Image` button and select the image you want to decode. Any barcodes that are detected will be displayed in a dialog. + +## Development server + +Runs the app in the development mode.\ +Open [http://localhost:3000](http://localhost:3000) to view it in the browser. + +The page will reload if you make edits.\ +You will also see any lint errors in the console. + +## Build + +Builds the app for production to the `build` folder.\ +It correctly bundles React in production mode and optimizes the build for the best performance. + +The build is minified and the filenames include the hashes.\ +Your app is ready to be deployed! + +See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. + +## Support + +If you have any questions, feel free to [contact Dynamsoft support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme). \ No newline at end of file diff --git a/1.hello-world/4.read-video-react/package.json b/hello-world/react/package.json similarity index 61% rename from 1.hello-world/4.read-video-react/package.json rename to hello-world/react/package.json index aceb23e1..1104c108 100644 --- a/1.hello-world/4.read-video-react/package.json +++ b/hello-world/react/package.json @@ -1,21 +1,26 @@ { - "name": "read-video-react", + "name": "hello-world", "version": "0.1.0", - "homepage": "./", "private": true, + "homepage": "./", "dependencies": { - "@testing-library/jest-dom": "^5.16.4", - "@testing-library/react": "^13.3.0", + "dynamsoft-barcode-reader": "10.0.20", + "dynamsoft-camera-enhancer": "4.0.1", + "dynamsoft-capture-vision-router": "2.0.31", + "dynamsoft-core": "3.0.32", + "dynamsoft-license": "3.0.20", + "dynamsoft-utility": "1.0.21", + "@testing-library/jest-dom": "^5.17.0", + "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "@types/jest": "^27.5.2", - "@types/node": "^16.11.45", - "@types/react": "^18.0.15", - "@types/react-dom": "^18.0.6", - "dynamsoft-javascript-barcode": "^9.6.32", + "@types/node": "^16.18.59", + "@types/react": "^18.2.31", + "@types/react-dom": "^18.2.14", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", - "typescript": "^4.7.4", + "typescript": "^4.9.5", "web-vitals": "^2.1.4" }, "scripts": { diff --git a/1.hello-world/4.read-video-react/public/favicon.ico b/hello-world/react/public/favicon.ico similarity index 100% rename from 1.hello-world/4.read-video-react/public/favicon.ico rename to hello-world/react/public/favicon.ico diff --git a/1.hello-world/13.read-video-react-hooks/public/index.html b/hello-world/react/public/index.html similarity index 80% rename from 1.hello-world/13.read-video-react-hooks/public/index.html rename to hello-world/react/public/index.html index 869d54f5..70592c1d 100644 --- a/1.hello-world/13.read-video-react-hooks/public/index.html +++ b/hello-world/react/public/index.html @@ -5,9 +5,9 @@ - - - + + + - React App + Hello World for React - Dynamsoft Barcode Reader Sample diff --git a/hello-world/react/public/logo192.png b/hello-world/react/public/logo192.png new file mode 100644 index 00000000..fc44b0a3 Binary files /dev/null and b/hello-world/react/public/logo192.png differ diff --git a/hello-world/react/public/logo512.png b/hello-world/react/public/logo512.png new file mode 100644 index 00000000..a4e47a65 Binary files /dev/null and b/hello-world/react/public/logo512.png differ diff --git a/hello-world/react/public/manifest.json b/hello-world/react/public/manifest.json new file mode 100644 index 00000000..080d6c77 --- /dev/null +++ b/hello-world/react/public/manifest.json @@ -0,0 +1,25 @@ +{ + "short_name": "React App", + "name": "Create React App Sample", + "icons": [ + { + "src": "favicon.ico", + "sizes": "64x64 32x32 24x24 16x16", + "type": "image/x-icon" + }, + { + "src": "logo192.png", + "type": "image/png", + "sizes": "192x192" + }, + { + "src": "logo512.png", + "type": "image/png", + "sizes": "512x512" + } + ], + "start_url": ".", + "display": "standalone", + "theme_color": "#000000", + "background_color": "#ffffff" +} diff --git a/hello-world/react/public/robots.txt b/hello-world/react/public/robots.txt new file mode 100644 index 00000000..e9e57dc4 --- /dev/null +++ b/hello-world/react/public/robots.txt @@ -0,0 +1,3 @@ +# https://www.robotstxt.org/robotstxt.html +User-agent: * +Disallow: diff --git a/1.hello-world/13.read-video-react-hooks/src/App.css b/hello-world/react/src/App.css similarity index 91% rename from 1.hello-world/13.read-video-react-hooks/src/App.css rename to hello-world/react/src/App.css index f4091d6f..2d26ac5c 100644 --- a/1.hello-world/13.read-video-react-hooks/src/App.css +++ b/hello-world/react/src/App.css @@ -1,9 +1,5 @@ -.App { - text-align: center; -} - .App-logo { - height: 5vmin; + height: 40vmin; pointer-events: none; } diff --git a/hello-world/react/src/App.test.tsx b/hello-world/react/src/App.test.tsx new file mode 100644 index 00000000..2a68616d --- /dev/null +++ b/hello-world/react/src/App.test.tsx @@ -0,0 +1,9 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import App from './App'; + +test('renders learn react link', () => { + render(); + const linkElement = screen.getByText(/learn react/i); + expect(linkElement).toBeInTheDocument(); +}); diff --git a/1.hello-world/4.read-video-react/src/App.tsx b/hello-world/react/src/App.tsx similarity index 88% rename from 1.hello-world/4.read-video-react/src/App.tsx rename to hello-world/react/src/App.tsx index 7648844a..4b4a9922 100644 --- a/1.hello-world/4.read-video-react/src/App.tsx +++ b/hello-world/react/src/App.tsx @@ -1,6 +1,5 @@ -import React from 'react'; -import './App.css'; import HelloWorld from './components/HelloWorld/HelloWorld'; +import './App.css'; function App() { return ( diff --git a/hello-world/react/src/components/HelloWorld/HelloWorld.css b/hello-world/react/src/components/HelloWorld/HelloWorld.css new file mode 100644 index 00000000..afdfe7a2 --- /dev/null +++ b/hello-world/react/src/components/HelloWorld/HelloWorld.css @@ -0,0 +1,27 @@ +.div-hello-world { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + color: #455A64; +} + +h1 { + font-size: 1.5em; +} + +button { + font-size: 1.5rem; + margin: 1.5vh 0; + border: 1px solid black; + background-color: white; + color: black; +} + +.container { + margin: 2vmin auto; + font-size: medium; + width: 80vw; +} \ No newline at end of file diff --git a/hello-world/react/src/components/HelloWorld/HelloWorld.tsx b/hello-world/react/src/components/HelloWorld/HelloWorld.tsx new file mode 100644 index 00000000..12f57816 --- /dev/null +++ b/hello-world/react/src/components/HelloWorld/HelloWorld.tsx @@ -0,0 +1,63 @@ +import React from "react"; +import "../../cvr"; // import side effects. The license, engineResourcePath, so on. +import VideoCapture from "../VideoCapture/VideoCapture"; +import ImageCapture from "../ImageCapture/ImageCapture"; +import "./HelloWorld.css"; + +class HelloWorld extends React.Component { + state = { + bShowVideoCapture: true, + bShowImageCapture: false, + }; + + showVideoCapture = () => { + this.setState({ + bShowVideoCapture: true, + bShowImageCapture: false, + }); + }; + + showImageCapture = () => { + this.setState({ + bShowVideoCapture: false, + bShowImageCapture: true, + }); + }; + + render() { + return ( +
+

Hello World for React

+
+ + +
+
+ {this.state.bShowVideoCapture ? : ""} + {this.state.bShowImageCapture ? : ""} +
+
+ ); + } +} + +export default HelloWorld; diff --git a/1.hello-world/7.read-video-nextjs/styles/ImgDecode.module.css b/hello-world/react/src/components/ImageCapture/ImageCapture.css similarity index 51% rename from 1.hello-world/7.read-video-nextjs/styles/ImgDecode.module.css rename to hello-world/react/src/components/ImageCapture/ImageCapture.css index 529c9e72..462c83a2 100644 --- a/1.hello-world/7.read-video-nextjs/styles/ImgDecode.module.css +++ b/hello-world/react/src/components/ImageCapture/ImageCapture.css @@ -1,6 +1,7 @@ -.ImgDecode { +.div-image-capture { display: flex; justify-content: center; align-items: center; - border: 1px solid black + width: 100%; + border: 1px solid black; } \ No newline at end of file diff --git a/hello-world/react/src/components/ImageCapture/ImageCapture.tsx b/hello-world/react/src/components/ImageCapture/ImageCapture.tsx new file mode 100644 index 00000000..0681e523 --- /dev/null +++ b/hello-world/react/src/components/ImageCapture/ImageCapture.tsx @@ -0,0 +1,74 @@ +import React from "react"; +import { BarcodeResultItem } from "dynamsoft-barcode-reader"; +import { CaptureVisionRouter } from "dynamsoft-capture-vision-router"; +import "../../cvr"; // import side effects. The license, engineResourcePath, so on. +import "./ImageCapture.css"; + +class ImageCapture extends React.Component { + pInit: Promise | null = null; + pDestroy: Promise | null = null; + + async init(): Promise { + const router = await CaptureVisionRouter.createInstance(); + return router; + } + + async destroy(): Promise { + if (this.pInit) { + const router = await this.pInit; + router.dispose(); + } + } + + decodeImg = async (e: React.ChangeEvent) => { + try { + const router = await this.pInit; + // Decode selected image with 'ReadBarcodes_SpeedFirst' template. + const result = await router!.capture( + e.target.files![0], + "ReadBarcodes_SpeedFirst" + ); + let texts = ""; + for (let item of result.items) { + console.log((item as BarcodeResultItem).text); + texts += (item as BarcodeResultItem).text + "\n"; + } + if (texts !== "") alert(texts); + if (!result.items.length) alert("No barcode found"); + } catch (ex: any) { + let errMsg = ex.message || ex; + console.error(errMsg); + alert(errMsg); + } + e.target.value = ""; + }; + + async componentDidMount() { + // In 'development', React runs setup and cleanup one extra time before the actual setup in Strict Mode. + if (this.pDestroy) { + await this.pDestroy; + this.pInit = this.init(); + } else { + this.pInit = this.init(); + } + } + + async componentWillUnmount() { + await (this.pDestroy = this.destroy()); + console.log("ImageCapture Component Unmount"); + } + + render() { + return ( +
+ +
+ ); + } +} + +export default ImageCapture; diff --git a/hello-world/react/src/components/VideoCapture/VideoCapture.css b/hello-world/react/src/components/VideoCapture/VideoCapture.css new file mode 100644 index 00000000..37aae8a5 --- /dev/null +++ b/hello-world/react/src/components/VideoCapture/VideoCapture.css @@ -0,0 +1,10 @@ +.div-ui-container { + width: 100%; + height: 70vh; +} + +.div-results-container { + width: 100%; + height: 10vh; + overflow: auto; +} diff --git a/hello-world/react/src/components/VideoCapture/VideoCapture.tsx b/hello-world/react/src/components/VideoCapture/VideoCapture.tsx new file mode 100644 index 00000000..82e04fac --- /dev/null +++ b/hello-world/react/src/components/VideoCapture/VideoCapture.tsx @@ -0,0 +1,136 @@ +import React from "react"; +import { EnumCapturedResultItemType } from "dynamsoft-core"; +import { DecodedBarcodesResult } from "dynamsoft-barcode-reader"; +import { + CameraEnhancer, + CameraView, +} from "dynamsoft-camera-enhancer"; +import { + CapturedResultReceiver, + CaptureVisionRouter, +} from "dynamsoft-capture-vision-router"; +import { MultiFrameResultCrossFilter } from "dynamsoft-utility"; +import "../../cvr"; // import side effects. The license, engineResourcePath, so on. +import "./VideoCapture.css"; + +class VideoCapture extends React.Component { + pInit: Promise<{ + cameraView: CameraView; + cameraEnhancer: CameraEnhancer; + router: CaptureVisionRouter; + }> | null = null; + pDestroy: Promise | null = null; + + uiContainer: React.RefObject = React.createRef(); + resultsContainer: React.RefObject = React.createRef(); + + async init(): Promise<{ + cameraView: CameraView; + cameraEnhancer: CameraEnhancer; + router: CaptureVisionRouter; + }> { + try { + // Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control. + const cameraView = await CameraView.createInstance(); + const cameraEnhancer = await CameraEnhancer.createInstance(cameraView); + this.uiContainer.current!.innerText = ""; + this.uiContainer.current!.append(cameraView.getUIElement()); // Get default UI and append it to DOM. + + // Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source. + const router = await CaptureVisionRouter.createInstance(); + router.setInput(cameraEnhancer); + + // Define a callback for results. + const resultReceiver = new CapturedResultReceiver(); + resultReceiver.onDecodedBarcodesReceived = ( + result: DecodedBarcodesResult + ) => { + if (!result.barcodeResultItems.length) return; + + this.resultsContainer.current!.textContent = ''; + console.log(result); + for (let item of result.barcodeResultItems) { + this.resultsContainer.current!.append( + `${item.formatString}: ${item.text}`, + document.createElement('br'), + document.createElement('hr'), + ); + } + }; + router.addResultReceiver(resultReceiver); + + // Filter out unchecked and duplicate results. + const filter = new MultiFrameResultCrossFilter(); + filter.enableResultCrossVerification( + EnumCapturedResultItemType.CRIT_BARCODE, + true + ); // Filter out unchecked barcodes. + // Filter out duplicate barcodes within 3 seconds. + filter.enableResultDeduplication( + EnumCapturedResultItemType.CRIT_BARCODE, + true + ); + filter.setDuplicateForgetTime( + EnumCapturedResultItemType.CRIT_BARCODE, + 3000 + ); + await router.addResultFilter(filter); + + // Open camera and start scanning single barcode. + await cameraEnhancer.open(); + await router.startCapturing("ReadSingleBarcode"); + return { + cameraView, + cameraEnhancer, + router, + }; + } catch (ex: any) { + let errMsg = ex.message || ex; + console.error(errMsg); + alert(errMsg); + throw ex; + } + } + + async destroy(): Promise { + if (this.pInit) { + const { cameraView, cameraEnhancer, router } = await this.pInit; + router.dispose(); + cameraEnhancer.dispose(); + cameraView.dispose(); + } + } + + async componentDidMount() { + // In 'development', React runs setup and cleanup one extra time before the actual setup in Strict Mode. + if (this.pDestroy) { + await this.pDestroy; + this.pInit = this.init(); + } else { + this.pInit = this.init(); + } + } + + async componentWillUnmount() { + await (this.pDestroy = this.destroy()); + console.log("VideoCapture Component Unmount"); + } + + shouldComponentUpdate() { + // Never update UI after mount, sdk use native way to bind event, update will remove it. + return false; + } + + render() { + return ( +
+
+ Results: +

+
+
+ ); + } +} + +export default VideoCapture; diff --git a/hello-world/react/src/cvr.ts b/hello-world/react/src/cvr.ts new file mode 100644 index 00000000..4569f99a --- /dev/null +++ b/hello-world/react/src/cvr.ts @@ -0,0 +1,31 @@ +import { CoreModule } from 'dynamsoft-core'; +import { LicenseManager } from 'dynamsoft-license'; +import 'dynamsoft-barcode-reader'; + +/** LICENSE ALERT - README + * To use the library, you need to first specify a license key using the API "initLicense()" as shown below. + */ + +LicenseManager.initLicense( + 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9' +); + +/** + * You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&product=dbr&package=js to get your own trial license good for 30 days. + * Note that if you downloaded this sample from Dynamsoft while logged in, the above license key may already be your own 30-day trial license. + * For more information, see https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=10.0.20&utm_source=github#specify-the-license or contact support@dynamsoft.com. + * LICENSE ALERT - THE END + */ + +CoreModule.engineResourcePaths = { + std: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.0.0/dist/", + dip: "https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.0.30/dist/", + core: "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.0.32/dist/", + license: "https://cdn.jsdelivr.net/npm/dynamsoft-license@3.0.20/dist/", + cvr: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.0.31/dist/", + dbr: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.0.20/dist/", + dce: "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.1/dist/" +}; + +// Preload "BarcodeReader" module for reading barcodes. It will save time on the initial decoding by skipping the module loading. +CoreModule.loadWasm(['DBR']); \ No newline at end of file diff --git a/1.hello-world/4.read-video-react/src/index.css b/hello-world/react/src/index.css similarity index 100% rename from 1.hello-world/4.read-video-react/src/index.css rename to hello-world/react/src/index.css diff --git a/1.hello-world/4.read-video-react/src/index.tsx b/hello-world/react/src/index.tsx similarity index 100% rename from 1.hello-world/4.read-video-react/src/index.tsx rename to hello-world/react/src/index.tsx diff --git a/1.hello-world/4.read-video-react/src/logo.svg b/hello-world/react/src/logo.svg similarity index 100% rename from 1.hello-world/4.read-video-react/src/logo.svg rename to hello-world/react/src/logo.svg diff --git a/1.hello-world/4.read-video-react/src/react-app-env.d.ts b/hello-world/react/src/react-app-env.d.ts similarity index 100% rename from 1.hello-world/4.read-video-react/src/react-app-env.d.ts rename to hello-world/react/src/react-app-env.d.ts diff --git a/1.hello-world/4.read-video-react/src/reportWebVitals.ts b/hello-world/react/src/reportWebVitals.ts similarity index 100% rename from 1.hello-world/4.read-video-react/src/reportWebVitals.ts rename to hello-world/react/src/reportWebVitals.ts diff --git a/hello-world/react/src/setupTests.ts b/hello-world/react/src/setupTests.ts new file mode 100644 index 00000000..8f2609b7 --- /dev/null +++ b/hello-world/react/src/setupTests.ts @@ -0,0 +1,5 @@ +// jest-dom adds custom jest matchers for asserting on DOM nodes. +// allows you to do things like: +// expect(element).toHaveTextContent(/react/i) +// learn more: https://github.com/testing-library/jest-dom +import '@testing-library/jest-dom'; diff --git a/1.hello-world/4.read-video-react/tsconfig.json b/hello-world/react/tsconfig.json similarity index 100% rename from 1.hello-world/4.read-video-react/tsconfig.json rename to hello-world/react/tsconfig.json diff --git a/hello-world/read-an-image.html b/hello-world/read-an-image.html new file mode 100644 index 00000000..4c614cef --- /dev/null +++ b/hello-world/read-an-image.html @@ -0,0 +1,77 @@ + + + + + + + + + Dynamsoft Barcode Reader Sample - Hello World (Read an Image) + + + + + + + +

Hello World (Read an Image)

+ +
+ + + diff --git a/hello-world/requirejs.html b/hello-world/requirejs.html new file mode 100644 index 00000000..29598640 --- /dev/null +++ b/hello-world/requirejs.html @@ -0,0 +1,157 @@ + + + + + + + + + + Dynamsoft Barcode Reader Sample - Hello World for RequireJS (Decode via + Camera) + + + + + +

Hello World for RequireJS (Decode via Camera)

+
+ Results: +
+
+ + + + diff --git a/1.hello-world/6.read-video-vue3/.gitignore b/hello-world/vue/.gitignore similarity index 100% rename from 1.hello-world/6.read-video-vue3/.gitignore rename to hello-world/vue/.gitignore diff --git a/hello-world/vue/README.md b/hello-world/vue/README.md new file mode 100644 index 00000000..6c01302f --- /dev/null +++ b/hello-world/vue/README.md @@ -0,0 +1,416 @@ +# Hello World Sample for Vue3 + +[Vue 3](https://v3.vuejs.org/) is version 3 of Vue which is a progressive framework for building user interfaces. Check out the following guide on how to implement Dynamsoft Barcode Reader JavaScript SDK (hereafter called "the library") into a Vue 3 application. Note that in this sample, `TypeScript` is used. + +## Official Sample + +* Hello World in Vue 3 - Demo +* Hello World in Vue 3 - Source Code + +## Preparation + +Make sure you have [node](https://nodejs.org/) installed. `node 16.20.1` and `vue 3.3.4` are used in the example below. + +## Create the sample project + +### Create a Bootstrapped Raw Vue Application + +```cmd +npm create vue@3 +# When asked 'Add TypeScript?', select 'Yes'. +``` + +### **CD** to the root directory of the application and install necessary libraries + +```cmd +npm install +npm install dynamsoft-core +npm install dynamsoft-license +npm install dynamsoft-utility +npm install dynamsoft-barcode-reader +npm install dynamsoft-capture-vision-router +npm install dynamsoft-camera-enhancer +``` + +## Start to implement + +### Add file "cvr.ts" under "/src/" to configure libraries + +```typescript +import { CoreModule } from 'dynamsoft-core'; +import { LicenseManager } from 'dynamsoft-license'; +import 'dynamsoft-barcode-reader'; + +/** LICENSE ALERT - README + * To use the library, you need to first specify a license key using the API "initLicense()" as shown below. + */ + +LicenseManager.initLicense( + 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9' +); + +/** + * You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&product=dbr&package=js to get your own trial license good for 30 days. + * Note that if you downloaded this sample from Dynamsoft while logged in, the above license key may already be your own 30-day trial license. + * For more information, see https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=10.0.20&utm_source=github#specify-the-license or contact support@dynamsoft.com. + * LICENSE ALERT - THE END + */ + +CoreModule.engineResourcePaths = { + std: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.0.0/dist/", + dip: "https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.0.30/dist/", + core: "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.0.32/dist/", + license: "https://cdn.jsdelivr.net/npm/dynamsoft-license@3.0.20/dist/", + cvr: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.0.31/dist/", + dbr: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.0.20/dist/", + dce: "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.1/dist/" +}; + +// Preload "BarcodeReader" module for reading barcodes. It will save time on the initial decoding by skipping the module loading. +CoreModule.loadWasm(['DBR']); +``` + +> Note: +> +> * `initLicense()` specify a license key to use the library. You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=sample&product=dbr&package=js to get your own trial license good for 30 days. +> * `engineResourcePaths` tells the library where to get the necessary resources at runtime. + +### Create and edit the `VideoCapture` component + +* Add a file `VideoCapture.vue` under "/components/" as the `VideoCapture` component. The `VideoCapture` component helps decode barcodes via camera. + +* In `VideoCapture.vue`, add the following code for initializing and destroying some instances. + +```vue + + + + + +``` + +### Create and edit the `ImageCapture` component + +* Add a file `ImageCapture.vue` under "/components/" as the `ImageCapture` component. The `ImageCapture` component helps decode barcodes in an image. + +* In `ImageCapture.vue`, add code for initializing and destroying `CaptureVisionRouter` instance. + +```vue + + + + + +``` + +### Add `VideoCapture` and `ImageCapture` components in `HelloWorld.vue` + +```vue + + + + + +``` + +### Add the `HelloWorld` component to `App.vue` + +Edit the file `App.vue` to be like this + +```vue + + + + + +``` + +* Try running the project. + +```cmd +npm run dev +``` + +If you have followed all the steps correctly, you should now have a functioning page that allows you to scan barcodes from a webcam or a built-in camera. Additionally, if you want to decode a local image, click the `Decode Image` button and select the image you want to decode. Any barcodes that are detected will be displayed in a dialog. + +### Comment out the following code in `assets/main.css`. (optional) + +```css +@media (min-width: 1024px) { + /* body { + display: flex; + place-items: center; + } + + #app { + display: grid; + grid-template-columns: 1fr 1fr; + padding: 0 2rem; + } */ +} +``` + +## Project Setup + +```sh +npm install +``` + +### Compile and Hot-Reload for Development + +```sh +npm run dev +``` + +### Type-Check, Compile and Minify for Production + +```sh +npm run build +``` + +## Support + +If you have any questions, feel free to [contact Dynamsoft support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme). diff --git a/1.hello-world/6.read-video-vue3/env.d.ts b/hello-world/vue/env.d.ts similarity index 100% rename from 1.hello-world/6.read-video-vue3/env.d.ts rename to hello-world/vue/env.d.ts diff --git a/hello-world/vue/index.html b/hello-world/vue/index.html new file mode 100644 index 00000000..1016d4ad --- /dev/null +++ b/hello-world/vue/index.html @@ -0,0 +1,16 @@ + + + + + + + + + + Hello World for Vue3 - Dynamsoft Barcode Reader Sample + + +
+ + + diff --git a/hello-world/vue/package.json b/hello-world/vue/package.json new file mode 100644 index 00000000..79dd19d8 --- /dev/null +++ b/hello-world/vue/package.json @@ -0,0 +1,31 @@ +{ + "name": "hello-world", + "version": "0.0.0", + "private": true, + "scripts": { + "dev": "vite", + "build": "run-p type-check \"build-only {@}\" --", + "preview": "vite preview", + "build-only": "vite build", + "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false" + }, + "dependencies": { + "dynamsoft-barcode-reader": "10.0.20", + "dynamsoft-camera-enhancer": "4.0.1", + "dynamsoft-capture-vision-router": "2.0.31", + "dynamsoft-core": "3.0.32", + "dynamsoft-license": "3.0.20", + "dynamsoft-utility": "1.0.21", + "vue": "^3.3.4" + }, + "devDependencies": { + "@tsconfig/node18": "^18.2.2", + "@types/node": "^18.18.5", + "@vitejs/plugin-vue": "^4.4.0", + "@vue/tsconfig": "^0.4.0", + "npm-run-all2": "^6.1.1", + "typescript": "~5.2.0", + "vite": "^4.4.11", + "vue-tsc": "^1.8.19" + } +} diff --git a/1.hello-world/5.read-video-vue/public/favicon.ico b/hello-world/vue/public/favicon.ico similarity index 100% rename from 1.hello-world/5.read-video-vue/public/favicon.ico rename to hello-world/vue/public/favicon.ico diff --git a/1.hello-world/6.read-video-vue3/src/App.vue b/hello-world/vue/src/App.vue similarity index 94% rename from 1.hello-world/6.read-video-vue3/src/App.vue rename to hello-world/vue/src/App.vue index 2bb43cff..992b434f 100644 --- a/1.hello-world/6.read-video-vue3/src/App.vue +++ b/hello-world/vue/src/App.vue @@ -7,4 +7,4 @@ import HelloWorld from './components/HelloWorld.vue' \ No newline at end of file + diff --git a/1.hello-world/6.read-video-vue3/src/assets/base.css b/hello-world/vue/src/assets/base.css similarity index 87% rename from 1.hello-world/6.read-video-vue3/src/assets/base.css rename to hello-world/vue/src/assets/base.css index 71dc55a3..8816868a 100644 --- a/1.hello-world/6.read-video-vue3/src/assets/base.css +++ b/hello-world/vue/src/assets/base.css @@ -55,7 +55,6 @@ *::after { box-sizing: border-box; margin: 0; - position: relative; font-weight: normal; } @@ -63,10 +62,23 @@ body { min-height: 100vh; color: var(--color-text); background: var(--color-background); - transition: color 0.5s, background-color 0.5s; + transition: + color 0.5s, + background-color 0.5s; line-height: 1.6; - font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, - Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-family: + Inter, + -apple-system, + BlinkMacSystemFont, + 'Segoe UI', + Roboto, + Oxygen, + Ubuntu, + Cantarell, + 'Fira Sans', + 'Droid Sans', + 'Helvetica Neue', + sans-serif; font-size: 15px; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; diff --git a/1.hello-world/6.read-video-vue3/src/assets/logo.svg b/hello-world/vue/src/assets/logo.svg similarity index 100% rename from 1.hello-world/6.read-video-vue3/src/assets/logo.svg rename to hello-world/vue/src/assets/logo.svg diff --git a/1.hello-world/6.read-video-vue3/src/assets/main.css b/hello-world/vue/src/assets/main.css similarity index 90% rename from 1.hello-world/6.read-video-vue3/src/assets/main.css rename to hello-world/vue/src/assets/main.css index 4640e164..13879920 100644 --- a/1.hello-world/6.read-video-vue3/src/assets/main.css +++ b/hello-world/vue/src/assets/main.css @@ -15,14 +15,14 @@ a, transition: 0.4s; } -/* @media (hover: hover) { +@media (hover: hover) { a:hover { background-color: hsla(160, 100%, 37%, 0.2); } } @media (min-width: 1024px) { - body { + /* body { display: flex; place-items: center; } @@ -31,5 +31,5 @@ a, display: grid; grid-template-columns: 1fr 1fr; padding: 0 2rem; - } -} */ + } */ +} diff --git a/hello-world/vue/src/components/HelloWorld.vue b/hello-world/vue/src/components/HelloWorld.vue new file mode 100644 index 00000000..3cdf2e6f --- /dev/null +++ b/hello-world/vue/src/components/HelloWorld.vue @@ -0,0 +1,62 @@ + + + + + diff --git a/hello-world/vue/src/components/ImageCapture.vue b/hello-world/vue/src/components/ImageCapture.vue new file mode 100644 index 00000000..d343a623 --- /dev/null +++ b/hello-world/vue/src/components/ImageCapture.vue @@ -0,0 +1,62 @@ + + + + + diff --git a/hello-world/vue/src/components/VideoCapture.vue b/hello-world/vue/src/components/VideoCapture.vue new file mode 100644 index 00000000..cf55e512 --- /dev/null +++ b/hello-world/vue/src/components/VideoCapture.vue @@ -0,0 +1,130 @@ + + + + + diff --git a/hello-world/vue/src/cvr.ts b/hello-world/vue/src/cvr.ts new file mode 100644 index 00000000..35503aab --- /dev/null +++ b/hello-world/vue/src/cvr.ts @@ -0,0 +1,32 @@ +import { CoreModule } from 'dynamsoft-core'; +import { LicenseManager } from 'dynamsoft-license'; +import 'dynamsoft-barcode-reader'; +// import 'dynamsoft-camera-enhancer'; + +/** LICENSE ALERT - README + * To use the library, you need to first specify a license key using the API "initLicense()" as shown below. + */ + +LicenseManager.initLicense( + 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9' +); + +/** + * You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&product=dbr&package=js to get your own trial license good for 30 days. + * Note that if you downloaded this sample from Dynamsoft while logged in, the above license key may already be your own 30-day trial license. + * For more information, see https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=10.0.20&utm_source=github#specify-the-license or contact support@dynamsoft.com. + * LICENSE ALERT - THE END + */ + +CoreModule.engineResourcePaths = { + std: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.0.0/dist/", + dip: "https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.0.30/dist/", + core: "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.0.32/dist/", + license: "https://cdn.jsdelivr.net/npm/dynamsoft-license@3.0.20/dist/", + cvr: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.0.31/dist/", + dbr: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.0.20/dist/", + dce: "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.1/dist/" +}; + +// Preload "BarcodeReader" module for reading barcodes. It will save time on the initial decoding by skipping the module loading. +CoreModule.loadWasm(['DBR']); diff --git a/1.hello-world/6.read-video-vue3/src/main.ts b/hello-world/vue/src/main.ts similarity index 100% rename from 1.hello-world/6.read-video-vue3/src/main.ts rename to hello-world/vue/src/main.ts index 90e6400b..0ac3a5ff 100644 --- a/1.hello-world/6.read-video-vue3/src/main.ts +++ b/hello-world/vue/src/main.ts @@ -1,6 +1,6 @@ +import './assets/main.css' + import { createApp } from 'vue' import App from './App.vue' -import './assets/main.css' - createApp(App).mount('#app') diff --git a/1.hello-world/6.read-video-vue3/tsconfig.json b/hello-world/vue/tsconfig.app.json similarity index 54% rename from 1.hello-world/6.read-video-vue3/tsconfig.json rename to hello-world/vue/tsconfig.app.json index cb2043bc..3e5b621e 100644 --- a/1.hello-world/6.read-video-vue3/tsconfig.json +++ b/hello-world/vue/tsconfig.app.json @@ -1,16 +1,12 @@ { - "extends": "@vue/tsconfig/tsconfig.web.json", + "extends": "@vue/tsconfig/tsconfig.dom.json", "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], + "exclude": ["src/**/__tests__/*"], "compilerOptions": { + "composite": true, "baseUrl": ".", "paths": { "@/*": ["./src/*"] } - }, - - "references": [ - { - "path": "./tsconfig.node.json" - } - ] + } } diff --git a/hello-world/vue/tsconfig.json b/hello-world/vue/tsconfig.json new file mode 100644 index 00000000..66b5e570 --- /dev/null +++ b/hello-world/vue/tsconfig.json @@ -0,0 +1,11 @@ +{ + "files": [], + "references": [ + { + "path": "./tsconfig.node.json" + }, + { + "path": "./tsconfig.app.json" + } + ] +} diff --git a/hello-world/vue/tsconfig.node.json b/hello-world/vue/tsconfig.node.json new file mode 100644 index 00000000..dee96bed --- /dev/null +++ b/hello-world/vue/tsconfig.node.json @@ -0,0 +1,16 @@ +{ + "extends": "@tsconfig/node18/tsconfig.json", + "include": [ + "vite.config.*", + "vitest.config.*", + "cypress.config.*", + "nightwatch.conf.*", + "playwright.config.*" + ], + "compilerOptions": { + "composite": true, + "module": "ESNext", + "moduleResolution": "Bundler", + "types": ["node"] + } +} diff --git a/hello-world/vue/vite.config.js b/hello-world/vue/vite.config.js new file mode 100644 index 00000000..4df2acbd --- /dev/null +++ b/hello-world/vue/vite.config.js @@ -0,0 +1,7 @@ +import { defineConfig } from "vite"; +import vue from "@vitejs/plugin-vue"; + +export default defineConfig({ + base: "", + plugins: [vue()] +}); \ No newline at end of file diff --git a/1.hello-world/14.read-video-webview/android/.gitignore b/hello-world/webview/android/.gitignore similarity index 100% rename from 1.hello-world/14.read-video-webview/android/.gitignore rename to hello-world/webview/android/.gitignore diff --git a/1.hello-world/14.read-video-webview/android/README.md b/hello-world/webview/android/README.md similarity index 100% rename from 1.hello-world/14.read-video-webview/android/README.md rename to hello-world/webview/android/README.md diff --git a/1.hello-world/14.read-video-webview/android/app/.gitignore b/hello-world/webview/android/app/.gitignore similarity index 100% rename from 1.hello-world/14.read-video-webview/android/app/.gitignore rename to hello-world/webview/android/app/.gitignore diff --git a/1.hello-world/14.read-video-webview/android/app/build.gradle b/hello-world/webview/android/app/build.gradle similarity index 100% rename from 1.hello-world/14.read-video-webview/android/app/build.gradle rename to hello-world/webview/android/app/build.gradle diff --git a/1.hello-world/14.read-video-webview/android/app/proguard-rules.pro b/hello-world/webview/android/app/proguard-rules.pro similarity index 100% rename from 1.hello-world/14.read-video-webview/android/app/proguard-rules.pro rename to hello-world/webview/android/app/proguard-rules.pro diff --git a/1.hello-world/14.read-video-webview/android/app/src/main/AndroidManifest.xml b/hello-world/webview/android/app/src/main/AndroidManifest.xml similarity index 100% rename from 1.hello-world/14.read-video-webview/android/app/src/main/AndroidManifest.xml rename to hello-world/webview/android/app/src/main/AndroidManifest.xml diff --git a/hello-world/webview/android/app/src/main/assets/decodeBarcodeInVideo.html b/hello-world/webview/android/app/src/main/assets/decodeBarcodeInVideo.html new file mode 100644 index 00000000..9bfb977b --- /dev/null +++ b/hello-world/webview/android/app/src/main/assets/decodeBarcodeInVideo.html @@ -0,0 +1,103 @@ + + + + + + + + + + Dynamsoft Barcode Reader Sample - Hello World (Decoding via Camera) + + + +

Hello World (Decode via Camera)

+
+ Results: +
+
+ + + + + + + + + + \ No newline at end of file diff --git a/1.hello-world/14.read-video-webview/android/app/src/main/java/com/dynamsoft/dbrjswebview/MainActivity.kt b/hello-world/webview/android/app/src/main/java/com/dynamsoft/dbrjswebview/MainActivity.kt similarity index 100% rename from 1.hello-world/14.read-video-webview/android/app/src/main/java/com/dynamsoft/dbrjswebview/MainActivity.kt rename to hello-world/webview/android/app/src/main/java/com/dynamsoft/dbrjswebview/MainActivity.kt diff --git a/1.hello-world/14.read-video-webview/android/app/src/main/res/drawable-v24/ic_launcher_foreground.xml b/hello-world/webview/android/app/src/main/res/drawable-v24/ic_launcher_foreground.xml similarity index 100% rename from 1.hello-world/14.read-video-webview/android/app/src/main/res/drawable-v24/ic_launcher_foreground.xml rename to hello-world/webview/android/app/src/main/res/drawable-v24/ic_launcher_foreground.xml diff --git a/1.hello-world/14.read-video-webview/android/app/src/main/res/drawable/ic_launcher_background.xml b/hello-world/webview/android/app/src/main/res/drawable/ic_launcher_background.xml similarity index 100% rename from 1.hello-world/14.read-video-webview/android/app/src/main/res/drawable/ic_launcher_background.xml rename to hello-world/webview/android/app/src/main/res/drawable/ic_launcher_background.xml diff --git a/1.hello-world/14.read-video-webview/android/app/src/main/res/layout/activity_main.xml b/hello-world/webview/android/app/src/main/res/layout/activity_main.xml similarity index 100% rename from 1.hello-world/14.read-video-webview/android/app/src/main/res/layout/activity_main.xml rename to hello-world/webview/android/app/src/main/res/layout/activity_main.xml diff --git a/1.hello-world/14.read-video-webview/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml b/hello-world/webview/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml similarity index 100% rename from 1.hello-world/14.read-video-webview/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml rename to hello-world/webview/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml diff --git a/1.hello-world/14.read-video-webview/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml b/hello-world/webview/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml similarity index 100% rename from 1.hello-world/14.read-video-webview/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml rename to hello-world/webview/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml diff --git a/1.hello-world/14.read-video-webview/android/app/src/main/res/mipmap-anydpi-v33/ic_launcher.xml b/hello-world/webview/android/app/src/main/res/mipmap-anydpi-v33/ic_launcher.xml similarity index 100% rename from 1.hello-world/14.read-video-webview/android/app/src/main/res/mipmap-anydpi-v33/ic_launcher.xml rename to hello-world/webview/android/app/src/main/res/mipmap-anydpi-v33/ic_launcher.xml diff --git a/1.hello-world/14.read-video-webview/android/app/src/main/res/mipmap-hdpi/ic_launcher.webp b/hello-world/webview/android/app/src/main/res/mipmap-hdpi/ic_launcher.webp similarity index 100% rename from 1.hello-world/14.read-video-webview/android/app/src/main/res/mipmap-hdpi/ic_launcher.webp rename to hello-world/webview/android/app/src/main/res/mipmap-hdpi/ic_launcher.webp diff --git a/1.hello-world/14.read-video-webview/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.webp b/hello-world/webview/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.webp similarity index 100% rename from 1.hello-world/14.read-video-webview/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.webp rename to hello-world/webview/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.webp diff --git a/1.hello-world/14.read-video-webview/android/app/src/main/res/mipmap-mdpi/ic_launcher.webp b/hello-world/webview/android/app/src/main/res/mipmap-mdpi/ic_launcher.webp similarity index 100% rename from 1.hello-world/14.read-video-webview/android/app/src/main/res/mipmap-mdpi/ic_launcher.webp rename to hello-world/webview/android/app/src/main/res/mipmap-mdpi/ic_launcher.webp diff --git a/1.hello-world/14.read-video-webview/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.webp b/hello-world/webview/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.webp similarity index 100% rename from 1.hello-world/14.read-video-webview/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.webp rename to hello-world/webview/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.webp diff --git a/1.hello-world/14.read-video-webview/android/app/src/main/res/mipmap-xhdpi/ic_launcher.webp b/hello-world/webview/android/app/src/main/res/mipmap-xhdpi/ic_launcher.webp similarity index 100% rename from 1.hello-world/14.read-video-webview/android/app/src/main/res/mipmap-xhdpi/ic_launcher.webp rename to hello-world/webview/android/app/src/main/res/mipmap-xhdpi/ic_launcher.webp diff --git a/1.hello-world/14.read-video-webview/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp b/hello-world/webview/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp similarity index 100% rename from 1.hello-world/14.read-video-webview/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp rename to hello-world/webview/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp diff --git a/1.hello-world/14.read-video-webview/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.webp b/hello-world/webview/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.webp similarity index 100% rename from 1.hello-world/14.read-video-webview/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.webp rename to hello-world/webview/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.webp diff --git a/1.hello-world/14.read-video-webview/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp b/hello-world/webview/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp similarity index 100% rename from 1.hello-world/14.read-video-webview/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp rename to hello-world/webview/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp diff --git a/1.hello-world/14.read-video-webview/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp b/hello-world/webview/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp similarity index 100% rename from 1.hello-world/14.read-video-webview/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp rename to hello-world/webview/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp diff --git a/1.hello-world/14.read-video-webview/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp b/hello-world/webview/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp similarity index 100% rename from 1.hello-world/14.read-video-webview/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp rename to hello-world/webview/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp diff --git a/1.hello-world/14.read-video-webview/android/app/src/main/res/values-night/themes.xml b/hello-world/webview/android/app/src/main/res/values-night/themes.xml similarity index 100% rename from 1.hello-world/14.read-video-webview/android/app/src/main/res/values-night/themes.xml rename to hello-world/webview/android/app/src/main/res/values-night/themes.xml diff --git a/1.hello-world/14.read-video-webview/android/app/src/main/res/values/colors.xml b/hello-world/webview/android/app/src/main/res/values/colors.xml similarity index 100% rename from 1.hello-world/14.read-video-webview/android/app/src/main/res/values/colors.xml rename to hello-world/webview/android/app/src/main/res/values/colors.xml diff --git a/1.hello-world/14.read-video-webview/android/app/src/main/res/values/strings.xml b/hello-world/webview/android/app/src/main/res/values/strings.xml similarity index 100% rename from 1.hello-world/14.read-video-webview/android/app/src/main/res/values/strings.xml rename to hello-world/webview/android/app/src/main/res/values/strings.xml diff --git a/1.hello-world/14.read-video-webview/android/app/src/main/res/values/themes.xml b/hello-world/webview/android/app/src/main/res/values/themes.xml similarity index 100% rename from 1.hello-world/14.read-video-webview/android/app/src/main/res/values/themes.xml rename to hello-world/webview/android/app/src/main/res/values/themes.xml diff --git a/1.hello-world/14.read-video-webview/android/app/src/main/res/xml/backup_rules.xml b/hello-world/webview/android/app/src/main/res/xml/backup_rules.xml similarity index 100% rename from 1.hello-world/14.read-video-webview/android/app/src/main/res/xml/backup_rules.xml rename to hello-world/webview/android/app/src/main/res/xml/backup_rules.xml diff --git a/1.hello-world/14.read-video-webview/android/app/src/main/res/xml/data_extraction_rules.xml b/hello-world/webview/android/app/src/main/res/xml/data_extraction_rules.xml similarity index 100% rename from 1.hello-world/14.read-video-webview/android/app/src/main/res/xml/data_extraction_rules.xml rename to hello-world/webview/android/app/src/main/res/xml/data_extraction_rules.xml diff --git a/1.hello-world/14.read-video-webview/android/build.gradle b/hello-world/webview/android/build.gradle similarity index 100% rename from 1.hello-world/14.read-video-webview/android/build.gradle rename to hello-world/webview/android/build.gradle diff --git a/1.hello-world/14.read-video-webview/android/gradle.properties b/hello-world/webview/android/gradle.properties similarity index 100% rename from 1.hello-world/14.read-video-webview/android/gradle.properties rename to hello-world/webview/android/gradle.properties diff --git a/1.hello-world/14.read-video-webview/android/gradle/wrapper/gradle-wrapper.jar b/hello-world/webview/android/gradle/wrapper/gradle-wrapper.jar similarity index 100% rename from 1.hello-world/14.read-video-webview/android/gradle/wrapper/gradle-wrapper.jar rename to hello-world/webview/android/gradle/wrapper/gradle-wrapper.jar diff --git a/1.hello-world/14.read-video-webview/android/gradle/wrapper/gradle-wrapper.properties b/hello-world/webview/android/gradle/wrapper/gradle-wrapper.properties similarity index 100% rename from 1.hello-world/14.read-video-webview/android/gradle/wrapper/gradle-wrapper.properties rename to hello-world/webview/android/gradle/wrapper/gradle-wrapper.properties diff --git a/1.hello-world/14.read-video-webview/android/gradlew b/hello-world/webview/android/gradlew similarity index 100% rename from 1.hello-world/14.read-video-webview/android/gradlew rename to hello-world/webview/android/gradlew diff --git a/1.hello-world/14.read-video-webview/android/gradlew.bat b/hello-world/webview/android/gradlew.bat similarity index 100% rename from 1.hello-world/14.read-video-webview/android/gradlew.bat rename to hello-world/webview/android/gradlew.bat diff --git a/1.hello-world/14.read-video-webview/android/settings.gradle b/hello-world/webview/android/settings.gradle similarity index 100% rename from 1.hello-world/14.read-video-webview/android/settings.gradle rename to hello-world/webview/android/settings.gradle diff --git a/1.hello-world/14.read-video-webview/ios/.gitignore b/hello-world/webview/ios/.gitignore similarity index 100% rename from 1.hello-world/14.read-video-webview/ios/.gitignore rename to hello-world/webview/ios/.gitignore diff --git a/1.hello-world/14.read-video-webview/ios/README.md b/hello-world/webview/ios/README.md similarity index 100% rename from 1.hello-world/14.read-video-webview/ios/README.md rename to hello-world/webview/ios/README.md diff --git a/1.hello-world/14.read-video-webview/ios/dbrjswebview.xcodeproj/project.pbxproj b/hello-world/webview/ios/dbrjswebview.xcodeproj/project.pbxproj similarity index 100% rename from 1.hello-world/14.read-video-webview/ios/dbrjswebview.xcodeproj/project.pbxproj rename to hello-world/webview/ios/dbrjswebview.xcodeproj/project.pbxproj diff --git a/1.hello-world/14.read-video-webview/ios/dbrjswebview.xcodeproj/project.xcworkspace/contents.xcworkspacedata b/hello-world/webview/ios/dbrjswebview.xcodeproj/project.xcworkspace/contents.xcworkspacedata similarity index 100% rename from 1.hello-world/14.read-video-webview/ios/dbrjswebview.xcodeproj/project.xcworkspace/contents.xcworkspacedata rename to hello-world/webview/ios/dbrjswebview.xcodeproj/project.xcworkspace/contents.xcworkspacedata diff --git a/1.hello-world/14.read-video-webview/ios/dbrjswebview.xcodeproj/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist b/hello-world/webview/ios/dbrjswebview.xcodeproj/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist similarity index 100% rename from 1.hello-world/14.read-video-webview/ios/dbrjswebview.xcodeproj/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist rename to hello-world/webview/ios/dbrjswebview.xcodeproj/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist diff --git a/1.hello-world/14.read-video-webview/ios/dbrjswebview/AppDelegate.swift b/hello-world/webview/ios/dbrjswebview/AppDelegate.swift similarity index 100% rename from 1.hello-world/14.read-video-webview/ios/dbrjswebview/AppDelegate.swift rename to hello-world/webview/ios/dbrjswebview/AppDelegate.swift diff --git a/1.hello-world/14.read-video-webview/ios/dbrjswebview/Assets.xcassets/AccentColor.colorset/Contents.json b/hello-world/webview/ios/dbrjswebview/Assets.xcassets/AccentColor.colorset/Contents.json similarity index 100% rename from 1.hello-world/14.read-video-webview/ios/dbrjswebview/Assets.xcassets/AccentColor.colorset/Contents.json rename to hello-world/webview/ios/dbrjswebview/Assets.xcassets/AccentColor.colorset/Contents.json diff --git a/1.hello-world/14.read-video-webview/ios/dbrjswebview/Assets.xcassets/AppIcon.appiconset/Contents.json b/hello-world/webview/ios/dbrjswebview/Assets.xcassets/AppIcon.appiconset/Contents.json similarity index 100% rename from 1.hello-world/14.read-video-webview/ios/dbrjswebview/Assets.xcassets/AppIcon.appiconset/Contents.json rename to hello-world/webview/ios/dbrjswebview/Assets.xcassets/AppIcon.appiconset/Contents.json diff --git a/1.hello-world/14.read-video-webview/ios/dbrjswebview/Assets.xcassets/Contents.json b/hello-world/webview/ios/dbrjswebview/Assets.xcassets/Contents.json similarity index 100% rename from 1.hello-world/14.read-video-webview/ios/dbrjswebview/Assets.xcassets/Contents.json rename to hello-world/webview/ios/dbrjswebview/Assets.xcassets/Contents.json diff --git a/1.hello-world/14.read-video-webview/ios/dbrjswebview/Base.lproj/LaunchScreen.storyboard b/hello-world/webview/ios/dbrjswebview/Base.lproj/LaunchScreen.storyboard similarity index 100% rename from 1.hello-world/14.read-video-webview/ios/dbrjswebview/Base.lproj/LaunchScreen.storyboard rename to hello-world/webview/ios/dbrjswebview/Base.lproj/LaunchScreen.storyboard diff --git a/1.hello-world/14.read-video-webview/ios/dbrjswebview/Base.lproj/Main.storyboard b/hello-world/webview/ios/dbrjswebview/Base.lproj/Main.storyboard similarity index 100% rename from 1.hello-world/14.read-video-webview/ios/dbrjswebview/Base.lproj/Main.storyboard rename to hello-world/webview/ios/dbrjswebview/Base.lproj/Main.storyboard diff --git a/1.hello-world/14.read-video-webview/ios/dbrjswebview/Info.plist b/hello-world/webview/ios/dbrjswebview/Info.plist similarity index 100% rename from 1.hello-world/14.read-video-webview/ios/dbrjswebview/Info.plist rename to hello-world/webview/ios/dbrjswebview/Info.plist diff --git a/1.hello-world/14.read-video-webview/ios/dbrjswebview/SceneDelegate.swift b/hello-world/webview/ios/dbrjswebview/SceneDelegate.swift similarity index 100% rename from 1.hello-world/14.read-video-webview/ios/dbrjswebview/SceneDelegate.swift rename to hello-world/webview/ios/dbrjswebview/SceneDelegate.swift diff --git a/1.hello-world/14.read-video-webview/ios/dbrjswebview/ViewController.swift b/hello-world/webview/ios/dbrjswebview/ViewController.swift similarity index 100% rename from 1.hello-world/14.read-video-webview/ios/dbrjswebview/ViewController.swift rename to hello-world/webview/ios/dbrjswebview/ViewController.swift diff --git a/hello-world/webview/ios/dbrjswebview/html/decodeFileInVideo.html b/hello-world/webview/ios/dbrjswebview/html/decodeFileInVideo.html new file mode 100644 index 00000000..420ba289 --- /dev/null +++ b/hello-world/webview/ios/dbrjswebview/html/decodeFileInVideo.html @@ -0,0 +1,103 @@ + + + + + + + + + + Dynamsoft Barcode Reader Sample - Hello World (Decoding via Camera) + + + +

Hello World (Decode via Camera)

+
+ Results: +
+
+ + + + + + + + + + diff --git a/index.html b/index.html index e2879dcf..477d6fc8 100644 --- a/index.html +++ b/index.html @@ -20,58 +20,51 @@

Barcode Reader Samples

Hello World
-
Hello World - +
Hello + World +
Read + whether on mobile or desktop." class="button title" href="hello-world/read-an-image.html">Read an Existing Image - +
-
Hello World in +
Hello World in Angular (Angular logo) - +
-
+
Hello World in React (React logo) - +
-
+
Hello World in React(using Hooks)(React logo) - +
-
+
Hello World in - Vue 2 (Vue logo) - - -
-
- Hello World in - Vue 3 (Vue logo) - +
-
+
Hello World in Next.js ( @@ -94,10 +87,10 @@

Barcode Reader Samples

) - +
-
+
Hello World in NuxtJS ( @@ -113,113 +106,57 @@

Barcode Reader Samples

fill="#108775" /> ) - +
-
+
Hello World in Electron (Electron logo) - +
-
Hello World in +
Hello World in PWA - +
-
Hello +
Hello World with RequireJS - +
-
Hello +
Hello World with ES6 - +
-
+
Hello World in WebView - +
-
Customize Camera UI
-
-
Use the Default Camera - UI - -
-
Hide - Display - Controls - -
-
Set Up External Controls - -
-
Changing Size of Video Viewer - -
-
Customize the Camera UI - -
-
-
Parameter Settings
-
-
Formats and - Count - -
-
Localization - and - Binarization - -
-
Blurry - or Small Codes - -
-
Deformed - or Incomplete Codes - -
-
Define or - Detect the - Region - -
-
- Dense Codes - -
-
Use Case
-
Read Video and +
Read Video and Fill a Form - +
Read a + license (AAMVA compliant) and parse it." class="button title" href="use-case/read-a-drivers-license.html">Read a Driver's License - +
-
Show Result Texts on the Video - +
Show Result Texts on the Video +
Others
-
Collect +
Collect Images for Debugging - +
@@ -363,24 +300,20 @@

Barcode Reader Samples

var onlineGuidePath = ""; switch (sampleName) { case "angular": - localPath = "1.hello-world/3.read-video-angular/dist/hello-world/"; - onlineGuidePath = "https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/1.hello-world/3.read-video-angular#readme"; + localPath = "hello-world/angular/dist/angular/"; + onlineGuidePath = "https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world/angular#readme"; break; case "react": - localPath = "1.hello-world/4.read-video-react/build/"; - onlineGuidePath = "https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/1.hello-world/4.read-video-react#readme"; - break; - case "vue2": - localPath = "1.hello-world/5.read-video-vue/dist/"; - onlineGuidePath = "https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/1.hello-world/5.read-video-vue#readme"; + localPath = "hello-world/react/build/"; + onlineGuidePath = "https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world/react#readme"; break; - case "vue3": - localPath = "1.hello-world/6.read-video-vue3/dist/"; - onlineGuidePath = "https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/1.hello-world/6.read-video-vue3#readme"; + case "vue": + localPath = "hello-world/vue/dist/"; + onlineGuidePath = "https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world/vue#readme"; break; case "react_hooks": - localPath = "1.hello-world/13.read-video-react-hooks/build/"; - onlineGuidePath = "https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/1.hello-world/13.read-video-react-hooks#readme"; + localPath = "hello-world/react-hooks/build/"; + onlineGuidePath = "https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world/react-hooks#readme"; break; } if (window.location.protocol === 'file:') { diff --git a/5.others/debug/.gitignore b/others/debug/.gitignore similarity index 100% rename from 5.others/debug/.gitignore rename to others/debug/.gitignore diff --git a/5.others/debug/README.md b/others/debug/README.md similarity index 69% rename from 5.others/debug/README.md rename to others/debug/README.md index ebda10a8..04a2c919 100644 --- a/5.others/debug/README.md +++ b/others/debug/README.md @@ -6,13 +6,13 @@ This sample is designed to: 2. Check if your device and browser are compatible with the camera and to what extent. 3. Collect video frames for analysis. (Require to host the sample locally) -You can directly debug 1 and 2 in this link: [https://dynamsoft.github.io/barcode-reader-javascript-samples/5.others/debug/public/index.html](https://dynamsoft.github.io/barcode-reader-javascript-samples/5.others/debug/public/index.html) +You can directly debug 1 and 2 in this link: [https://dynamsoft.github.io/barcode-reader-javascript-samples/others/debug/public/index.html](https://dynamsoft.github.io/barcode-reader-javascript-samples/others/debug/public/index.html) Item 3 we will introduce in detail. ## Collect the video frames for analysis -Barcode reading is a one-time job, the application either succeeds or fails to read the barcode(s). For the failed scenario, it's possible to make them successful by adjusting the settings provided by the Dynamsoft Barcode Reader JavaScript SDK (hereafter called "the library"). However, adjusting the settings could be a bit overwhelming. Therefore, Dynamsoft offers the debug sample that enables customers to capture and save runtime video frames for sending to the Dynamsoft team. With the original images, the team can test and optimize settings for customers. +Barcode reading is a one-time job, the application either succeeds or fails to read the barcode(s). For the failed scenario, it's possible to make them successful by adjusting the settings provided by the Dynamsoft Capture Vision Router JavaScript SDK. However, adjusting the settings could be a bit overwhelming. Therefore, Dynamsoft offers the debug sample that enables customers to capture and save runtime video frames for sending to the Dynamsoft team. With the original images, the team can test and optimize settings for customers. The following shows how to host the sample and collect frames. @@ -20,7 +20,7 @@ The following shows how to host the sample and collect frames. The sample can be downloaded from -Debug Sample on GitHub +Debug Sample on GitHub Note that the entire folder is required. To download only the files in this folder, try using "https://downgit.github.io/#/home". @@ -52,6 +52,6 @@ Once the server is up and running, open the page on the device that will do the You will see a warning due to self-signing. Please ignore and keep processing. -Click the button "show scanner" and try to read barcodes, the frames will then be uploaded to the folder "debug\public\collect" as images (.png) on the server. When you have collected enough frames, please turn off the scanner, otherwise, new frames will continue to flood in. +Click the button "start capturing" and try to read barcodes, the frames will then be uploaded to the folder "debug\public\collect" as images (.png) on the server. When you have collected enough frames, please click "stop capturing", otherwise, new frames will continue to flood in. Check the images to make sure that they correctly represent the actual usage scenario, then zip and send them to Dynamsoft for technical assistance. diff --git a/5.others/debug/app.js b/others/debug/app.js similarity index 100% rename from 5.others/debug/app.js rename to others/debug/app.js diff --git a/5.others/debug/package.json b/others/debug/package.json similarity index 100% rename from 5.others/debug/package.json rename to others/debug/package.json diff --git a/5.others/debug/pem/ryans-cert.pem b/others/debug/pem/ryans-cert.pem similarity index 100% rename from 5.others/debug/pem/ryans-cert.pem rename to others/debug/pem/ryans-cert.pem diff --git a/5.others/debug/pem/ryans-csr.pem b/others/debug/pem/ryans-csr.pem similarity index 100% rename from 5.others/debug/pem/ryans-csr.pem rename to others/debug/pem/ryans-csr.pem diff --git a/5.others/debug/pem/ryans-key.pem b/others/debug/pem/ryans-key.pem similarity index 100% rename from 5.others/debug/pem/ryans-key.pem rename to others/debug/pem/ryans-key.pem diff --git a/others/debug/public/index.html b/others/debug/public/index.html new file mode 100644 index 00000000..49bf297e --- /dev/null +++ b/others/debug/public/index.html @@ -0,0 +1,254 @@ + + + + + + + + Dynamsoft Barcode Reader Sample - Debug + + + +

Read Barcodes from Camera - Debug

+ + +

+ + + +

+ +
+
+ + + + + + + + + + + diff --git a/4.use-case/README.md b/use-case/README.md similarity index 51% rename from 4.use-case/README.md rename to use-case/README.md index 4381501f..cb15255b 100644 --- a/4.use-case/README.md +++ b/use-case/README.md @@ -2,36 +2,10 @@ It's difficult to type long text on mobile devices, but if that text is encoded in a barcode, we can use the sdk to read the barcode and automatically enter the text. -The following code shows how to automatically invoke the sdk to read a barcode and fill in an input box. - -```html - -``` - -```javascript -let scanner = null; -Dynamsoft.DBR.BarcodeReader.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9'; -(async function () { - document.getElementById("input-to-fill").addEventListener('click', async function () { - try { - scanner = scanner || await Dynamsoft.DBR.BarcodeScanner.createInstance(); - scanner.onUniqueRead = (txt, result) => { - this.value = result.barcodeText; - scanner.hide(); - }; - await scanner.show(); - } catch (ex) { - alert(ex.message); - throw ex; - } - }); -})(); -``` - The following sample demonstrates how to utilize the SDK to fill out form fields. -* Read Barcodes and Fill Form Fields - Demo -* Read Barcodes and Fill Form Fields - Source Code +* Read Barcodes and Fill Form Fields - Demo +* Read Barcodes and Fill Form Fields - Source Code # Read the PDF417 Barcode on the Driver's License @@ -39,8 +13,8 @@ The PDF417 barcode on an AAMVA compatible driver's license contains a lot of inf The following official sample shows how to use the sdk to read and extract driver's license information. -* Read the PDF417 Barcode on the Driver's License - Demo -* Read the PDF417 Barcode on the Driver's License - Source Code +* Read the PDF417 Barcode on the Driver's License - Demo +* Read the PDF417 Barcode on the Driver's License - Source Code Also see [Driver's License Scanner SDK for Mobile and Web](https://www.dynamsoft.com/use-cases/driver-license/). @@ -50,8 +24,8 @@ When the SDK picks up a barcode in video stream, it will highlight them with bui The following official sample shows how to show result texts on the video. -* Read barcodes via camera and show result texts on the video - Demo -* Read barcodes via camera and show result texts on the video - Source Code +* Read barcodes via camera and show result texts on the video - Demo +* Read barcodes via camera and show result texts on the video - Source Code ## Support diff --git a/4.use-case/SampleDriversLicense.jpg b/use-case/SampleDriversLicense.jpg similarity index 100% rename from 4.use-case/SampleDriversLicense.jpg rename to use-case/SampleDriversLicense.jpg diff --git a/use-case/fill-a-form-with-barcode-reading.html b/use-case/fill-a-form-with-barcode-reading.html new file mode 100644 index 00000000..e2265ac5 --- /dev/null +++ b/use-case/fill-a-form-with-barcode-reading.html @@ -0,0 +1,220 @@ + + + + + + + + + + Dynamsoft Barcode Reader Simple Sample - Read Video - Fill Form + + + + + + + + + + +

Read Barcodes as Input

+ + Loading Library... + + + + + diff --git a/use-case/read-a-drivers-license.html b/use-case/read-a-drivers-license.html new file mode 100644 index 00000000..abcb8cd4 --- /dev/null +++ b/use-case/read-a-drivers-license.html @@ -0,0 +1,543 @@ + + + + + + + + + Dynamsoft Barcode Reader Simple Sample - Read Driver License + + + + + + + + + + + + Aim at the barcode on the driver's license. +

Read A Driver's License

+
+ + + + +
+ Can't get scanning result for a long time? +

+ After setting the + singleFrameMode as true, you can + open the camera to shoot (mobile device) or choose from local to get a + high-definition picture for recognition. + Have a try +

+ + + + +
+
+
+ + + +
+
+
+
+ Results: + + + + +
+
+
+ + + + diff --git a/use-case/show-result-texts-on-the-video.html b/use-case/show-result-texts-on-the-video.html new file mode 100644 index 00000000..daa95038 --- /dev/null +++ b/use-case/show-result-texts-on-the-video.html @@ -0,0 +1,206 @@ + + + + + + + + + + Dynamsoft Barcode Reader Sample - Show Result Texts on the Video + + + + + + + + + + +
+
+ + + +