clean history

Author: Keillion

.github/workflows/main.yml

@@ -0,0 +1,36 @@
+# This is a basic workflow to help you get started with Actions
+
+name: CI
+
+# Controls when the workflow will run
+on:
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# A workflow run is made up of one or more jobs that can run sequentially or in parallel
+jobs:
+  # This workflow contains a single job called "build"
+  Build-Demo:
+    if: ${{ github.ref == 'refs/heads/demo' }}    
+    
+    # The type of runner that the job will run on
+    runs-on: self-hosted
+
+    # Steps represent a sequence of tasks that will be executed as part of the job
+    steps:
+         # Runs a set of commands using the runners shell
+      - name: Get Source
+        run: |
+          cd /home/ubuntu
+          [ -d barcode-reader-javascript-samples ] && rm -rf barcode-reader-javascript-samples
+          git clone --depth 1 -b demo https://github.com/Dynamsoft/barcode-reader-javascript-samples.git 
+          
+      - name: Sync files
+        uses: SamKirkland/[email protected]
+        with:
+          server: ${{ secrets.FTP_DEMO_SERVER }}
+          username: ${{ secrets.FTP_DEMO_USERNAME }}
+          password: ${{ secrets.FTP_DEMO_PASSWORD }}
+          port: 21 
+          local-dir: /home/ubuntu/barcode-reader-javascript-samples/
+          server-dir: /Demo.dynamsoft.com/Samples/DBR/JS/

.gitignore

@@ -0,0 +1,45 @@
+.DS_Store
+node_modules
+dist
+build
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+__pycache__
+~~*
+--*
+==*
+package-lock.json
+yarn.lock
+.git
+.npmrc
+/*.zip
+/*.py
+/*.exe
+/*.jar
+/*.md
+/*.json
+/*.js
+/*.txt
+/.gitattributes
+/.*ignore
+
+!bower.json
+!composer.json
+!package.js

README.md

@@ -0,0 +1,48 @@
+# Dynamsoft Barcode Reader samples for the web
+
+This repository contains multiple samples that demonstrates how to use the [Dynamsoft Barcode Reader JavaScript Edition](https://www.dynamsoft.com/barcode-reader/sdk-javascript/?utm_source=sampleReadme) for creating web-based barcode scanning applications.
+
+## Request a trial license
+
+A default license is included which allows you to test the sample apps for up to 24 hours. You can [request a trial license](https://www.dynamsoft.com/customer/license/trialLicense?product=dbr&package=js&utm_source=sampleReadme) via Dynamsoft customer portal to evaluate further.
+
+## 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=10.0.21&utm_source=sampleReadme).
+
+## Support
+
+If you have any questions, feel free to [contact Dynamsoft support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme).
+
+## Sample list
+
+### Hello World
+
+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/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/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://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/others/debug#readme): Collect the actual image frames for debugging purposes.
+
+### Official Online Demo
+- [**Official Online Demo**](https://demo.dynamsoft.com/barcode-reader-js): Official demo for Dynamsoft Barcode Reader JavaScript Edition (written in Vue). Take our barcode scanner demo and see how it works in different modes!

balloon.min.css

@@ -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.2.10#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 `cvRouter` which controls the entire process in three steps:
+  - **Retrieve Images from the Image Source**
+    - `cvRouter` 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
+      cvRouter.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. `cvRouter` starts the process by specifying a preset template "ReadSingleBarcode" with the method `startCapturing()`.
+      ```js
+      cvRouter.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 `cvRouter` via the method `addResultReceiver()`.
+      ```js
+      cvRouter.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 `cvRouter` via the method `addResultFilter()`.
+      ```js
+      cvRouter.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).

favicon.ico

@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

hello-world/README.md

@@ -0,0 +1,44 @@
+# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db
+
+package-lock.json

hello-world/angular/.editorconfig

@@ -0,0 +1,27 @@
+# DbrjsSampleAngular
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.3.7.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.