From 27d46a302ff1902067458ded6ec8a40c7bccc3e7 Mon Sep 17 00:00:00 2001 From: Cube <877211593@qq.com> Date: Thu, 19 Oct 2023 17:32:56 +0800 Subject: [PATCH 01/95] rename 1.hello-world to hello-world --- {1.hello-world => hello-world}/1.hello-world.html | 0 .../10.read-video-pwa/README.md | 0 .../10.read-video-pwa/dynamsoft-192x192.png | Bin .../10.read-video-pwa/dynamsoft-512x512.png | Bin .../10.read-video-pwa/helloworld-pwa.html | 0 .../10.read-video-pwa/helloworld-pwa.json | 0 .../10.read-video-pwa/service-worker.js | 0 .../11.read-video-requirejs.html | 0 .../12.read-video-es6.html | 0 .../13.read-video-react-hooks/.gitignore | 0 .../13.read-video-react-hooks/README.md | 0 .../13.read-video-react-hooks/package.json | 0 .../13.read-video-react-hooks/public/favicon.ico | Bin .../13.read-video-react-hooks/public/index.html | 0 .../13.read-video-react-hooks/public/logo192.png | Bin .../13.read-video-react-hooks/public/logo512.png | Bin .../13.read-video-react-hooks/public/manifest.json | 0 .../13.read-video-react-hooks/public/robots.txt | 0 .../13.read-video-react-hooks/src/App.css | 0 .../13.read-video-react-hooks/src/App.test.tsx | 0 .../13.read-video-react-hooks/src/App.tsx | 0 .../src/components/HelloWorld/HelloWorld.css | 0 .../src/components/HelloWorld/HelloWorld.tsx | 0 .../src/components/ImgDecode/ImgDecode.css | 0 .../src/components/ImgDecode/ImgDecode.tsx | 0 .../src/components/VideoDecode/VideoDecode.css | 0 .../src/components/VideoDecode/VideoDecode.tsx | 0 .../13.read-video-react-hooks/src/dbr.ts | 0 .../13.read-video-react-hooks/src/index.css | 0 .../13.read-video-react-hooks/src/index.tsx | 0 .../13.read-video-react-hooks/src/logo.svg | 0 .../src/react-app-env.d.ts | 0 .../src/reportWebVitals.ts | 0 .../13.read-video-react-hooks/src/setupTests.ts | 0 .../13.read-video-react-hooks/tsconfig.json | 0 .../14.read-video-webview/android/.gitignore | 0 .../14.read-video-webview/android/README.md | 0 .../14.read-video-webview/android/app/.gitignore | 0 .../14.read-video-webview/android/app/build.gradle | 0 .../android/app/proguard-rules.pro | 0 .../android/app/src/main/AndroidManifest.xml | 0 .../app/src/main/assets/decodeBarcodeInVideo.html | 0 .../java/com/dynamsoft/dbrjswebview/MainActivity.kt | 0 .../res/drawable-v24/ic_launcher_foreground.xml | 0 .../main/res/drawable/ic_launcher_background.xml | 0 .../app/src/main/res/layout/activity_main.xml | 0 .../src/main/res/mipmap-anydpi-v26/ic_launcher.xml | 0 .../res/mipmap-anydpi-v26/ic_launcher_round.xml | 0 .../src/main/res/mipmap-anydpi-v33/ic_launcher.xml | 0 .../app/src/main/res/mipmap-hdpi/ic_launcher.webp | Bin .../src/main/res/mipmap-hdpi/ic_launcher_round.webp | Bin .../app/src/main/res/mipmap-mdpi/ic_launcher.webp | Bin .../src/main/res/mipmap-mdpi/ic_launcher_round.webp | Bin .../app/src/main/res/mipmap-xhdpi/ic_launcher.webp | Bin .../main/res/mipmap-xhdpi/ic_launcher_round.webp | Bin .../app/src/main/res/mipmap-xxhdpi/ic_launcher.webp | Bin .../main/res/mipmap-xxhdpi/ic_launcher_round.webp | Bin .../src/main/res/mipmap-xxxhdpi/ic_launcher.webp | Bin .../main/res/mipmap-xxxhdpi/ic_launcher_round.webp | Bin .../app/src/main/res/values-night/themes.xml | 0 .../android/app/src/main/res/values/colors.xml | 0 .../android/app/src/main/res/values/strings.xml | 0 .../android/app/src/main/res/values/themes.xml | 0 .../android/app/src/main/res/xml/backup_rules.xml | 0 .../app/src/main/res/xml/data_extraction_rules.xml | 0 .../14.read-video-webview/android/build.gradle | 0 .../14.read-video-webview/android/gradle.properties | 0 .../android/gradle/wrapper/gradle-wrapper.jar | Bin .../gradle/wrapper/gradle-wrapper.properties | 0 .../14.read-video-webview/android/gradlew | 0 .../14.read-video-webview/android/gradlew.bat | 0 .../14.read-video-webview/android/settings.gradle | 0 .../14.read-video-webview/ios/.gitignore | 0 .../14.read-video-webview/ios/README.md | 0 .../ios/dbrjswebview.xcodeproj/project.pbxproj | 0 .../project.xcworkspace/contents.xcworkspacedata | 0 .../xcshareddata/IDEWorkspaceChecks.plist | 0 .../ios/dbrjswebview/AppDelegate.swift | 0 .../AccentColor.colorset/Contents.json | 0 .../AppIcon.appiconset/Contents.json | 0 .../ios/dbrjswebview/Assets.xcassets/Contents.json | 0 .../dbrjswebview/Base.lproj/LaunchScreen.storyboard | 0 .../ios/dbrjswebview/Base.lproj/Main.storyboard | 0 .../ios/dbrjswebview/Info.plist | 0 .../ios/dbrjswebview/SceneDelegate.swift | 0 .../ios/dbrjswebview/ViewController.swift | 0 .../ios/dbrjswebview/html/decodeFileInVideo.html | 0 {1.hello-world => hello-world}/2.read-an-image.html | 0 .../3.read-video-angular/.editorconfig | 0 .../3.read-video-angular/.gitignore | 0 .../3.read-video-angular/README.md | 0 .../3.read-video-angular/angular.json | 0 .../3.read-video-angular/package.json | 0 .../3.read-video-angular/src/app/app.component.css | 0 .../3.read-video-angular/src/app/app.component.html | 0 .../src/app/app.component.spec.ts | 0 .../3.read-video-angular/src/app/app.component.ts | 0 .../3.read-video-angular/src/app/app.module.ts | 0 .../3.read-video-angular/src/app/dbr.ts | 0 .../src/app/hello-world/hello-world.component.css | 0 .../src/app/hello-world/hello-world.component.html | 0 .../app/hello-world/hello-world.component.spec.ts | 0 .../src/app/hello-world/hello-world.component.ts | 0 .../src/app/img-decode/img-decode.component.css | 0 .../src/app/img-decode/img-decode.component.html | 0 .../src/app/img-decode/img-decode.component.spec.ts | 0 .../src/app/img-decode/img-decode.component.ts | 0 .../src/app/video-decode/video-decode.component.css | 0 .../app/video-decode/video-decode.component.html | 0 .../app/video-decode/video-decode.component.spec.ts | 0 .../src/app/video-decode/video-decode.component.ts | 0 .../3.read-video-angular/src/favicon.ico | Bin .../3.read-video-angular/src/index.html | 0 .../3.read-video-angular/src/main.ts | 0 .../3.read-video-angular/src/styles.css | 0 .../3.read-video-angular/tsconfig.app.json | 0 .../3.read-video-angular/tsconfig.json | 0 .../3.read-video-angular/tsconfig.spec.json | 0 .../4.read-video-react/.gitignore | 0 .../4.read-video-react/README.md | 0 .../4.read-video-react/package.json | 0 .../4.read-video-react/public/favicon.ico | Bin .../4.read-video-react/public/index.html | 0 .../4.read-video-react/src/App.css | 0 .../4.read-video-react/src/App.tsx | 0 .../src/components/HelloWorld/HelloWorld.css | 0 .../src/components/HelloWorld/HelloWorld.tsx | 0 .../src/components/ImgDecode/ImgDecode.css | 0 .../src/components/ImgDecode/ImgDecode.tsx | 0 .../src/components/VideoDecode/VideoDecode.css | 0 .../src/components/VideoDecode/VideoDecode.tsx | 0 .../4.read-video-react/src/dbr.ts | 0 .../4.read-video-react/src/index.css | 0 .../4.read-video-react/src/index.tsx | 0 .../4.read-video-react/src/logo.svg | 0 .../4.read-video-react/src/react-app-env.d.ts | 0 .../4.read-video-react/src/reportWebVitals.ts | 0 .../4.read-video-react/tsconfig.json | 0 .../5.read-video-vue/.gitignore | 0 .../5.read-video-vue/README.md | 0 .../5.read-video-vue/index.html | 0 .../5.read-video-vue/package.json | 0 .../5.read-video-vue/public/favicon.ico | Bin .../5.read-video-vue/src/App.vue | 0 .../5.read-video-vue/src/assets/base.css | 0 .../5.read-video-vue/src/assets/logo.svg | 0 .../5.read-video-vue/src/assets/main.css | 0 .../5.read-video-vue/src/components/HelloWorld.vue | 0 .../5.read-video-vue/src/components/ImgDecode.vue | 0 .../5.read-video-vue/src/components/VideoDecode.vue | 0 .../5.read-video-vue/src/dbr.js | 0 .../5.read-video-vue/src/main.js | 0 .../5.read-video-vue/vite.config.js | 0 .../6.read-video-vue3/.gitignore | 0 .../6.read-video-vue3/README.md | 0 .../6.read-video-vue3/env.d.ts | 0 .../6.read-video-vue3/index.html | 0 .../6.read-video-vue3/package.json | 0 .../6.read-video-vue3/public/favicon.ico | Bin .../6.read-video-vue3/src/App.vue | 0 .../6.read-video-vue3/src/assets/base.css | 0 .../6.read-video-vue3/src/assets/logo.svg | 0 .../6.read-video-vue3/src/assets/main.css | 0 .../6.read-video-vue3/src/components/HelloWorld.vue | 0 .../6.read-video-vue3/src/components/ImgDecode.vue | 0 .../src/components/VideoDecode.vue | 0 .../6.read-video-vue3/src/dbr.ts | 0 .../6.read-video-vue3/src/main.ts | 0 .../6.read-video-vue3/tsconfig.json | 0 .../6.read-video-vue3/tsconfig.node.json | 0 .../6.read-video-vue3/vite.config.ts | 0 .../7.read-video-nextjs/.gitignore | 0 .../7.read-video-nextjs/README.md | 0 .../7.read-video-nextjs/components/HelloWorld.tsx | 0 .../7.read-video-nextjs/components/ImgDecode.tsx | 0 .../7.read-video-nextjs/components/VideoDecode.tsx | 0 .../7.read-video-nextjs/dbr.ts | 0 .../7.read-video-nextjs/next.config.js | 0 .../7.read-video-nextjs/package.json | 0 .../7.read-video-nextjs/pages/_app.tsx | 0 .../7.read-video-nextjs/pages/_document.tsx | 0 .../7.read-video-nextjs/pages/api/hello.ts | 0 .../7.read-video-nextjs/pages/index.tsx | 0 .../7.read-video-nextjs/public/favicon.ico | Bin .../7.read-video-nextjs/public/vercel.svg | 0 .../styles/HelloWorld.module.css | 0 .../7.read-video-nextjs/styles/Home.module.css | 0 .../7.read-video-nextjs/styles/ImgDecode.module.css | 0 .../styles/VideoDecode.module.css | 0 .../7.read-video-nextjs/styles/globals.css | 0 .../7.read-video-nextjs/tsconfig.json | 0 .../8.read-video-nuxtjs/.gitignore | 0 .../8.read-video-nuxtjs/.npmrc | 0 .../8.read-video-nuxtjs/README.md | 0 .../8.read-video-nuxtjs/app.vue | 0 .../8.read-video-nuxtjs/components/HelloWorld.vue | 0 .../8.read-video-nuxtjs/components/ImgDecode.vue | 0 .../8.read-video-nuxtjs/components/VideoDecode.vue | 0 .../8.read-video-nuxtjs/dbr.ts | 0 .../8.read-video-nuxtjs/nuxt.config.ts | 0 .../8.read-video-nuxtjs/package.json | 0 .../8.read-video-nuxtjs/public/favicon.ico | Bin .../8.read-video-nuxtjs/tsconfig.json | 0 .../9.read-video-electron/README.md | 0 .../9.read-video-electron/action.js | 0 .../9.read-video-electron/index.html | 0 .../9.read-video-electron/main.js | 0 .../9.read-video-electron/package.json | 0 .../9.read-video-electron/style.css | 0 {1.hello-world => hello-world}/README.md | 0 210 files changed, 0 insertions(+), 0 deletions(-) rename {1.hello-world => hello-world}/1.hello-world.html (100%) rename {1.hello-world => hello-world}/10.read-video-pwa/README.md (100%) rename {1.hello-world => hello-world}/10.read-video-pwa/dynamsoft-192x192.png (100%) rename {1.hello-world => hello-world}/10.read-video-pwa/dynamsoft-512x512.png (100%) rename {1.hello-world => hello-world}/10.read-video-pwa/helloworld-pwa.html (100%) rename {1.hello-world => hello-world}/10.read-video-pwa/helloworld-pwa.json (100%) rename {1.hello-world => hello-world}/10.read-video-pwa/service-worker.js (100%) rename {1.hello-world => hello-world}/11.read-video-requirejs.html (100%) rename {1.hello-world => hello-world}/12.read-video-es6.html (100%) rename {1.hello-world => hello-world}/13.read-video-react-hooks/.gitignore (100%) rename {1.hello-world => hello-world}/13.read-video-react-hooks/README.md (100%) rename {1.hello-world => hello-world}/13.read-video-react-hooks/package.json (100%) rename {1.hello-world => hello-world}/13.read-video-react-hooks/public/favicon.ico (100%) rename {1.hello-world => hello-world}/13.read-video-react-hooks/public/index.html (100%) rename {1.hello-world => hello-world}/13.read-video-react-hooks/public/logo192.png (100%) rename {1.hello-world => hello-world}/13.read-video-react-hooks/public/logo512.png (100%) rename {1.hello-world => hello-world}/13.read-video-react-hooks/public/manifest.json (100%) rename {1.hello-world => hello-world}/13.read-video-react-hooks/public/robots.txt (100%) rename {1.hello-world => hello-world}/13.read-video-react-hooks/src/App.css (100%) rename {1.hello-world => hello-world}/13.read-video-react-hooks/src/App.test.tsx (100%) rename {1.hello-world => hello-world}/13.read-video-react-hooks/src/App.tsx (100%) rename {1.hello-world => hello-world}/13.read-video-react-hooks/src/components/HelloWorld/HelloWorld.css (100%) rename {1.hello-world => hello-world}/13.read-video-react-hooks/src/components/HelloWorld/HelloWorld.tsx (100%) rename {1.hello-world => hello-world}/13.read-video-react-hooks/src/components/ImgDecode/ImgDecode.css (100%) rename {1.hello-world => hello-world}/13.read-video-react-hooks/src/components/ImgDecode/ImgDecode.tsx (100%) rename {1.hello-world => hello-world}/13.read-video-react-hooks/src/components/VideoDecode/VideoDecode.css (100%) rename {1.hello-world => hello-world}/13.read-video-react-hooks/src/components/VideoDecode/VideoDecode.tsx (100%) rename {1.hello-world => hello-world}/13.read-video-react-hooks/src/dbr.ts (100%) rename {1.hello-world => hello-world}/13.read-video-react-hooks/src/index.css (100%) rename {1.hello-world => hello-world}/13.read-video-react-hooks/src/index.tsx (100%) rename {1.hello-world => hello-world}/13.read-video-react-hooks/src/logo.svg (100%) rename {1.hello-world => hello-world}/13.read-video-react-hooks/src/react-app-env.d.ts (100%) rename {1.hello-world => hello-world}/13.read-video-react-hooks/src/reportWebVitals.ts (100%) rename {1.hello-world => hello-world}/13.read-video-react-hooks/src/setupTests.ts (100%) rename {1.hello-world => hello-world}/13.read-video-react-hooks/tsconfig.json (100%) rename {1.hello-world => hello-world}/14.read-video-webview/android/.gitignore (100%) rename {1.hello-world => hello-world}/14.read-video-webview/android/README.md (100%) rename {1.hello-world => hello-world}/14.read-video-webview/android/app/.gitignore (100%) rename {1.hello-world => hello-world}/14.read-video-webview/android/app/build.gradle (100%) rename {1.hello-world => hello-world}/14.read-video-webview/android/app/proguard-rules.pro (100%) rename {1.hello-world => hello-world}/14.read-video-webview/android/app/src/main/AndroidManifest.xml (100%) rename {1.hello-world => hello-world}/14.read-video-webview/android/app/src/main/assets/decodeBarcodeInVideo.html (100%) rename {1.hello-world => hello-world}/14.read-video-webview/android/app/src/main/java/com/dynamsoft/dbrjswebview/MainActivity.kt (100%) rename {1.hello-world => hello-world}/14.read-video-webview/android/app/src/main/res/drawable-v24/ic_launcher_foreground.xml (100%) rename {1.hello-world => hello-world}/14.read-video-webview/android/app/src/main/res/drawable/ic_launcher_background.xml (100%) rename {1.hello-world => hello-world}/14.read-video-webview/android/app/src/main/res/layout/activity_main.xml (100%) rename {1.hello-world => hello-world}/14.read-video-webview/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml (100%) rename {1.hello-world => hello-world}/14.read-video-webview/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml (100%) rename {1.hello-world => hello-world}/14.read-video-webview/android/app/src/main/res/mipmap-anydpi-v33/ic_launcher.xml (100%) rename {1.hello-world => hello-world}/14.read-video-webview/android/app/src/main/res/mipmap-hdpi/ic_launcher.webp (100%) rename {1.hello-world => hello-world}/14.read-video-webview/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.webp (100%) rename {1.hello-world => hello-world}/14.read-video-webview/android/app/src/main/res/mipmap-mdpi/ic_launcher.webp (100%) rename {1.hello-world => hello-world}/14.read-video-webview/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.webp (100%) rename {1.hello-world => hello-world}/14.read-video-webview/android/app/src/main/res/mipmap-xhdpi/ic_launcher.webp (100%) rename {1.hello-world => hello-world}/14.read-video-webview/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp (100%) rename {1.hello-world => hello-world}/14.read-video-webview/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.webp (100%) rename {1.hello-world => hello-world}/14.read-video-webview/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp (100%) rename {1.hello-world => hello-world}/14.read-video-webview/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp (100%) rename {1.hello-world => hello-world}/14.read-video-webview/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp (100%) rename {1.hello-world => hello-world}/14.read-video-webview/android/app/src/main/res/values-night/themes.xml (100%) rename {1.hello-world => hello-world}/14.read-video-webview/android/app/src/main/res/values/colors.xml (100%) rename {1.hello-world => hello-world}/14.read-video-webview/android/app/src/main/res/values/strings.xml (100%) rename {1.hello-world => hello-world}/14.read-video-webview/android/app/src/main/res/values/themes.xml (100%) rename {1.hello-world => hello-world}/14.read-video-webview/android/app/src/main/res/xml/backup_rules.xml (100%) rename {1.hello-world => hello-world}/14.read-video-webview/android/app/src/main/res/xml/data_extraction_rules.xml (100%) rename {1.hello-world => hello-world}/14.read-video-webview/android/build.gradle (100%) rename {1.hello-world => hello-world}/14.read-video-webview/android/gradle.properties (100%) rename {1.hello-world => hello-world}/14.read-video-webview/android/gradle/wrapper/gradle-wrapper.jar (100%) rename {1.hello-world => hello-world}/14.read-video-webview/android/gradle/wrapper/gradle-wrapper.properties (100%) rename {1.hello-world => hello-world}/14.read-video-webview/android/gradlew (100%) rename {1.hello-world => hello-world}/14.read-video-webview/android/gradlew.bat (100%) rename {1.hello-world => hello-world}/14.read-video-webview/android/settings.gradle (100%) rename {1.hello-world => hello-world}/14.read-video-webview/ios/.gitignore (100%) rename {1.hello-world => hello-world}/14.read-video-webview/ios/README.md (100%) rename {1.hello-world => hello-world}/14.read-video-webview/ios/dbrjswebview.xcodeproj/project.pbxproj (100%) rename {1.hello-world => hello-world}/14.read-video-webview/ios/dbrjswebview.xcodeproj/project.xcworkspace/contents.xcworkspacedata (100%) rename {1.hello-world => hello-world}/14.read-video-webview/ios/dbrjswebview.xcodeproj/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist (100%) rename {1.hello-world => hello-world}/14.read-video-webview/ios/dbrjswebview/AppDelegate.swift (100%) rename {1.hello-world => hello-world}/14.read-video-webview/ios/dbrjswebview/Assets.xcassets/AccentColor.colorset/Contents.json (100%) rename {1.hello-world => hello-world}/14.read-video-webview/ios/dbrjswebview/Assets.xcassets/AppIcon.appiconset/Contents.json (100%) rename {1.hello-world => hello-world}/14.read-video-webview/ios/dbrjswebview/Assets.xcassets/Contents.json (100%) rename {1.hello-world => hello-world}/14.read-video-webview/ios/dbrjswebview/Base.lproj/LaunchScreen.storyboard (100%) rename {1.hello-world => hello-world}/14.read-video-webview/ios/dbrjswebview/Base.lproj/Main.storyboard (100%) rename {1.hello-world => hello-world}/14.read-video-webview/ios/dbrjswebview/Info.plist (100%) rename {1.hello-world => hello-world}/14.read-video-webview/ios/dbrjswebview/SceneDelegate.swift (100%) rename {1.hello-world => hello-world}/14.read-video-webview/ios/dbrjswebview/ViewController.swift (100%) rename {1.hello-world => hello-world}/14.read-video-webview/ios/dbrjswebview/html/decodeFileInVideo.html (100%) rename {1.hello-world => hello-world}/2.read-an-image.html (100%) rename {1.hello-world => hello-world}/3.read-video-angular/.editorconfig (100%) rename {1.hello-world => hello-world}/3.read-video-angular/.gitignore (100%) rename {1.hello-world => hello-world}/3.read-video-angular/README.md (100%) rename {1.hello-world => hello-world}/3.read-video-angular/angular.json (100%) rename {1.hello-world => hello-world}/3.read-video-angular/package.json (100%) rename {1.hello-world => hello-world}/3.read-video-angular/src/app/app.component.css (100%) rename {1.hello-world => hello-world}/3.read-video-angular/src/app/app.component.html (100%) rename {1.hello-world => hello-world}/3.read-video-angular/src/app/app.component.spec.ts (100%) rename {1.hello-world => hello-world}/3.read-video-angular/src/app/app.component.ts (100%) rename {1.hello-world => hello-world}/3.read-video-angular/src/app/app.module.ts (100%) rename {1.hello-world => hello-world}/3.read-video-angular/src/app/dbr.ts (100%) rename {1.hello-world => hello-world}/3.read-video-angular/src/app/hello-world/hello-world.component.css (100%) rename {1.hello-world => hello-world}/3.read-video-angular/src/app/hello-world/hello-world.component.html (100%) rename {1.hello-world => hello-world}/3.read-video-angular/src/app/hello-world/hello-world.component.spec.ts (100%) rename {1.hello-world => hello-world}/3.read-video-angular/src/app/hello-world/hello-world.component.ts (100%) rename {1.hello-world => hello-world}/3.read-video-angular/src/app/img-decode/img-decode.component.css (100%) rename {1.hello-world => hello-world}/3.read-video-angular/src/app/img-decode/img-decode.component.html (100%) rename {1.hello-world => hello-world}/3.read-video-angular/src/app/img-decode/img-decode.component.spec.ts (100%) rename {1.hello-world => hello-world}/3.read-video-angular/src/app/img-decode/img-decode.component.ts (100%) rename {1.hello-world => hello-world}/3.read-video-angular/src/app/video-decode/video-decode.component.css (100%) rename {1.hello-world => hello-world}/3.read-video-angular/src/app/video-decode/video-decode.component.html (100%) rename {1.hello-world => hello-world}/3.read-video-angular/src/app/video-decode/video-decode.component.spec.ts (100%) rename {1.hello-world => hello-world}/3.read-video-angular/src/app/video-decode/video-decode.component.ts (100%) rename {1.hello-world => hello-world}/3.read-video-angular/src/favicon.ico (100%) rename {1.hello-world => hello-world}/3.read-video-angular/src/index.html (100%) rename {1.hello-world => hello-world}/3.read-video-angular/src/main.ts (100%) rename {1.hello-world => hello-world}/3.read-video-angular/src/styles.css (100%) rename {1.hello-world => hello-world}/3.read-video-angular/tsconfig.app.json (100%) rename {1.hello-world => hello-world}/3.read-video-angular/tsconfig.json (100%) rename {1.hello-world => hello-world}/3.read-video-angular/tsconfig.spec.json (100%) rename {1.hello-world => hello-world}/4.read-video-react/.gitignore (100%) rename {1.hello-world => hello-world}/4.read-video-react/README.md (100%) rename {1.hello-world => hello-world}/4.read-video-react/package.json (100%) rename {1.hello-world => hello-world}/4.read-video-react/public/favicon.ico (100%) rename {1.hello-world => hello-world}/4.read-video-react/public/index.html (100%) rename {1.hello-world => hello-world}/4.read-video-react/src/App.css (100%) rename {1.hello-world => hello-world}/4.read-video-react/src/App.tsx (100%) rename {1.hello-world => hello-world}/4.read-video-react/src/components/HelloWorld/HelloWorld.css (100%) rename {1.hello-world => hello-world}/4.read-video-react/src/components/HelloWorld/HelloWorld.tsx (100%) rename {1.hello-world => hello-world}/4.read-video-react/src/components/ImgDecode/ImgDecode.css (100%) rename {1.hello-world => hello-world}/4.read-video-react/src/components/ImgDecode/ImgDecode.tsx (100%) rename {1.hello-world => hello-world}/4.read-video-react/src/components/VideoDecode/VideoDecode.css (100%) rename {1.hello-world => hello-world}/4.read-video-react/src/components/VideoDecode/VideoDecode.tsx (100%) rename {1.hello-world => hello-world}/4.read-video-react/src/dbr.ts (100%) rename {1.hello-world => hello-world}/4.read-video-react/src/index.css (100%) rename {1.hello-world => hello-world}/4.read-video-react/src/index.tsx (100%) rename {1.hello-world => hello-world}/4.read-video-react/src/logo.svg (100%) rename {1.hello-world => hello-world}/4.read-video-react/src/react-app-env.d.ts (100%) rename {1.hello-world => hello-world}/4.read-video-react/src/reportWebVitals.ts (100%) rename {1.hello-world => hello-world}/4.read-video-react/tsconfig.json (100%) rename {1.hello-world => hello-world}/5.read-video-vue/.gitignore (100%) rename {1.hello-world => hello-world}/5.read-video-vue/README.md (100%) rename {1.hello-world => hello-world}/5.read-video-vue/index.html (100%) rename {1.hello-world => hello-world}/5.read-video-vue/package.json (100%) rename {1.hello-world => hello-world}/5.read-video-vue/public/favicon.ico (100%) rename {1.hello-world => hello-world}/5.read-video-vue/src/App.vue (100%) rename {1.hello-world => hello-world}/5.read-video-vue/src/assets/base.css (100%) rename {1.hello-world => hello-world}/5.read-video-vue/src/assets/logo.svg (100%) rename {1.hello-world => hello-world}/5.read-video-vue/src/assets/main.css (100%) rename {1.hello-world => hello-world}/5.read-video-vue/src/components/HelloWorld.vue (100%) rename {1.hello-world => hello-world}/5.read-video-vue/src/components/ImgDecode.vue (100%) rename {1.hello-world => hello-world}/5.read-video-vue/src/components/VideoDecode.vue (100%) rename {1.hello-world => hello-world}/5.read-video-vue/src/dbr.js (100%) rename {1.hello-world => hello-world}/5.read-video-vue/src/main.js (100%) rename {1.hello-world => hello-world}/5.read-video-vue/vite.config.js (100%) rename {1.hello-world => hello-world}/6.read-video-vue3/.gitignore (100%) rename {1.hello-world => hello-world}/6.read-video-vue3/README.md (100%) rename {1.hello-world => hello-world}/6.read-video-vue3/env.d.ts (100%) rename {1.hello-world => hello-world}/6.read-video-vue3/index.html (100%) rename {1.hello-world => hello-world}/6.read-video-vue3/package.json (100%) rename {1.hello-world => hello-world}/6.read-video-vue3/public/favicon.ico (100%) rename {1.hello-world => hello-world}/6.read-video-vue3/src/App.vue (100%) rename {1.hello-world => hello-world}/6.read-video-vue3/src/assets/base.css (100%) rename {1.hello-world => hello-world}/6.read-video-vue3/src/assets/logo.svg (100%) rename {1.hello-world => hello-world}/6.read-video-vue3/src/assets/main.css (100%) rename {1.hello-world => hello-world}/6.read-video-vue3/src/components/HelloWorld.vue (100%) rename {1.hello-world => hello-world}/6.read-video-vue3/src/components/ImgDecode.vue (100%) rename {1.hello-world => hello-world}/6.read-video-vue3/src/components/VideoDecode.vue (100%) rename {1.hello-world => hello-world}/6.read-video-vue3/src/dbr.ts (100%) rename {1.hello-world => hello-world}/6.read-video-vue3/src/main.ts (100%) rename {1.hello-world => hello-world}/6.read-video-vue3/tsconfig.json (100%) rename {1.hello-world => hello-world}/6.read-video-vue3/tsconfig.node.json (100%) rename {1.hello-world => hello-world}/6.read-video-vue3/vite.config.ts (100%) rename {1.hello-world => hello-world}/7.read-video-nextjs/.gitignore (100%) rename {1.hello-world => hello-world}/7.read-video-nextjs/README.md (100%) rename {1.hello-world => hello-world}/7.read-video-nextjs/components/HelloWorld.tsx (100%) rename {1.hello-world => hello-world}/7.read-video-nextjs/components/ImgDecode.tsx (100%) rename {1.hello-world => hello-world}/7.read-video-nextjs/components/VideoDecode.tsx (100%) rename {1.hello-world => hello-world}/7.read-video-nextjs/dbr.ts (100%) rename {1.hello-world => hello-world}/7.read-video-nextjs/next.config.js (100%) rename {1.hello-world => hello-world}/7.read-video-nextjs/package.json (100%) rename {1.hello-world => hello-world}/7.read-video-nextjs/pages/_app.tsx (100%) rename {1.hello-world => hello-world}/7.read-video-nextjs/pages/_document.tsx (100%) rename {1.hello-world => hello-world}/7.read-video-nextjs/pages/api/hello.ts (100%) rename {1.hello-world => hello-world}/7.read-video-nextjs/pages/index.tsx (100%) rename {1.hello-world => hello-world}/7.read-video-nextjs/public/favicon.ico (100%) rename {1.hello-world => hello-world}/7.read-video-nextjs/public/vercel.svg (100%) rename {1.hello-world => hello-world}/7.read-video-nextjs/styles/HelloWorld.module.css (100%) rename {1.hello-world => hello-world}/7.read-video-nextjs/styles/Home.module.css (100%) rename {1.hello-world => hello-world}/7.read-video-nextjs/styles/ImgDecode.module.css (100%) rename {1.hello-world => hello-world}/7.read-video-nextjs/styles/VideoDecode.module.css (100%) rename {1.hello-world => hello-world}/7.read-video-nextjs/styles/globals.css (100%) rename {1.hello-world => hello-world}/7.read-video-nextjs/tsconfig.json (100%) rename {1.hello-world => hello-world}/8.read-video-nuxtjs/.gitignore (100%) rename {1.hello-world => hello-world}/8.read-video-nuxtjs/.npmrc (100%) rename {1.hello-world => hello-world}/8.read-video-nuxtjs/README.md (100%) rename {1.hello-world => hello-world}/8.read-video-nuxtjs/app.vue (100%) rename {1.hello-world => hello-world}/8.read-video-nuxtjs/components/HelloWorld.vue (100%) rename {1.hello-world => hello-world}/8.read-video-nuxtjs/components/ImgDecode.vue (100%) rename {1.hello-world => hello-world}/8.read-video-nuxtjs/components/VideoDecode.vue (100%) rename {1.hello-world => hello-world}/8.read-video-nuxtjs/dbr.ts (100%) rename {1.hello-world => hello-world}/8.read-video-nuxtjs/nuxt.config.ts (100%) rename {1.hello-world => hello-world}/8.read-video-nuxtjs/package.json (100%) rename {1.hello-world => hello-world}/8.read-video-nuxtjs/public/favicon.ico (100%) rename {1.hello-world => hello-world}/8.read-video-nuxtjs/tsconfig.json (100%) rename {1.hello-world => hello-world}/9.read-video-electron/README.md (100%) rename {1.hello-world => hello-world}/9.read-video-electron/action.js (100%) rename {1.hello-world => hello-world}/9.read-video-electron/index.html (100%) rename {1.hello-world => hello-world}/9.read-video-electron/main.js (100%) rename {1.hello-world => hello-world}/9.read-video-electron/package.json (100%) rename {1.hello-world => hello-world}/9.read-video-electron/style.css (100%) rename {1.hello-world => hello-world}/README.md (100%) diff --git a/1.hello-world/1.hello-world.html b/hello-world/1.hello-world.html similarity index 100% rename from 1.hello-world/1.hello-world.html rename to hello-world/1.hello-world.html diff --git a/1.hello-world/10.read-video-pwa/README.md b/hello-world/10.read-video-pwa/README.md similarity index 100% rename from 1.hello-world/10.read-video-pwa/README.md rename to hello-world/10.read-video-pwa/README.md diff --git a/1.hello-world/10.read-video-pwa/dynamsoft-192x192.png b/hello-world/10.read-video-pwa/dynamsoft-192x192.png similarity index 100% rename from 1.hello-world/10.read-video-pwa/dynamsoft-192x192.png rename to hello-world/10.read-video-pwa/dynamsoft-192x192.png diff --git a/1.hello-world/10.read-video-pwa/dynamsoft-512x512.png b/hello-world/10.read-video-pwa/dynamsoft-512x512.png similarity index 100% rename from 1.hello-world/10.read-video-pwa/dynamsoft-512x512.png rename to hello-world/10.read-video-pwa/dynamsoft-512x512.png diff --git a/1.hello-world/10.read-video-pwa/helloworld-pwa.html b/hello-world/10.read-video-pwa/helloworld-pwa.html similarity index 100% rename from 1.hello-world/10.read-video-pwa/helloworld-pwa.html rename to hello-world/10.read-video-pwa/helloworld-pwa.html diff --git a/1.hello-world/10.read-video-pwa/helloworld-pwa.json b/hello-world/10.read-video-pwa/helloworld-pwa.json similarity index 100% rename from 1.hello-world/10.read-video-pwa/helloworld-pwa.json rename to hello-world/10.read-video-pwa/helloworld-pwa.json diff --git a/1.hello-world/10.read-video-pwa/service-worker.js b/hello-world/10.read-video-pwa/service-worker.js similarity index 100% rename from 1.hello-world/10.read-video-pwa/service-worker.js rename to hello-world/10.read-video-pwa/service-worker.js diff --git a/1.hello-world/11.read-video-requirejs.html b/hello-world/11.read-video-requirejs.html similarity index 100% rename from 1.hello-world/11.read-video-requirejs.html rename to hello-world/11.read-video-requirejs.html diff --git a/1.hello-world/12.read-video-es6.html b/hello-world/12.read-video-es6.html similarity index 100% rename from 1.hello-world/12.read-video-es6.html rename to hello-world/12.read-video-es6.html diff --git a/1.hello-world/13.read-video-react-hooks/.gitignore b/hello-world/13.read-video-react-hooks/.gitignore similarity index 100% rename from 1.hello-world/13.read-video-react-hooks/.gitignore rename to hello-world/13.read-video-react-hooks/.gitignore diff --git a/1.hello-world/13.read-video-react-hooks/README.md b/hello-world/13.read-video-react-hooks/README.md similarity index 100% rename from 1.hello-world/13.read-video-react-hooks/README.md rename to hello-world/13.read-video-react-hooks/README.md diff --git a/1.hello-world/13.read-video-react-hooks/package.json b/hello-world/13.read-video-react-hooks/package.json similarity index 100% rename from 1.hello-world/13.read-video-react-hooks/package.json rename to hello-world/13.read-video-react-hooks/package.json diff --git a/1.hello-world/13.read-video-react-hooks/public/favicon.ico b/hello-world/13.read-video-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/13.read-video-react-hooks/public/favicon.ico diff --git a/1.hello-world/13.read-video-react-hooks/public/index.html b/hello-world/13.read-video-react-hooks/public/index.html similarity index 100% rename from 1.hello-world/13.read-video-react-hooks/public/index.html rename to hello-world/13.read-video-react-hooks/public/index.html diff --git a/1.hello-world/13.read-video-react-hooks/public/logo192.png b/hello-world/13.read-video-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/13.read-video-react-hooks/public/logo192.png diff --git a/1.hello-world/13.read-video-react-hooks/public/logo512.png b/hello-world/13.read-video-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/13.read-video-react-hooks/public/logo512.png diff --git a/1.hello-world/13.read-video-react-hooks/public/manifest.json b/hello-world/13.read-video-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/13.read-video-react-hooks/public/manifest.json diff --git a/1.hello-world/13.read-video-react-hooks/public/robots.txt b/hello-world/13.read-video-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/13.read-video-react-hooks/public/robots.txt diff --git a/1.hello-world/13.read-video-react-hooks/src/App.css b/hello-world/13.read-video-react-hooks/src/App.css similarity index 100% rename from 1.hello-world/13.read-video-react-hooks/src/App.css rename to hello-world/13.read-video-react-hooks/src/App.css diff --git a/1.hello-world/13.read-video-react-hooks/src/App.test.tsx b/hello-world/13.read-video-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/13.read-video-react-hooks/src/App.test.tsx diff --git a/1.hello-world/13.read-video-react-hooks/src/App.tsx b/hello-world/13.read-video-react-hooks/src/App.tsx similarity index 100% rename from 1.hello-world/13.read-video-react-hooks/src/App.tsx rename to hello-world/13.read-video-react-hooks/src/App.tsx diff --git a/1.hello-world/13.read-video-react-hooks/src/components/HelloWorld/HelloWorld.css b/hello-world/13.read-video-react-hooks/src/components/HelloWorld/HelloWorld.css similarity index 100% rename from 1.hello-world/13.read-video-react-hooks/src/components/HelloWorld/HelloWorld.css rename to hello-world/13.read-video-react-hooks/src/components/HelloWorld/HelloWorld.css diff --git a/1.hello-world/13.read-video-react-hooks/src/components/HelloWorld/HelloWorld.tsx b/hello-world/13.read-video-react-hooks/src/components/HelloWorld/HelloWorld.tsx similarity index 100% rename from 1.hello-world/13.read-video-react-hooks/src/components/HelloWorld/HelloWorld.tsx rename to hello-world/13.read-video-react-hooks/src/components/HelloWorld/HelloWorld.tsx diff --git a/1.hello-world/13.read-video-react-hooks/src/components/ImgDecode/ImgDecode.css b/hello-world/13.read-video-react-hooks/src/components/ImgDecode/ImgDecode.css similarity index 100% rename from 1.hello-world/13.read-video-react-hooks/src/components/ImgDecode/ImgDecode.css rename to hello-world/13.read-video-react-hooks/src/components/ImgDecode/ImgDecode.css diff --git a/1.hello-world/13.read-video-react-hooks/src/components/ImgDecode/ImgDecode.tsx b/hello-world/13.read-video-react-hooks/src/components/ImgDecode/ImgDecode.tsx similarity index 100% rename from 1.hello-world/13.read-video-react-hooks/src/components/ImgDecode/ImgDecode.tsx rename to hello-world/13.read-video-react-hooks/src/components/ImgDecode/ImgDecode.tsx diff --git a/1.hello-world/13.read-video-react-hooks/src/components/VideoDecode/VideoDecode.css b/hello-world/13.read-video-react-hooks/src/components/VideoDecode/VideoDecode.css similarity index 100% rename from 1.hello-world/13.read-video-react-hooks/src/components/VideoDecode/VideoDecode.css rename to hello-world/13.read-video-react-hooks/src/components/VideoDecode/VideoDecode.css diff --git a/1.hello-world/13.read-video-react-hooks/src/components/VideoDecode/VideoDecode.tsx b/hello-world/13.read-video-react-hooks/src/components/VideoDecode/VideoDecode.tsx similarity index 100% rename from 1.hello-world/13.read-video-react-hooks/src/components/VideoDecode/VideoDecode.tsx rename to hello-world/13.read-video-react-hooks/src/components/VideoDecode/VideoDecode.tsx diff --git a/1.hello-world/13.read-video-react-hooks/src/dbr.ts b/hello-world/13.read-video-react-hooks/src/dbr.ts similarity index 100% rename from 1.hello-world/13.read-video-react-hooks/src/dbr.ts rename to hello-world/13.read-video-react-hooks/src/dbr.ts diff --git a/1.hello-world/13.read-video-react-hooks/src/index.css b/hello-world/13.read-video-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/13.read-video-react-hooks/src/index.css diff --git a/1.hello-world/13.read-video-react-hooks/src/index.tsx b/hello-world/13.read-video-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/13.read-video-react-hooks/src/index.tsx diff --git a/1.hello-world/13.read-video-react-hooks/src/logo.svg b/hello-world/13.read-video-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/13.read-video-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/13.read-video-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/13.read-video-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/13.read-video-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/13.read-video-react-hooks/src/reportWebVitals.ts diff --git a/1.hello-world/13.read-video-react-hooks/src/setupTests.ts b/hello-world/13.read-video-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/13.read-video-react-hooks/src/setupTests.ts diff --git a/1.hello-world/13.read-video-react-hooks/tsconfig.json b/hello-world/13.read-video-react-hooks/tsconfig.json similarity index 100% rename from 1.hello-world/13.read-video-react-hooks/tsconfig.json rename to hello-world/13.read-video-react-hooks/tsconfig.json diff --git a/1.hello-world/14.read-video-webview/android/.gitignore b/hello-world/14.read-video-webview/android/.gitignore similarity index 100% rename from 1.hello-world/14.read-video-webview/android/.gitignore rename to hello-world/14.read-video-webview/android/.gitignore diff --git a/1.hello-world/14.read-video-webview/android/README.md b/hello-world/14.read-video-webview/android/README.md similarity index 100% rename from 1.hello-world/14.read-video-webview/android/README.md rename to hello-world/14.read-video-webview/android/README.md diff --git a/1.hello-world/14.read-video-webview/android/app/.gitignore b/hello-world/14.read-video-webview/android/app/.gitignore similarity index 100% rename from 1.hello-world/14.read-video-webview/android/app/.gitignore rename to hello-world/14.read-video-webview/android/app/.gitignore diff --git a/1.hello-world/14.read-video-webview/android/app/build.gradle b/hello-world/14.read-video-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/14.read-video-webview/android/app/build.gradle diff --git a/1.hello-world/14.read-video-webview/android/app/proguard-rules.pro b/hello-world/14.read-video-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/14.read-video-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/14.read-video-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/14.read-video-webview/android/app/src/main/AndroidManifest.xml diff --git a/1.hello-world/14.read-video-webview/android/app/src/main/assets/decodeBarcodeInVideo.html b/hello-world/14.read-video-webview/android/app/src/main/assets/decodeBarcodeInVideo.html similarity index 100% rename from 1.hello-world/14.read-video-webview/android/app/src/main/assets/decodeBarcodeInVideo.html rename to hello-world/14.read-video-webview/android/app/src/main/assets/decodeBarcodeInVideo.html diff --git a/1.hello-world/14.read-video-webview/android/app/src/main/java/com/dynamsoft/dbrjswebview/MainActivity.kt b/hello-world/14.read-video-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/14.read-video-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/14.read-video-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/14.read-video-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/14.read-video-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/14.read-video-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/14.read-video-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/14.read-video-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/14.read-video-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/14.read-video-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/14.read-video-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/14.read-video-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/14.read-video-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/14.read-video-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/14.read-video-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/14.read-video-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/14.read-video-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/14.read-video-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/14.read-video-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/14.read-video-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/14.read-video-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/14.read-video-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/14.read-video-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/14.read-video-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/14.read-video-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/14.read-video-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/14.read-video-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/14.read-video-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/14.read-video-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/14.read-video-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/14.read-video-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/14.read-video-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/14.read-video-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/14.read-video-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/14.read-video-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/14.read-video-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/14.read-video-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/14.read-video-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/14.read-video-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/14.read-video-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/14.read-video-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/14.read-video-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/14.read-video-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/14.read-video-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/14.read-video-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/14.read-video-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/14.read-video-webview/android/build.gradle similarity index 100% rename from 1.hello-world/14.read-video-webview/android/build.gradle rename to hello-world/14.read-video-webview/android/build.gradle diff --git a/1.hello-world/14.read-video-webview/android/gradle.properties b/hello-world/14.read-video-webview/android/gradle.properties similarity index 100% rename from 1.hello-world/14.read-video-webview/android/gradle.properties rename to hello-world/14.read-video-webview/android/gradle.properties diff --git a/1.hello-world/14.read-video-webview/android/gradle/wrapper/gradle-wrapper.jar b/hello-world/14.read-video-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/14.read-video-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/14.read-video-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/14.read-video-webview/android/gradle/wrapper/gradle-wrapper.properties diff --git a/1.hello-world/14.read-video-webview/android/gradlew b/hello-world/14.read-video-webview/android/gradlew similarity index 100% rename from 1.hello-world/14.read-video-webview/android/gradlew rename to hello-world/14.read-video-webview/android/gradlew diff --git a/1.hello-world/14.read-video-webview/android/gradlew.bat b/hello-world/14.read-video-webview/android/gradlew.bat similarity index 100% rename from 1.hello-world/14.read-video-webview/android/gradlew.bat rename to hello-world/14.read-video-webview/android/gradlew.bat diff --git a/1.hello-world/14.read-video-webview/android/settings.gradle b/hello-world/14.read-video-webview/android/settings.gradle similarity index 100% rename from 1.hello-world/14.read-video-webview/android/settings.gradle rename to hello-world/14.read-video-webview/android/settings.gradle diff --git a/1.hello-world/14.read-video-webview/ios/.gitignore b/hello-world/14.read-video-webview/ios/.gitignore similarity index 100% rename from 1.hello-world/14.read-video-webview/ios/.gitignore rename to hello-world/14.read-video-webview/ios/.gitignore diff --git a/1.hello-world/14.read-video-webview/ios/README.md b/hello-world/14.read-video-webview/ios/README.md similarity index 100% rename from 1.hello-world/14.read-video-webview/ios/README.md rename to hello-world/14.read-video-webview/ios/README.md diff --git a/1.hello-world/14.read-video-webview/ios/dbrjswebview.xcodeproj/project.pbxproj b/hello-world/14.read-video-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/14.read-video-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/14.read-video-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/14.read-video-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/14.read-video-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/14.read-video-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/14.read-video-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/14.read-video-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/14.read-video-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/14.read-video-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/14.read-video-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/14.read-video-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/14.read-video-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/14.read-video-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/14.read-video-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/14.read-video-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/14.read-video-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/14.read-video-webview/ios/dbrjswebview/Base.lproj/Main.storyboard diff --git a/1.hello-world/14.read-video-webview/ios/dbrjswebview/Info.plist b/hello-world/14.read-video-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/14.read-video-webview/ios/dbrjswebview/Info.plist diff --git a/1.hello-world/14.read-video-webview/ios/dbrjswebview/SceneDelegate.swift b/hello-world/14.read-video-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/14.read-video-webview/ios/dbrjswebview/SceneDelegate.swift diff --git a/1.hello-world/14.read-video-webview/ios/dbrjswebview/ViewController.swift b/hello-world/14.read-video-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/14.read-video-webview/ios/dbrjswebview/ViewController.swift diff --git a/1.hello-world/14.read-video-webview/ios/dbrjswebview/html/decodeFileInVideo.html b/hello-world/14.read-video-webview/ios/dbrjswebview/html/decodeFileInVideo.html similarity index 100% rename from 1.hello-world/14.read-video-webview/ios/dbrjswebview/html/decodeFileInVideo.html rename to hello-world/14.read-video-webview/ios/dbrjswebview/html/decodeFileInVideo.html diff --git a/1.hello-world/2.read-an-image.html b/hello-world/2.read-an-image.html similarity index 100% rename from 1.hello-world/2.read-an-image.html rename to hello-world/2.read-an-image.html diff --git a/1.hello-world/3.read-video-angular/.editorconfig b/hello-world/3.read-video-angular/.editorconfig similarity index 100% rename from 1.hello-world/3.read-video-angular/.editorconfig rename to hello-world/3.read-video-angular/.editorconfig diff --git a/1.hello-world/3.read-video-angular/.gitignore b/hello-world/3.read-video-angular/.gitignore similarity index 100% rename from 1.hello-world/3.read-video-angular/.gitignore rename to hello-world/3.read-video-angular/.gitignore diff --git a/1.hello-world/3.read-video-angular/README.md b/hello-world/3.read-video-angular/README.md similarity index 100% rename from 1.hello-world/3.read-video-angular/README.md rename to hello-world/3.read-video-angular/README.md diff --git a/1.hello-world/3.read-video-angular/angular.json b/hello-world/3.read-video-angular/angular.json similarity index 100% rename from 1.hello-world/3.read-video-angular/angular.json rename to hello-world/3.read-video-angular/angular.json diff --git a/1.hello-world/3.read-video-angular/package.json b/hello-world/3.read-video-angular/package.json similarity index 100% rename from 1.hello-world/3.read-video-angular/package.json rename to hello-world/3.read-video-angular/package.json diff --git a/1.hello-world/3.read-video-angular/src/app/app.component.css b/hello-world/3.read-video-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/3.read-video-angular/src/app/app.component.css diff --git a/1.hello-world/3.read-video-angular/src/app/app.component.html b/hello-world/3.read-video-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/3.read-video-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/3.read-video-angular/src/app/app.component.spec.ts similarity index 100% rename from 1.hello-world/3.read-video-angular/src/app/app.component.spec.ts rename to hello-world/3.read-video-angular/src/app/app.component.spec.ts diff --git a/1.hello-world/3.read-video-angular/src/app/app.component.ts b/hello-world/3.read-video-angular/src/app/app.component.ts similarity index 100% rename from 1.hello-world/3.read-video-angular/src/app/app.component.ts rename to hello-world/3.read-video-angular/src/app/app.component.ts diff --git a/1.hello-world/3.read-video-angular/src/app/app.module.ts b/hello-world/3.read-video-angular/src/app/app.module.ts similarity index 100% rename from 1.hello-world/3.read-video-angular/src/app/app.module.ts rename to hello-world/3.read-video-angular/src/app/app.module.ts diff --git a/1.hello-world/3.read-video-angular/src/app/dbr.ts b/hello-world/3.read-video-angular/src/app/dbr.ts similarity index 100% rename from 1.hello-world/3.read-video-angular/src/app/dbr.ts rename to hello-world/3.read-video-angular/src/app/dbr.ts diff --git a/1.hello-world/3.read-video-angular/src/app/hello-world/hello-world.component.css b/hello-world/3.read-video-angular/src/app/hello-world/hello-world.component.css similarity index 100% rename from 1.hello-world/3.read-video-angular/src/app/hello-world/hello-world.component.css rename to hello-world/3.read-video-angular/src/app/hello-world/hello-world.component.css diff --git a/1.hello-world/3.read-video-angular/src/app/hello-world/hello-world.component.html b/hello-world/3.read-video-angular/src/app/hello-world/hello-world.component.html similarity index 100% rename from 1.hello-world/3.read-video-angular/src/app/hello-world/hello-world.component.html rename to hello-world/3.read-video-angular/src/app/hello-world/hello-world.component.html diff --git a/1.hello-world/3.read-video-angular/src/app/hello-world/hello-world.component.spec.ts b/hello-world/3.read-video-angular/src/app/hello-world/hello-world.component.spec.ts similarity index 100% rename from 1.hello-world/3.read-video-angular/src/app/hello-world/hello-world.component.spec.ts rename to hello-world/3.read-video-angular/src/app/hello-world/hello-world.component.spec.ts diff --git a/1.hello-world/3.read-video-angular/src/app/hello-world/hello-world.component.ts b/hello-world/3.read-video-angular/src/app/hello-world/hello-world.component.ts similarity index 100% rename from 1.hello-world/3.read-video-angular/src/app/hello-world/hello-world.component.ts rename to hello-world/3.read-video-angular/src/app/hello-world/hello-world.component.ts diff --git a/1.hello-world/3.read-video-angular/src/app/img-decode/img-decode.component.css b/hello-world/3.read-video-angular/src/app/img-decode/img-decode.component.css similarity index 100% rename from 1.hello-world/3.read-video-angular/src/app/img-decode/img-decode.component.css rename to hello-world/3.read-video-angular/src/app/img-decode/img-decode.component.css diff --git a/1.hello-world/3.read-video-angular/src/app/img-decode/img-decode.component.html b/hello-world/3.read-video-angular/src/app/img-decode/img-decode.component.html similarity index 100% rename from 1.hello-world/3.read-video-angular/src/app/img-decode/img-decode.component.html rename to hello-world/3.read-video-angular/src/app/img-decode/img-decode.component.html diff --git a/1.hello-world/3.read-video-angular/src/app/img-decode/img-decode.component.spec.ts b/hello-world/3.read-video-angular/src/app/img-decode/img-decode.component.spec.ts similarity index 100% rename from 1.hello-world/3.read-video-angular/src/app/img-decode/img-decode.component.spec.ts rename to hello-world/3.read-video-angular/src/app/img-decode/img-decode.component.spec.ts diff --git a/1.hello-world/3.read-video-angular/src/app/img-decode/img-decode.component.ts b/hello-world/3.read-video-angular/src/app/img-decode/img-decode.component.ts similarity index 100% rename from 1.hello-world/3.read-video-angular/src/app/img-decode/img-decode.component.ts rename to hello-world/3.read-video-angular/src/app/img-decode/img-decode.component.ts diff --git a/1.hello-world/3.read-video-angular/src/app/video-decode/video-decode.component.css b/hello-world/3.read-video-angular/src/app/video-decode/video-decode.component.css similarity index 100% rename from 1.hello-world/3.read-video-angular/src/app/video-decode/video-decode.component.css rename to hello-world/3.read-video-angular/src/app/video-decode/video-decode.component.css diff --git a/1.hello-world/3.read-video-angular/src/app/video-decode/video-decode.component.html b/hello-world/3.read-video-angular/src/app/video-decode/video-decode.component.html similarity index 100% rename from 1.hello-world/3.read-video-angular/src/app/video-decode/video-decode.component.html rename to hello-world/3.read-video-angular/src/app/video-decode/video-decode.component.html diff --git a/1.hello-world/3.read-video-angular/src/app/video-decode/video-decode.component.spec.ts b/hello-world/3.read-video-angular/src/app/video-decode/video-decode.component.spec.ts similarity index 100% rename from 1.hello-world/3.read-video-angular/src/app/video-decode/video-decode.component.spec.ts rename to hello-world/3.read-video-angular/src/app/video-decode/video-decode.component.spec.ts diff --git a/1.hello-world/3.read-video-angular/src/app/video-decode/video-decode.component.ts b/hello-world/3.read-video-angular/src/app/video-decode/video-decode.component.ts similarity index 100% rename from 1.hello-world/3.read-video-angular/src/app/video-decode/video-decode.component.ts rename to hello-world/3.read-video-angular/src/app/video-decode/video-decode.component.ts diff --git a/1.hello-world/3.read-video-angular/src/favicon.ico b/hello-world/3.read-video-angular/src/favicon.ico similarity index 100% rename from 1.hello-world/3.read-video-angular/src/favicon.ico rename to hello-world/3.read-video-angular/src/favicon.ico diff --git a/1.hello-world/3.read-video-angular/src/index.html b/hello-world/3.read-video-angular/src/index.html similarity index 100% rename from 1.hello-world/3.read-video-angular/src/index.html rename to hello-world/3.read-video-angular/src/index.html diff --git a/1.hello-world/3.read-video-angular/src/main.ts b/hello-world/3.read-video-angular/src/main.ts similarity index 100% rename from 1.hello-world/3.read-video-angular/src/main.ts rename to hello-world/3.read-video-angular/src/main.ts diff --git a/1.hello-world/3.read-video-angular/src/styles.css b/hello-world/3.read-video-angular/src/styles.css similarity index 100% rename from 1.hello-world/3.read-video-angular/src/styles.css rename to hello-world/3.read-video-angular/src/styles.css diff --git a/1.hello-world/3.read-video-angular/tsconfig.app.json b/hello-world/3.read-video-angular/tsconfig.app.json similarity index 100% rename from 1.hello-world/3.read-video-angular/tsconfig.app.json rename to hello-world/3.read-video-angular/tsconfig.app.json diff --git a/1.hello-world/3.read-video-angular/tsconfig.json b/hello-world/3.read-video-angular/tsconfig.json similarity index 100% rename from 1.hello-world/3.read-video-angular/tsconfig.json rename to hello-world/3.read-video-angular/tsconfig.json diff --git a/1.hello-world/3.read-video-angular/tsconfig.spec.json b/hello-world/3.read-video-angular/tsconfig.spec.json similarity index 100% rename from 1.hello-world/3.read-video-angular/tsconfig.spec.json rename to hello-world/3.read-video-angular/tsconfig.spec.json diff --git a/1.hello-world/4.read-video-react/.gitignore b/hello-world/4.read-video-react/.gitignore similarity index 100% rename from 1.hello-world/4.read-video-react/.gitignore rename to hello-world/4.read-video-react/.gitignore diff --git a/1.hello-world/4.read-video-react/README.md b/hello-world/4.read-video-react/README.md similarity index 100% rename from 1.hello-world/4.read-video-react/README.md rename to hello-world/4.read-video-react/README.md diff --git a/1.hello-world/4.read-video-react/package.json b/hello-world/4.read-video-react/package.json similarity index 100% rename from 1.hello-world/4.read-video-react/package.json rename to hello-world/4.read-video-react/package.json diff --git a/1.hello-world/4.read-video-react/public/favicon.ico b/hello-world/4.read-video-react/public/favicon.ico similarity index 100% rename from 1.hello-world/4.read-video-react/public/favicon.ico rename to hello-world/4.read-video-react/public/favicon.ico diff --git a/1.hello-world/4.read-video-react/public/index.html b/hello-world/4.read-video-react/public/index.html similarity index 100% rename from 1.hello-world/4.read-video-react/public/index.html rename to hello-world/4.read-video-react/public/index.html diff --git a/1.hello-world/4.read-video-react/src/App.css b/hello-world/4.read-video-react/src/App.css similarity index 100% rename from 1.hello-world/4.read-video-react/src/App.css rename to hello-world/4.read-video-react/src/App.css diff --git a/1.hello-world/4.read-video-react/src/App.tsx b/hello-world/4.read-video-react/src/App.tsx similarity index 100% rename from 1.hello-world/4.read-video-react/src/App.tsx rename to hello-world/4.read-video-react/src/App.tsx diff --git a/1.hello-world/4.read-video-react/src/components/HelloWorld/HelloWorld.css b/hello-world/4.read-video-react/src/components/HelloWorld/HelloWorld.css similarity index 100% rename from 1.hello-world/4.read-video-react/src/components/HelloWorld/HelloWorld.css rename to hello-world/4.read-video-react/src/components/HelloWorld/HelloWorld.css diff --git a/1.hello-world/4.read-video-react/src/components/HelloWorld/HelloWorld.tsx b/hello-world/4.read-video-react/src/components/HelloWorld/HelloWorld.tsx similarity index 100% rename from 1.hello-world/4.read-video-react/src/components/HelloWorld/HelloWorld.tsx rename to hello-world/4.read-video-react/src/components/HelloWorld/HelloWorld.tsx diff --git a/1.hello-world/4.read-video-react/src/components/ImgDecode/ImgDecode.css b/hello-world/4.read-video-react/src/components/ImgDecode/ImgDecode.css similarity index 100% rename from 1.hello-world/4.read-video-react/src/components/ImgDecode/ImgDecode.css rename to hello-world/4.read-video-react/src/components/ImgDecode/ImgDecode.css diff --git a/1.hello-world/4.read-video-react/src/components/ImgDecode/ImgDecode.tsx b/hello-world/4.read-video-react/src/components/ImgDecode/ImgDecode.tsx similarity index 100% rename from 1.hello-world/4.read-video-react/src/components/ImgDecode/ImgDecode.tsx rename to hello-world/4.read-video-react/src/components/ImgDecode/ImgDecode.tsx diff --git a/1.hello-world/4.read-video-react/src/components/VideoDecode/VideoDecode.css b/hello-world/4.read-video-react/src/components/VideoDecode/VideoDecode.css similarity index 100% rename from 1.hello-world/4.read-video-react/src/components/VideoDecode/VideoDecode.css rename to hello-world/4.read-video-react/src/components/VideoDecode/VideoDecode.css diff --git a/1.hello-world/4.read-video-react/src/components/VideoDecode/VideoDecode.tsx b/hello-world/4.read-video-react/src/components/VideoDecode/VideoDecode.tsx similarity index 100% rename from 1.hello-world/4.read-video-react/src/components/VideoDecode/VideoDecode.tsx rename to hello-world/4.read-video-react/src/components/VideoDecode/VideoDecode.tsx diff --git a/1.hello-world/4.read-video-react/src/dbr.ts b/hello-world/4.read-video-react/src/dbr.ts similarity index 100% rename from 1.hello-world/4.read-video-react/src/dbr.ts rename to hello-world/4.read-video-react/src/dbr.ts diff --git a/1.hello-world/4.read-video-react/src/index.css b/hello-world/4.read-video-react/src/index.css similarity index 100% rename from 1.hello-world/4.read-video-react/src/index.css rename to hello-world/4.read-video-react/src/index.css diff --git a/1.hello-world/4.read-video-react/src/index.tsx b/hello-world/4.read-video-react/src/index.tsx similarity index 100% rename from 1.hello-world/4.read-video-react/src/index.tsx rename to hello-world/4.read-video-react/src/index.tsx diff --git a/1.hello-world/4.read-video-react/src/logo.svg b/hello-world/4.read-video-react/src/logo.svg similarity index 100% rename from 1.hello-world/4.read-video-react/src/logo.svg rename to hello-world/4.read-video-react/src/logo.svg diff --git a/1.hello-world/4.read-video-react/src/react-app-env.d.ts b/hello-world/4.read-video-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/4.read-video-react/src/react-app-env.d.ts diff --git a/1.hello-world/4.read-video-react/src/reportWebVitals.ts b/hello-world/4.read-video-react/src/reportWebVitals.ts similarity index 100% rename from 1.hello-world/4.read-video-react/src/reportWebVitals.ts rename to hello-world/4.read-video-react/src/reportWebVitals.ts diff --git a/1.hello-world/4.read-video-react/tsconfig.json b/hello-world/4.read-video-react/tsconfig.json similarity index 100% rename from 1.hello-world/4.read-video-react/tsconfig.json rename to hello-world/4.read-video-react/tsconfig.json diff --git a/1.hello-world/5.read-video-vue/.gitignore b/hello-world/5.read-video-vue/.gitignore similarity index 100% rename from 1.hello-world/5.read-video-vue/.gitignore rename to hello-world/5.read-video-vue/.gitignore diff --git a/1.hello-world/5.read-video-vue/README.md b/hello-world/5.read-video-vue/README.md similarity index 100% rename from 1.hello-world/5.read-video-vue/README.md rename to hello-world/5.read-video-vue/README.md diff --git a/1.hello-world/5.read-video-vue/index.html b/hello-world/5.read-video-vue/index.html similarity index 100% rename from 1.hello-world/5.read-video-vue/index.html rename to hello-world/5.read-video-vue/index.html diff --git a/1.hello-world/5.read-video-vue/package.json b/hello-world/5.read-video-vue/package.json similarity index 100% rename from 1.hello-world/5.read-video-vue/package.json rename to hello-world/5.read-video-vue/package.json diff --git a/1.hello-world/5.read-video-vue/public/favicon.ico b/hello-world/5.read-video-vue/public/favicon.ico similarity index 100% rename from 1.hello-world/5.read-video-vue/public/favicon.ico rename to hello-world/5.read-video-vue/public/favicon.ico diff --git a/1.hello-world/5.read-video-vue/src/App.vue b/hello-world/5.read-video-vue/src/App.vue similarity index 100% rename from 1.hello-world/5.read-video-vue/src/App.vue rename to hello-world/5.read-video-vue/src/App.vue diff --git a/1.hello-world/5.read-video-vue/src/assets/base.css b/hello-world/5.read-video-vue/src/assets/base.css similarity index 100% rename from 1.hello-world/5.read-video-vue/src/assets/base.css rename to hello-world/5.read-video-vue/src/assets/base.css diff --git a/1.hello-world/5.read-video-vue/src/assets/logo.svg b/hello-world/5.read-video-vue/src/assets/logo.svg similarity index 100% rename from 1.hello-world/5.read-video-vue/src/assets/logo.svg rename to hello-world/5.read-video-vue/src/assets/logo.svg diff --git a/1.hello-world/5.read-video-vue/src/assets/main.css b/hello-world/5.read-video-vue/src/assets/main.css similarity index 100% rename from 1.hello-world/5.read-video-vue/src/assets/main.css rename to hello-world/5.read-video-vue/src/assets/main.css diff --git a/1.hello-world/5.read-video-vue/src/components/HelloWorld.vue b/hello-world/5.read-video-vue/src/components/HelloWorld.vue similarity index 100% rename from 1.hello-world/5.read-video-vue/src/components/HelloWorld.vue rename to hello-world/5.read-video-vue/src/components/HelloWorld.vue diff --git a/1.hello-world/5.read-video-vue/src/components/ImgDecode.vue b/hello-world/5.read-video-vue/src/components/ImgDecode.vue similarity index 100% rename from 1.hello-world/5.read-video-vue/src/components/ImgDecode.vue rename to hello-world/5.read-video-vue/src/components/ImgDecode.vue diff --git a/1.hello-world/5.read-video-vue/src/components/VideoDecode.vue b/hello-world/5.read-video-vue/src/components/VideoDecode.vue similarity index 100% rename from 1.hello-world/5.read-video-vue/src/components/VideoDecode.vue rename to hello-world/5.read-video-vue/src/components/VideoDecode.vue diff --git a/1.hello-world/5.read-video-vue/src/dbr.js b/hello-world/5.read-video-vue/src/dbr.js similarity index 100% rename from 1.hello-world/5.read-video-vue/src/dbr.js rename to hello-world/5.read-video-vue/src/dbr.js diff --git a/1.hello-world/5.read-video-vue/src/main.js b/hello-world/5.read-video-vue/src/main.js similarity index 100% rename from 1.hello-world/5.read-video-vue/src/main.js rename to hello-world/5.read-video-vue/src/main.js diff --git a/1.hello-world/5.read-video-vue/vite.config.js b/hello-world/5.read-video-vue/vite.config.js similarity index 100% rename from 1.hello-world/5.read-video-vue/vite.config.js rename to hello-world/5.read-video-vue/vite.config.js diff --git a/1.hello-world/6.read-video-vue3/.gitignore b/hello-world/6.read-video-vue3/.gitignore similarity index 100% rename from 1.hello-world/6.read-video-vue3/.gitignore rename to hello-world/6.read-video-vue3/.gitignore diff --git a/1.hello-world/6.read-video-vue3/README.md b/hello-world/6.read-video-vue3/README.md similarity index 100% rename from 1.hello-world/6.read-video-vue3/README.md rename to hello-world/6.read-video-vue3/README.md diff --git a/1.hello-world/6.read-video-vue3/env.d.ts b/hello-world/6.read-video-vue3/env.d.ts similarity index 100% rename from 1.hello-world/6.read-video-vue3/env.d.ts rename to hello-world/6.read-video-vue3/env.d.ts diff --git a/1.hello-world/6.read-video-vue3/index.html b/hello-world/6.read-video-vue3/index.html similarity index 100% rename from 1.hello-world/6.read-video-vue3/index.html rename to hello-world/6.read-video-vue3/index.html diff --git a/1.hello-world/6.read-video-vue3/package.json b/hello-world/6.read-video-vue3/package.json similarity index 100% rename from 1.hello-world/6.read-video-vue3/package.json rename to hello-world/6.read-video-vue3/package.json diff --git a/1.hello-world/6.read-video-vue3/public/favicon.ico b/hello-world/6.read-video-vue3/public/favicon.ico similarity index 100% rename from 1.hello-world/6.read-video-vue3/public/favicon.ico rename to hello-world/6.read-video-vue3/public/favicon.ico diff --git a/1.hello-world/6.read-video-vue3/src/App.vue b/hello-world/6.read-video-vue3/src/App.vue similarity index 100% rename from 1.hello-world/6.read-video-vue3/src/App.vue rename to hello-world/6.read-video-vue3/src/App.vue diff --git a/1.hello-world/6.read-video-vue3/src/assets/base.css b/hello-world/6.read-video-vue3/src/assets/base.css similarity index 100% rename from 1.hello-world/6.read-video-vue3/src/assets/base.css rename to hello-world/6.read-video-vue3/src/assets/base.css diff --git a/1.hello-world/6.read-video-vue3/src/assets/logo.svg b/hello-world/6.read-video-vue3/src/assets/logo.svg similarity index 100% rename from 1.hello-world/6.read-video-vue3/src/assets/logo.svg rename to hello-world/6.read-video-vue3/src/assets/logo.svg diff --git a/1.hello-world/6.read-video-vue3/src/assets/main.css b/hello-world/6.read-video-vue3/src/assets/main.css similarity index 100% rename from 1.hello-world/6.read-video-vue3/src/assets/main.css rename to hello-world/6.read-video-vue3/src/assets/main.css diff --git a/1.hello-world/6.read-video-vue3/src/components/HelloWorld.vue b/hello-world/6.read-video-vue3/src/components/HelloWorld.vue similarity index 100% rename from 1.hello-world/6.read-video-vue3/src/components/HelloWorld.vue rename to hello-world/6.read-video-vue3/src/components/HelloWorld.vue diff --git a/1.hello-world/6.read-video-vue3/src/components/ImgDecode.vue b/hello-world/6.read-video-vue3/src/components/ImgDecode.vue similarity index 100% rename from 1.hello-world/6.read-video-vue3/src/components/ImgDecode.vue rename to hello-world/6.read-video-vue3/src/components/ImgDecode.vue diff --git a/1.hello-world/6.read-video-vue3/src/components/VideoDecode.vue b/hello-world/6.read-video-vue3/src/components/VideoDecode.vue similarity index 100% rename from 1.hello-world/6.read-video-vue3/src/components/VideoDecode.vue rename to hello-world/6.read-video-vue3/src/components/VideoDecode.vue diff --git a/1.hello-world/6.read-video-vue3/src/dbr.ts b/hello-world/6.read-video-vue3/src/dbr.ts similarity index 100% rename from 1.hello-world/6.read-video-vue3/src/dbr.ts rename to hello-world/6.read-video-vue3/src/dbr.ts diff --git a/1.hello-world/6.read-video-vue3/src/main.ts b/hello-world/6.read-video-vue3/src/main.ts similarity index 100% rename from 1.hello-world/6.read-video-vue3/src/main.ts rename to hello-world/6.read-video-vue3/src/main.ts diff --git a/1.hello-world/6.read-video-vue3/tsconfig.json b/hello-world/6.read-video-vue3/tsconfig.json similarity index 100% rename from 1.hello-world/6.read-video-vue3/tsconfig.json rename to hello-world/6.read-video-vue3/tsconfig.json diff --git a/1.hello-world/6.read-video-vue3/tsconfig.node.json b/hello-world/6.read-video-vue3/tsconfig.node.json similarity index 100% rename from 1.hello-world/6.read-video-vue3/tsconfig.node.json rename to hello-world/6.read-video-vue3/tsconfig.node.json diff --git a/1.hello-world/6.read-video-vue3/vite.config.ts b/hello-world/6.read-video-vue3/vite.config.ts similarity index 100% rename from 1.hello-world/6.read-video-vue3/vite.config.ts rename to hello-world/6.read-video-vue3/vite.config.ts diff --git a/1.hello-world/7.read-video-nextjs/.gitignore b/hello-world/7.read-video-nextjs/.gitignore similarity index 100% rename from 1.hello-world/7.read-video-nextjs/.gitignore rename to hello-world/7.read-video-nextjs/.gitignore diff --git a/1.hello-world/7.read-video-nextjs/README.md b/hello-world/7.read-video-nextjs/README.md similarity index 100% rename from 1.hello-world/7.read-video-nextjs/README.md rename to hello-world/7.read-video-nextjs/README.md diff --git a/1.hello-world/7.read-video-nextjs/components/HelloWorld.tsx b/hello-world/7.read-video-nextjs/components/HelloWorld.tsx similarity index 100% rename from 1.hello-world/7.read-video-nextjs/components/HelloWorld.tsx rename to hello-world/7.read-video-nextjs/components/HelloWorld.tsx diff --git a/1.hello-world/7.read-video-nextjs/components/ImgDecode.tsx b/hello-world/7.read-video-nextjs/components/ImgDecode.tsx similarity index 100% rename from 1.hello-world/7.read-video-nextjs/components/ImgDecode.tsx rename to hello-world/7.read-video-nextjs/components/ImgDecode.tsx diff --git a/1.hello-world/7.read-video-nextjs/components/VideoDecode.tsx b/hello-world/7.read-video-nextjs/components/VideoDecode.tsx similarity index 100% rename from 1.hello-world/7.read-video-nextjs/components/VideoDecode.tsx rename to hello-world/7.read-video-nextjs/components/VideoDecode.tsx diff --git a/1.hello-world/7.read-video-nextjs/dbr.ts b/hello-world/7.read-video-nextjs/dbr.ts similarity index 100% rename from 1.hello-world/7.read-video-nextjs/dbr.ts rename to hello-world/7.read-video-nextjs/dbr.ts diff --git a/1.hello-world/7.read-video-nextjs/next.config.js b/hello-world/7.read-video-nextjs/next.config.js similarity index 100% rename from 1.hello-world/7.read-video-nextjs/next.config.js rename to hello-world/7.read-video-nextjs/next.config.js diff --git a/1.hello-world/7.read-video-nextjs/package.json b/hello-world/7.read-video-nextjs/package.json similarity index 100% rename from 1.hello-world/7.read-video-nextjs/package.json rename to hello-world/7.read-video-nextjs/package.json diff --git a/1.hello-world/7.read-video-nextjs/pages/_app.tsx b/hello-world/7.read-video-nextjs/pages/_app.tsx similarity index 100% rename from 1.hello-world/7.read-video-nextjs/pages/_app.tsx rename to hello-world/7.read-video-nextjs/pages/_app.tsx diff --git a/1.hello-world/7.read-video-nextjs/pages/_document.tsx b/hello-world/7.read-video-nextjs/pages/_document.tsx similarity index 100% rename from 1.hello-world/7.read-video-nextjs/pages/_document.tsx rename to hello-world/7.read-video-nextjs/pages/_document.tsx diff --git a/1.hello-world/7.read-video-nextjs/pages/api/hello.ts b/hello-world/7.read-video-nextjs/pages/api/hello.ts similarity index 100% rename from 1.hello-world/7.read-video-nextjs/pages/api/hello.ts rename to hello-world/7.read-video-nextjs/pages/api/hello.ts diff --git a/1.hello-world/7.read-video-nextjs/pages/index.tsx b/hello-world/7.read-video-nextjs/pages/index.tsx similarity index 100% rename from 1.hello-world/7.read-video-nextjs/pages/index.tsx rename to hello-world/7.read-video-nextjs/pages/index.tsx diff --git a/1.hello-world/7.read-video-nextjs/public/favicon.ico b/hello-world/7.read-video-nextjs/public/favicon.ico similarity index 100% rename from 1.hello-world/7.read-video-nextjs/public/favicon.ico rename to hello-world/7.read-video-nextjs/public/favicon.ico diff --git a/1.hello-world/7.read-video-nextjs/public/vercel.svg b/hello-world/7.read-video-nextjs/public/vercel.svg similarity index 100% rename from 1.hello-world/7.read-video-nextjs/public/vercel.svg rename to hello-world/7.read-video-nextjs/public/vercel.svg diff --git a/1.hello-world/7.read-video-nextjs/styles/HelloWorld.module.css b/hello-world/7.read-video-nextjs/styles/HelloWorld.module.css similarity index 100% rename from 1.hello-world/7.read-video-nextjs/styles/HelloWorld.module.css rename to hello-world/7.read-video-nextjs/styles/HelloWorld.module.css diff --git a/1.hello-world/7.read-video-nextjs/styles/Home.module.css b/hello-world/7.read-video-nextjs/styles/Home.module.css similarity index 100% rename from 1.hello-world/7.read-video-nextjs/styles/Home.module.css rename to hello-world/7.read-video-nextjs/styles/Home.module.css diff --git a/1.hello-world/7.read-video-nextjs/styles/ImgDecode.module.css b/hello-world/7.read-video-nextjs/styles/ImgDecode.module.css similarity index 100% rename from 1.hello-world/7.read-video-nextjs/styles/ImgDecode.module.css rename to hello-world/7.read-video-nextjs/styles/ImgDecode.module.css diff --git a/1.hello-world/7.read-video-nextjs/styles/VideoDecode.module.css b/hello-world/7.read-video-nextjs/styles/VideoDecode.module.css similarity index 100% rename from 1.hello-world/7.read-video-nextjs/styles/VideoDecode.module.css rename to hello-world/7.read-video-nextjs/styles/VideoDecode.module.css diff --git a/1.hello-world/7.read-video-nextjs/styles/globals.css b/hello-world/7.read-video-nextjs/styles/globals.css similarity index 100% rename from 1.hello-world/7.read-video-nextjs/styles/globals.css rename to hello-world/7.read-video-nextjs/styles/globals.css diff --git a/1.hello-world/7.read-video-nextjs/tsconfig.json b/hello-world/7.read-video-nextjs/tsconfig.json similarity index 100% rename from 1.hello-world/7.read-video-nextjs/tsconfig.json rename to hello-world/7.read-video-nextjs/tsconfig.json diff --git a/1.hello-world/8.read-video-nuxtjs/.gitignore b/hello-world/8.read-video-nuxtjs/.gitignore similarity index 100% rename from 1.hello-world/8.read-video-nuxtjs/.gitignore rename to hello-world/8.read-video-nuxtjs/.gitignore diff --git a/1.hello-world/8.read-video-nuxtjs/.npmrc b/hello-world/8.read-video-nuxtjs/.npmrc similarity index 100% rename from 1.hello-world/8.read-video-nuxtjs/.npmrc rename to hello-world/8.read-video-nuxtjs/.npmrc diff --git a/1.hello-world/8.read-video-nuxtjs/README.md b/hello-world/8.read-video-nuxtjs/README.md similarity index 100% rename from 1.hello-world/8.read-video-nuxtjs/README.md rename to hello-world/8.read-video-nuxtjs/README.md diff --git a/1.hello-world/8.read-video-nuxtjs/app.vue b/hello-world/8.read-video-nuxtjs/app.vue similarity index 100% rename from 1.hello-world/8.read-video-nuxtjs/app.vue rename to hello-world/8.read-video-nuxtjs/app.vue diff --git a/1.hello-world/8.read-video-nuxtjs/components/HelloWorld.vue b/hello-world/8.read-video-nuxtjs/components/HelloWorld.vue similarity index 100% rename from 1.hello-world/8.read-video-nuxtjs/components/HelloWorld.vue rename to hello-world/8.read-video-nuxtjs/components/HelloWorld.vue diff --git a/1.hello-world/8.read-video-nuxtjs/components/ImgDecode.vue b/hello-world/8.read-video-nuxtjs/components/ImgDecode.vue similarity index 100% rename from 1.hello-world/8.read-video-nuxtjs/components/ImgDecode.vue rename to hello-world/8.read-video-nuxtjs/components/ImgDecode.vue diff --git a/1.hello-world/8.read-video-nuxtjs/components/VideoDecode.vue b/hello-world/8.read-video-nuxtjs/components/VideoDecode.vue similarity index 100% rename from 1.hello-world/8.read-video-nuxtjs/components/VideoDecode.vue rename to hello-world/8.read-video-nuxtjs/components/VideoDecode.vue diff --git a/1.hello-world/8.read-video-nuxtjs/dbr.ts b/hello-world/8.read-video-nuxtjs/dbr.ts similarity index 100% rename from 1.hello-world/8.read-video-nuxtjs/dbr.ts rename to hello-world/8.read-video-nuxtjs/dbr.ts diff --git a/1.hello-world/8.read-video-nuxtjs/nuxt.config.ts b/hello-world/8.read-video-nuxtjs/nuxt.config.ts similarity index 100% rename from 1.hello-world/8.read-video-nuxtjs/nuxt.config.ts rename to hello-world/8.read-video-nuxtjs/nuxt.config.ts diff --git a/1.hello-world/8.read-video-nuxtjs/package.json b/hello-world/8.read-video-nuxtjs/package.json similarity index 100% rename from 1.hello-world/8.read-video-nuxtjs/package.json rename to hello-world/8.read-video-nuxtjs/package.json diff --git a/1.hello-world/8.read-video-nuxtjs/public/favicon.ico b/hello-world/8.read-video-nuxtjs/public/favicon.ico similarity index 100% rename from 1.hello-world/8.read-video-nuxtjs/public/favicon.ico rename to hello-world/8.read-video-nuxtjs/public/favicon.ico diff --git a/1.hello-world/8.read-video-nuxtjs/tsconfig.json b/hello-world/8.read-video-nuxtjs/tsconfig.json similarity index 100% rename from 1.hello-world/8.read-video-nuxtjs/tsconfig.json rename to hello-world/8.read-video-nuxtjs/tsconfig.json diff --git a/1.hello-world/9.read-video-electron/README.md b/hello-world/9.read-video-electron/README.md similarity index 100% rename from 1.hello-world/9.read-video-electron/README.md rename to hello-world/9.read-video-electron/README.md diff --git a/1.hello-world/9.read-video-electron/action.js b/hello-world/9.read-video-electron/action.js similarity index 100% rename from 1.hello-world/9.read-video-electron/action.js rename to hello-world/9.read-video-electron/action.js diff --git a/1.hello-world/9.read-video-electron/index.html b/hello-world/9.read-video-electron/index.html similarity index 100% rename from 1.hello-world/9.read-video-electron/index.html rename to hello-world/9.read-video-electron/index.html diff --git a/1.hello-world/9.read-video-electron/main.js b/hello-world/9.read-video-electron/main.js similarity index 100% rename from 1.hello-world/9.read-video-electron/main.js rename to hello-world/9.read-video-electron/main.js diff --git a/1.hello-world/9.read-video-electron/package.json b/hello-world/9.read-video-electron/package.json similarity index 100% rename from 1.hello-world/9.read-video-electron/package.json rename to hello-world/9.read-video-electron/package.json diff --git a/1.hello-world/9.read-video-electron/style.css b/hello-world/9.read-video-electron/style.css similarity index 100% rename from 1.hello-world/9.read-video-electron/style.css rename to hello-world/9.read-video-electron/style.css diff --git a/1.hello-world/README.md b/hello-world/README.md similarity index 100% rename from 1.hello-world/README.md rename to hello-world/README.md From 6ea8493124023632c475a5a19f7a56f66371afda Mon Sep 17 00:00:00 2001 From: Cube <877211593@qq.com> Date: Thu, 19 Oct 2023 17:35:41 +0800 Subject: [PATCH 02/95] rename and update 1.hello-world.html --- hello-world/1.hello-world.html | 79 ----------------------------- hello-world/hello-world.html | 91 ++++++++++++++++++++++++++++++++++ 2 files changed, 91 insertions(+), 79 deletions(-) delete mode 100644 hello-world/1.hello-world.html create mode 100644 hello-world/hello-world.html diff --git a/hello-world/1.hello-world.html b/hello-world/1.hello-world.html deleted file mode 100644 index 5951f8c7..00000000 --- a/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/hello-world/hello-world.html b/hello-world/hello-world.html new file mode 100644 index 00000000..4c9fbcad --- /dev/null +++ b/hello-world/hello-world.html @@ -0,0 +1,91 @@ + + + + + + + + + + Dynamsoft Barcode Reader Sample - Hello World (Decoding via Camera) + + + + + + + + + +
+ + + + From e42659104a905ab2c8f9124a92e27da44d6bbd50 Mon Sep 17 00:00:00 2001 From: Cube <877211593@qq.com> Date: Thu, 19 Oct 2023 17:37:50 +0800 Subject: [PATCH 03/95] Update hello-world.html --- hello-world/hello-world.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/hello-world/hello-world.html b/hello-world/hello-world.html index 4c9fbcad..6eca172c 100644 --- a/hello-world/hello-world.html +++ b/hello-world/hello-world.html @@ -10,7 +10,7 @@ Dynamsoft Barcode Reader Sample - Hello World (Decoding via Camera) From 26d682a55dfff75559e79f557a9e90defab9a64e Mon Sep 17 00:00:00 2001 From: Cube <877211593@qq.com> Date: Fri, 20 Oct 2023 09:56:31 +0800 Subject: [PATCH 04/95] update 12.read-video-es6.html --- .../10.read-video-pwa/helloworld-pwa.html | 2 +- hello-world/11.read-video-requirejs.html | 2 +- hello-world/12.read-video-es6.html | 169 +++++++++++------- hello-world/9.read-video-electron/index.html | 2 +- 4 files changed, 108 insertions(+), 67 deletions(-) diff --git a/hello-world/10.read-video-pwa/helloworld-pwa.html b/hello-world/10.read-video-pwa/helloworld-pwa.html index 792622b4..8754c5d6 100644 --- a/hello-world/10.read-video-pwa/helloworld-pwa.html +++ b/hello-world/10.read-video-pwa/helloworld-pwa.html @@ -24,7 +24,7 @@ <h1 style="font-size: 1.5em;">Hello World for PWA</h1> <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.31/dist/dbr.js"></script> <script> 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/".`; + const message = `The page is opened via file:// and some SDKs may not work properly. Please open the page via https:// or host it on "http://localhost/".`; console.warn(message); alert(message); } diff --git a/hello-world/11.read-video-requirejs.html b/hello-world/11.read-video-requirejs.html index 7fcf1b2e..5ad98d5d 100644 --- a/hello-world/11.read-video-requirejs.html +++ b/hello-world/11.read-video-requirejs.html @@ -14,7 +14,7 @@ <h1 style="font-size: 1.5em;">Hello World for RequireJS</h1> <script src="https://cdn.jsdelivr.net/npm/requirejs@2.3.6/require.js"></script> <script> 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/".`; + const message = `The page is opened via file:// and some SDKs may not work properly. Please open the page via https:// or host it on "http://localhost/".`; console.warn(message); alert(message); } diff --git a/hello-world/12.read-video-es6.html b/hello-world/12.read-video-es6.html index 0ed344a7..9feb5667 100644 --- a/hello-world/12.read-video-es6.html +++ b/hello-world/12.read-video-es6.html @@ -1,77 +1,118 @@ <!DOCTYPE html> <html lang="en"> + <head> + <meta charset="utf-8" /> + <meta name="viewport" content="width=device-width,initial-scale=1.0" /> + <meta + name="description" + content="Quickly read barcodes with Dynamsoft Barcode Reader from a live camera stream." + /> + <meta name="keywords" content="camera based barcode reading" /> + <link + rel="canonical" + href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/hello-world.html" + /> + <title> + Dynamsoft Barcode Reader Sample - Hello World for ES6 (Read Video) + + - - - - - - Dynamsoft Barcode Reader Sample - Hello World (Read Video) - - - -

Hello World for ES6

- Loading... + +
+ - + }; + router.addResultReceiver(resultReceiver); + // Open camera and start scanning. + await cameraEnhancer.open(); + await router.startCapturing("ReadBarcodes_SpeedFirst"); + } 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); + } + })(); + + diff --git a/hello-world/9.read-video-electron/index.html b/hello-world/9.read-video-electron/index.html index 1e2693c9..9b818b02 100644 --- a/hello-world/9.read-video-electron/index.html +++ b/hello-world/9.read-video-electron/index.html @@ -19,7 +19,7 @@

Hello World for Electron

+ + + +
- + }; + router.addResultReceiver(resultReceiver); + // Open camera and start scanning. + await cameraEnhancer.open(); + await router.startCapturing("ReadBarcodes_SpeedFirst"); + } 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); + } + })(); + } + ); + + diff --git a/hello-world/12.read-video-es6.html b/hello-world/12.read-video-es6.html index 9feb5667..cdd86859 100644 --- a/hello-world/12.read-video-es6.html +++ b/hello-world/12.read-video-es6.html @@ -7,7 +7,7 @@ name="description" content="Quickly read barcodes with Dynamsoft Barcode Reader from a live camera stream." /> - + -
+

Hello World for RequireJS (Decode via Camera)

+
+
@@ -90,7 +92,12 @@ // Define a callback for results. const resultReceiver = new CapturedResultReceiver(); resultReceiver.onCapturedResultReceived = (result) => { + const divResultContainer = document.querySelector( + "#div-result-container" + ); + divResultContainer.innerText = "Result:\n"; for (let item of result.items) { + divResultContainer.innerText += item.text + "\n"; console.log(item.text); } }; diff --git a/hello-world/2.read-an-image.html b/hello-world/2.read-an-image.html index e4fe6c7f..df0374e6 100644 --- a/hello-world/2.read-an-image.html +++ b/hello-world/2.read-an-image.html @@ -1,141 +1,73 @@ + + + + + + + Dynamsoft Barcode Reader Sample - Hello World (Read an Image) + + + + - - - - - - Dynamsoft Barcode Reader Sample - Read an Image - - - - -
-

Read Barcode from Images

- - -

Loading...

- -
-

All Results:

-
-
- - + +

Hello World (Read an Image)

+ +
- - + diff --git a/hello-world/hello-world.html b/hello-world/hello-world.html index a0baadf8..95f4ef9a 100644 --- a/hello-world/hello-world.html +++ b/hello-world/hello-world.html @@ -13,17 +13,19 @@ href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/hello-world.html" /> - Dynamsoft Barcode Reader Sample - Hello World (Decoding via Camera) + Dynamsoft Barcode Reader Sample - Hello World (Decode via Camera) - - - + + + -
+

Hello World (Decode via Camera)

+
+
- - - -``` - -> 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 -``` diff --git a/hello-world/5.read-video-vue/index.html b/hello-world/5.read-video-vue/index.html deleted file mode 100644 index 754e99aa..00000000 --- a/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/hello-world/5.read-video-vue/package.json b/hello-world/5.read-video-vue/package.json deleted file mode 100644 index 5209d435..00000000 --- a/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.31", - "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/hello-world/5.read-video-vue/public/favicon.ico b/hello-world/5.read-video-vue/public/favicon.ico deleted file mode 100644 index df36fcfb72584e00488330b560ebcf34a41c64c2..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S diff --git a/hello-world/5.read-video-vue/src/App.vue b/hello-world/5.read-video-vue/src/App.vue deleted file mode 100644 index 8ec216d1..00000000 --- a/hello-world/5.read-video-vue/src/App.vue +++ /dev/null @@ -1,19 +0,0 @@ - - - - - diff --git a/hello-world/5.read-video-vue/src/assets/base.css b/hello-world/5.read-video-vue/src/assets/base.css deleted file mode 100644 index 5427a030..00000000 --- a/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/hello-world/5.read-video-vue/src/assets/logo.svg b/hello-world/5.read-video-vue/src/assets/logo.svg deleted file mode 100644 index bc826fed..00000000 --- a/hello-world/5.read-video-vue/src/assets/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/hello-world/5.read-video-vue/src/assets/main.css b/hello-world/5.read-video-vue/src/assets/main.css deleted file mode 100644 index ce9b7fb8..00000000 --- a/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/hello-world/5.read-video-vue/src/components/HelloWorld.vue b/hello-world/5.read-video-vue/src/components/HelloWorld.vue deleted file mode 100644 index e8926bd7..00000000 --- a/hello-world/5.read-video-vue/src/components/HelloWorld.vue +++ /dev/null @@ -1,94 +0,0 @@ - - - - - - diff --git a/hello-world/5.read-video-vue/src/components/ImgDecode.vue b/hello-world/5.read-video-vue/src/components/ImgDecode.vue deleted file mode 100644 index 59192dac..00000000 --- a/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/hello-world/5.read-video-vue/src/components/VideoDecode.vue b/hello-world/5.read-video-vue/src/components/VideoDecode.vue deleted file mode 100644 index 598e5886..00000000 --- a/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/hello-world/5.read-video-vue/src/dbr.js b/hello-world/5.read-video-vue/src/dbr.js deleted file mode 100644 index f6af1820..00000000 --- a/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.31&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.31/dist/"; diff --git a/hello-world/5.read-video-vue/src/main.js b/hello-world/5.read-video-vue/src/main.js deleted file mode 100644 index c5da47dc..00000000 --- a/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/hello-world/5.read-video-vue/vite.config.js b/hello-world/5.read-video-vue/vite.config.js deleted file mode 100644 index c0d1c6c2..00000000 --- a/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)) - } - } -}) From 32bfba1973dc4d670012a38b8db477d60cacfc1c Mon Sep 17 00:00:00 2001 From: Cube <877211593@qq.com> Date: Mon, 23 Oct 2023 09:42:11 +0800 Subject: [PATCH 09/95] add /angular --- hello-world/3.read-video-angular/README.md | 5 +- .../app/img-decode/img-decode.component.ts | 7 +- hello-world/angular/.editorconfig | 16 +++ hello-world/angular/.gitignore | 42 ++++++++ hello-world/angular/.npmrc | 2 + hello-world/angular/README.md | 27 +++++ hello-world/angular/angular.json | 101 ++++++++++++++++++ hello-world/angular/package.json | 41 +++++++ hello-world/angular/src/app/app.component.css | 0 .../angular/src/app/app.component.html | 1 + .../angular/src/app/app.component.spec.ts | 27 +++++ hello-world/angular/src/app/app.component.ts | 10 ++ hello-world/angular/src/app/app.module.ts | 22 ++++ .../app/hello-world/hello-world.component.css | 27 +++++ .../hello-world/hello-world.component.html | 11 ++ .../hello-world/hello-world.component.spec.ts | 21 ++++ .../app/hello-world/hello-world.component.ts | 26 +++++ .../image-capture/image-capture.component.css | 7 ++ .../image-capture.component.html | 1 + .../image-capture.component.spec.ts | 21 ++++ .../image-capture/image-capture.component.ts | 51 +++++++++ .../video-capture/video-capture.component.css | 4 + .../video-capture.component.html | 1 + .../video-capture.component.spec.ts | 21 ++++ .../video-capture/video-capture.component.ts | 87 +++++++++++++++ hello-world/angular/src/assets/.gitkeep | 0 hello-world/angular/src/cvr.ts | 35 ++++++ hello-world/angular/src/dbr.ts | 3 + hello-world/angular/src/dce.ts | 3 + hello-world/angular/src/favicon.ico | Bin 0 -> 948 bytes hello-world/angular/src/index.html | 13 +++ hello-world/angular/src/main.ts | 7 ++ hello-world/angular/src/styles.css | 1 + hello-world/angular/tsconfig.app.json | 14 +++ hello-world/angular/tsconfig.json | 33 ++++++ hello-world/angular/tsconfig.spec.json | 14 +++ hello-world/hello-world.html | 2 +- hello-world/read-an-image.html | 2 +- hello-world/read-video-es6.html | 6 +- hello-world/read-video-requirejs.html | 2 +- 40 files changed, 704 insertions(+), 10 deletions(-) create mode 100644 hello-world/angular/.editorconfig create mode 100644 hello-world/angular/.gitignore create mode 100644 hello-world/angular/.npmrc create mode 100644 hello-world/angular/README.md create mode 100644 hello-world/angular/angular.json create mode 100644 hello-world/angular/package.json create mode 100644 hello-world/angular/src/app/app.component.css create mode 100644 hello-world/angular/src/app/app.component.html create mode 100644 hello-world/angular/src/app/app.component.spec.ts create mode 100644 hello-world/angular/src/app/app.component.ts create mode 100644 hello-world/angular/src/app/app.module.ts create mode 100644 hello-world/angular/src/app/hello-world/hello-world.component.css create mode 100644 hello-world/angular/src/app/hello-world/hello-world.component.html create mode 100644 hello-world/angular/src/app/hello-world/hello-world.component.spec.ts create mode 100644 hello-world/angular/src/app/hello-world/hello-world.component.ts create mode 100644 hello-world/angular/src/app/image-capture/image-capture.component.css create mode 100644 hello-world/angular/src/app/image-capture/image-capture.component.html create mode 100644 hello-world/angular/src/app/image-capture/image-capture.component.spec.ts create mode 100644 hello-world/angular/src/app/image-capture/image-capture.component.ts create mode 100644 hello-world/angular/src/app/video-capture/video-capture.component.css create mode 100644 hello-world/angular/src/app/video-capture/video-capture.component.html create mode 100644 hello-world/angular/src/app/video-capture/video-capture.component.spec.ts create mode 100644 hello-world/angular/src/app/video-capture/video-capture.component.ts create mode 100644 hello-world/angular/src/assets/.gitkeep create mode 100644 hello-world/angular/src/cvr.ts create mode 100644 hello-world/angular/src/dbr.ts create mode 100644 hello-world/angular/src/dce.ts create mode 100644 hello-world/angular/src/favicon.ico create mode 100644 hello-world/angular/src/index.html create mode 100644 hello-world/angular/src/main.ts create mode 100644 hello-world/angular/src/styles.css create mode 100644 hello-world/angular/tsconfig.app.json create mode 100644 hello-world/angular/tsconfig.json create mode 100644 hello-world/angular/tsconfig.spec.json diff --git a/hello-world/3.read-video-angular/README.md b/hello-world/3.read-video-angular/README.md index 2538e58c..3a74ca71 100644 --- a/hello-world/3.read-video-angular/README.md +++ b/hello-world/3.read-video-angular/README.md @@ -16,13 +16,14 @@ Make sure you have [node](https://nodejs.org/) and [Angular CLI](https://cli.ang ### Create an out-of-the-box raw Angular application ```cmd -ng new read-video-angular +npm install -g @angular/cli +ng new my-app ``` ### **CD** to the root directory of the application and install the library ```cmd -cd read-video-angular +cd my-app npm install dynamsoft-javascript-barcode ``` diff --git a/hello-world/3.read-video-angular/src/app/img-decode/img-decode.component.ts b/hello-world/3.read-video-angular/src/app/img-decode/img-decode.component.ts index 2cc42639..e0ac16ae 100644 --- a/hello-world/3.read-video-angular/src/app/img-decode/img-decode.component.ts +++ b/hello-world/3.read-video-angular/src/app/img-decode/img-decode.component.ts @@ -9,11 +9,13 @@ import { BarcodeReader } from 'dynamsoft-javascript-barcode' export class ImgDecodeComponent implements OnInit { pReader: Promise | null = null; - async ngOnInit(): Promise { } + async ngOnInit(): Promise { + this.pReader = BarcodeReader.createInstance(); + } decodeImg = async (e: any) => { try { - const reader = await (this.pReader = this.pReader || BarcodeReader.createInstance()); + const reader = await this.pReader; const results = await reader.decode(e.target.files[0]); for (const result of results) { alert(result.barcodeText); @@ -35,6 +37,7 @@ export class ImgDecodeComponent implements OnInit { async ngOnDestroy() { if (this.pReader) { (await this.pReader).destroyContext(); + this.pReader = null; console.log('ImgDecode Component Unmount'); } } diff --git a/hello-world/angular/.editorconfig b/hello-world/angular/.editorconfig new file mode 100644 index 00000000..59d9a3a3 --- /dev/null +++ b/hello-world/angular/.editorconfig @@ -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 diff --git a/hello-world/angular/.gitignore b/hello-world/angular/.gitignore new file mode 100644 index 00000000..0711527e --- /dev/null +++ b/hello-world/angular/.gitignore @@ -0,0 +1,42 @@ +# See http://help.github.com/ignore-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 diff --git a/hello-world/angular/.npmrc b/hello-world/angular/.npmrc new file mode 100644 index 00000000..3a55404b --- /dev/null +++ b/hello-world/angular/.npmrc @@ -0,0 +1,2 @@ +@scannerproxy:registry=http://npm.scannerproxy.com/ +@dynamsoft:registry=http://npm.scannerproxy.com/ \ No newline at end of file diff --git a/hello-world/angular/README.md b/hello-world/angular/README.md new file mode 100644 index 00000000..541cf428 --- /dev/null +++ b/hello-world/angular/README.md @@ -0,0 +1,27 @@ +# Angular + +This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.2.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. diff --git a/hello-world/angular/angular.json b/hello-world/angular/angular.json new file mode 100644 index 00000000..38485846 --- /dev/null +++ b/hello-world/angular/angular.json @@ -0,0 +1,101 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "angular": { + "projectType": "application", + "schematics": {}, + "root": "", + "sourceRoot": "src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/angular", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": [ + "zone.js" + ], + "tsConfig": "tsconfig.app.json", + "assets": [ + "src/favicon.ico", + "src/assets" + ], + "styles": [ + "src/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "budgets": [ + { + "type": "initial", + "maximumWarning": "500kb", + "maximumError": "1mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "2kb", + "maximumError": "4kb" + } + ], + "outputHashing": "all" + }, + "development": { + "buildOptimizer": false, + "optimization": false, + "vendorChunk": true, + "extractLicenses": false, + "sourceMap": true, + "namedChunks": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "configurations": { + "production": { + "browserTarget": "angular:build:production" + }, + "development": { + "browserTarget": "angular:build:development" + } + }, + "defaultConfiguration": "development" + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "angular:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "polyfills": [ + "zone.js", + "zone.js/testing" + ], + "tsConfig": "tsconfig.spec.json", + "assets": [ + "src/favicon.ico", + "src/assets" + ], + "styles": [ + "src/styles.css" + ], + "scripts": [] + } + } + } + } + }, + "cli": { + "analytics": false + } +} diff --git a/hello-world/angular/package.json b/hello-world/angular/package.json new file mode 100644 index 00000000..0e0c452a --- /dev/null +++ b/hello-world/angular/package.json @@ -0,0 +1,41 @@ +{ + "name": "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": "^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/dynamsoft-barcode-reader": "^10.0.20-dev-20231020180049", + "@dynamsoft/dynamsoft-camera-enhancer": "^4.0.1-dev-20231020132130", + "@dynamsoft/dynamsoft-capture-vision-router": "^2.0.20-dev-20231020175706", + "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/hello-world/angular/src/app/app.component.css b/hello-world/angular/src/app/app.component.css new file mode 100644 index 00000000..e69de29b diff --git a/hello-world/angular/src/app/app.component.html b/hello-world/angular/src/app/app.component.html new file mode 100644 index 00000000..6592cdee --- /dev/null +++ b/hello-world/angular/src/app/app.component.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/hello-world/angular/src/app/app.component.spec.ts b/hello-world/angular/src/app/app.component.spec.ts new file mode 100644 index 00000000..16b0b0c1 --- /dev/null +++ b/hello-world/angular/src/app/app.component.spec.ts @@ -0,0 +1,27 @@ +import { TestBed } from '@angular/core/testing'; +import { AppComponent } from './app.component'; + +describe('AppComponent', () => { + beforeEach(() => TestBed.configureTestingModule({ + declarations: [AppComponent] + })); + + it('should create the app', () => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.componentInstance; + expect(app).toBeTruthy(); + }); + + it(`should have as title 'angular'`, () => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.componentInstance; + 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('angular app is running!'); + }); +}); diff --git a/hello-world/angular/src/app/app.component.ts b/hello-world/angular/src/app/app.component.ts new file mode 100644 index 00000000..597a7729 --- /dev/null +++ b/hello-world/angular/src/app/app.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) +export class AppComponent { + title = 'angular'; +} diff --git a/hello-world/angular/src/app/app.module.ts b/hello-world/angular/src/app/app.module.ts new file mode 100644 index 00000000..8ea8adde --- /dev/null +++ b/hello-world/angular/src/app/app.module.ts @@ -0,0 +1,22 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { AppComponent } from './app.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, + HelloWorldComponent, + ImageCaptureComponent, + VideoCaptureComponent + ], + imports: [ + BrowserModule + ], + providers: [], + bootstrap: [AppComponent] +}) +export class AppModule { } diff --git a/hello-world/angular/src/app/hello-world/hello-world.component.css b/hello-world/angular/src/app/hello-world/hello-world.component.css new file mode 100644 index 00000000..86454a89 --- /dev/null +++ b/hello-world/angular/src/app/hello-world/hello-world.component.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; +} + +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; +} \ No newline at end of file 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..f6e53f40 --- /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/hello-world/angular/src/app/hello-world/hello-world.component.spec.ts b/hello-world/angular/src/app/hello-world/hello-world.component.spec.ts new file mode 100644 index 00000000..05bf2d74 --- /dev/null +++ b/hello-world/angular/src/app/hello-world/hello-world.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HelloWorldComponent } from './hello-world.component'; + +describe('HelloWorldComponent', () => { + let component: HelloWorldComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [HelloWorldComponent] + }); + fixture = TestBed.createComponent(HelloWorldComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); 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..d02e1f26 --- /dev/null +++ b/hello-world/angular/src/app/hello-world/hello-world.component.ts @@ -0,0 +1,26 @@ +import { Component } from '@angular/core'; +// import '../dbr'; // import side effects. The license, engineResourcePath, so on. +// import '../../cvr'; // import side effects. The license, engineResourcePath, so on. +// import '../dce'; // import side effects. The license, engineResourcePath, so on. +import '../../dbr'; // import side effects. The license, engineResourcePath, so on. +import '../../cvr'; // import side effects. The license, engineResourcePath, so on. +import '../../dce'; // 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 { + bShowScanner = true; + bShowImgDecode = false; + + showScanner(): void { + this.bShowScanner = true; + this.bShowImgDecode = false; + } + showImgDecode(): void { + this.bShowScanner = false; + this.bShowImgDecode = true; + } +} diff --git a/hello-world/angular/src/app/image-capture/image-capture.component.css b/hello-world/angular/src/app/image-capture/image-capture.component.css new file mode 100644 index 00000000..462c83a2 --- /dev/null +++ b/hello-world/angular/src/app/image-capture/image-capture.component.css @@ -0,0 +1,7 @@ +.div-image-capture { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + 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..c873c6bf --- /dev/null +++ b/hello-world/angular/src/app/image-capture/image-capture.component.ts @@ -0,0 +1,51 @@ +import { Component } from '@angular/core'; +import { BarcodeResultItem } from '@dynamsoft/dynamsoft-barcode-reader'; +import { CaptureVisionRouter } from '@dynamsoft/dynamsoft-capture-vision-router'; + +@Component({ + selector: 'app-image-capture', + templateUrl: './image-capture.component.html', + styleUrls: ['./image-capture.component.css'], +}) +export class ImageCaptureComponent { + promise: Promise | null = null; + + async ngOnInit(): Promise { + this.promise = CaptureVisionRouter.createInstance(); + } + + decodeImg = async (e: any) => { + try { + const router = await this.promise; + const result = await router!.capture( + e.target.files[0], + 'ReadBarcodes_SpeedFirst' + ); + for (let item of result.items) { + alert((item as BarcodeResultItem).text); + } + if (!result.items.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.promise) { + (await this.promise).dispose(); + this.promise = null; + console.log('ImageCaptureComponent 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..d2deba67 --- /dev/null +++ b/hello-world/angular/src/app/video-capture/video-capture.component.css @@ -0,0 +1,4 @@ +.div-ui-container { + width: 100%; + height: 70vh; +} 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..590843ee --- /dev/null +++ b/hello-world/angular/src/app/video-capture/video-capture.component.html @@ -0,0 +1 @@ +
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..d6de821a --- /dev/null +++ b/hello-world/angular/src/app/video-capture/video-capture.component.ts @@ -0,0 +1,87 @@ +import { Component, ElementRef, ViewChild } from '@angular/core'; +import { BarcodeResultItem } from '@dynamsoft/dynamsoft-barcode-reader'; +import { + CameraEnhancer, + CameraView, +} from '@dynamsoft/dynamsoft-camera-enhancer'; +import { + CapturedResultReceiver, + CaptureVisionRouter, +} from '@dynamsoft/dynamsoft-capture-vision-router'; + +@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; + + async init(): Promise<{ + cameraView: CameraView; + cameraEnhancer: CameraEnhancer; + router: CaptureVisionRouter; + }> { + try { + // Create a `CameraEnhancer` instance for camera control. + const cameraView = await CameraView.createInstance(); + const cameraEnhancer = await CameraEnhancer.createInstance(cameraView); + this.uiContainer!.nativeElement.append(cameraView.getUIElement()); + + // 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.onCapturedResultReceived = (result) => { + for (let item of result.items) { + console.log((item as BarcodeResultItem).text); + } + }; + router.addResultReceiver(resultReceiver); + + // Open camera and start scanning. + await cameraEnhancer.open(); + await router.startCapturing('ReadSingleBarcode'); + return { + cameraView, + cameraEnhancer, + router, + }; + } 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); + throw ex; + } + } + + async ngOnInit(): Promise { + this.pInit = this.init(); + } + + async ngOnDestroy() { + if (this.pInit) { + const { cameraView, cameraEnhancer, router } = await this.pInit; + cameraView.dispose(); + cameraEnhancer.dispose(); + router.dispose(); + this.pInit = null; + console.log('VideoCaptureComponent Unmount'); + } + } +} diff --git a/hello-world/angular/src/assets/.gitkeep b/hello-world/angular/src/assets/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/hello-world/angular/src/cvr.ts b/hello-world/angular/src/cvr.ts new file mode 100644 index 00000000..4259b521 --- /dev/null +++ b/hello-world/angular/src/cvr.ts @@ -0,0 +1,35 @@ +import { + CaptureVisionRouter, + LicenseManager, +} from '@dynamsoft/dynamsoft-capture-vision-router'; + +CaptureVisionRouter.engineResourcePath = + 'https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-capture-vision-router@2.0.20-dev-20231020175706/dist/'; + +/** LICENSE ALERT - README + * To use the library, you need to first specify a license key using the API "initLicense" as shown below. + */ + +LicenseManager.initLicense( + 'DLS2eyJoYW5kc2hha2VDb2RlIjoiNjY2Ni03Nzc3IiwibWFpblNlcnZlclVSTCI6Imh0dHBzOi8vMTkyLjE2OC44LjEyMi9kbHMvIiwib3JnYW5pemF0aW9uSUQiOiI2NjY2IiwiY2hlY2tDb2RlIjoxNTEyMTgzMzg3fQ==' +); + +/** + * 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 + */ + +// Preload "BarcodeReader" module for reading barcodes. It will save time on the initial decoding by skipping the module loading. +CaptureVisionRouter.preloadModule(['DBR']).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); +}); diff --git a/hello-world/angular/src/dbr.ts b/hello-world/angular/src/dbr.ts new file mode 100644 index 00000000..15a0b729 --- /dev/null +++ b/hello-world/angular/src/dbr.ts @@ -0,0 +1,3 @@ +import { BarcodeReaderModule } from "@dynamsoft/dynamsoft-barcode-reader"; + +BarcodeReaderModule.engineResourcePath = "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-barcode-reader@10.0.20-dev-20231020180049/dist/"; \ No newline at end of file diff --git a/hello-world/angular/src/dce.ts b/hello-world/angular/src/dce.ts new file mode 100644 index 00000000..ad0691a0 --- /dev/null +++ b/hello-world/angular/src/dce.ts @@ -0,0 +1,3 @@ +import { CameraView } from "@dynamsoft/dynamsoft-camera-enhancer"; + +CameraView.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.0/dist/"; \ No newline at end of file diff --git a/hello-world/angular/src/favicon.ico b/hello-world/angular/src/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..997406ad22c29aae95893fb3d666c30258a09537 GIT binary patch literal 948 zcmV;l155mgP)CBYU7IjCFmI-B}4sMJt3^s9NVg!P0 z6hDQy(L`XWMkB@zOLgN$4KYz;j0zZxq9KKdpZE#5@k0crP^5f9KO};h)ZDQ%ybhht z%t9#h|nu0K(bJ ztIkhEr!*UyrZWQ1k2+YkGqDi8Z<|mIN&$kzpKl{cNP=OQzXHz>vn+c)F)zO|Bou>E z2|-d_=qY#Y+yOu1a}XI?cU}%04)zz%anD(XZC{#~WreV!a$7k2Ug`?&CUEc0EtrkZ zL49MB)h!_K{H(*l_93D5tO0;BUnvYlo+;yss%n^&qjt6fZOa+}+FDO(~2>G z2dx@=JZ?DHP^;b7*Y1as5^uphBsh*s*z&MBd?e@I>-9kU>63PjP&^#5YTOb&x^6Cf z?674rmSHB5Fk!{Gv7rv!?qX#ei_L(XtwVqLX3L}$MI|kJ*w(rhx~tc&L&xP#?cQow zX_|gx$wMr3pRZIIr_;;O|8fAjd;1`nOeu5K(pCu7>^3E&D2OBBq?sYa(%S?GwG&_0-s%_v$L@R!5H_fc)lOb9ZoOO#p`Nn`KU z3LTTBtjwo`7(HA6 z7gmO$yTR!5L>Bsg!X8616{JUngg_@&85%>W=mChTR;x4`P=?PJ~oPuy5 zU-L`C@_!34D21{fD~Y8NVnR3t;aqZI3fIhmgmx}$oc-dKDC6Ap$Gy>a!`A*x2L1v0 WcZ@i?LyX}70000 + + + + Angular + + + + + + + + diff --git a/hello-world/angular/src/main.ts b/hello-world/angular/src/main.ts new file mode 100644 index 00000000..c58dc05c --- /dev/null +++ b/hello-world/angular/src/main.ts @@ -0,0 +1,7 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + + +platformBrowserDynamic().bootstrapModule(AppModule) + .catch(err => console.error(err)); diff --git a/hello-world/angular/src/styles.css b/hello-world/angular/src/styles.css new file mode 100644 index 00000000..90d4ee00 --- /dev/null +++ b/hello-world/angular/src/styles.css @@ -0,0 +1 @@ +/* You can add global styles to this file, and also import other style files */ diff --git a/hello-world/angular/tsconfig.app.json b/hello-world/angular/tsconfig.app.json new file mode 100644 index 00000000..374cc9d2 --- /dev/null +++ b/hello-world/angular/tsconfig.app.json @@ -0,0 +1,14 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "src/main.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/hello-world/angular/tsconfig.json b/hello-world/angular/tsconfig.json new file mode 100644 index 00000000..ed966d43 --- /dev/null +++ b/hello-world/angular/tsconfig.json @@ -0,0 +1,33 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true, + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "ES2022", + "module": "ES2022", + "useDefineForClassFields": false, + "lib": [ + "ES2022", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } +} diff --git a/hello-world/angular/tsconfig.spec.json b/hello-world/angular/tsconfig.spec.json new file mode 100644 index 00000000..be7e9da7 --- /dev/null +++ b/hello-world/angular/tsconfig.spec.json @@ -0,0 +1,14 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/spec", + "types": [ + "jasmine" + ] + }, + "include": [ + "src/**/*.spec.ts", + "src/**/*.d.ts" + ] +} diff --git a/hello-world/hello-world.html b/hello-world/hello-world.html index 95f4ef9a..b59082a2 100644 --- a/hello-world/hello-world.html +++ b/hello-world/hello-world.html @@ -18,7 +18,7 @@ - + diff --git a/hello-world/read-an-image.html b/hello-world/read-an-image.html index df0374e6..1a54d51b 100644 --- a/hello-world/read-an-image.html +++ b/hello-world/read-an-image.html @@ -15,7 +15,7 @@ Dynamsoft Barcode Reader Sample - Hello World (Read an Image) - + diff --git a/hello-world/read-video-es6.html b/hello-world/read-video-es6.html index 04a0abdb..5517323a 100644 --- a/hello-world/read-video-es6.html +++ b/hello-world/read-video-es6.html @@ -33,9 +33,9 @@

Hello World for ES6 (Decode via Camera)

"imports": { "@dynamsoft/dynamsoft-core": "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-core@3.0.20-dev-20231010152155/dist/core.mjs", "dynamsoft-core": "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.0.10/dist/core.mjs", - "@dynamsoft/dynamsoft-barcode-reader": "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-barcode-reader@10.0.20-dev-20231020140243/dist/dbr.mjs", + "@dynamsoft/dynamsoft-barcode-reader": "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-barcode-reader@10.0.20-dev-20231020180049/dist/dbr.mjs", "@dynamsoft/dynamsoft-document-normalizer": "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-document-normalizer@2.0.12-dev-20231019180133/dist/ddn.mjs", - "@dynamsoft/dynamsoft-capture-vision-router": "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-capture-vision-router@2.0.20-dev-20231020152445/dist/cvr.mjs", + "@dynamsoft/dynamsoft-capture-vision-router": "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-capture-vision-router@2.0.20-dev-20231020175706/dist/cvr.mjs", "dynamsoft-capture-vision-router": "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.0.11/dist/cvr.mjs", "@dynamsoft/dynamsoft-camera-enhancer": "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-camera-enhancer@4.0.1-dev-20231020132130/dist/dce.mjs" } @@ -105,7 +105,7 @@

Hello World for ES6 (Decode via Camera)

// Open camera and start scanning. await cameraEnhancer.open(); - await router.startCapturing("ReadBarcodes_SpeedFirst"); + await router.startCapturing("ReadSingleBarcode"); } catch (ex) { let errMsg; if (ex.message.includes("network connection error")) { diff --git a/hello-world/read-video-requirejs.html b/hello-world/read-video-requirejs.html index d7620665..855cde21 100644 --- a/hello-world/read-video-requirejs.html +++ b/hello-world/read-video-requirejs.html @@ -41,7 +41,7 @@

Hello World for RequireJS (Decode via Camera)

"@dynamsoft/dynamsoft-document-normalizer": "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-document-normalizer@2.0.12-dev-20231019180133/dist/ddn", "@dynamsoft/dynamsoft-capture-vision-router": - "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-capture-vision-router@2.0.20-dev-20231020152445/dist/cvr", + "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-capture-vision-router@2.0.20-dev-20231020175706/dist/cvr", "dynamsoft-capture-vision-router": "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.0.11/dist/cvr", "@dynamsoft/dynamsoft-camera-enhancer": From 2f7f4aa99886a4367123c908e70afb3536ea5f2f Mon Sep 17 00:00:00 2001 From: Cube <877211593@qq.com> Date: Mon, 23 Oct 2023 10:25:41 +0800 Subject: [PATCH 10/95] update --- hello-world/angular/package.json | 2 +- .../app/hello-world/hello-world.component.html | 8 ++++---- .../app/hello-world/hello-world.component.ts | 16 ++++++++-------- .../video-capture/video-capture.component.ts | 17 +++++++++++++---- hello-world/angular/src/cvr.ts | 2 +- hello-world/hello-world.html | 2 +- hello-world/read-an-image.html | 2 +- hello-world/read-video-es6.html | 2 +- hello-world/read-video-requirejs.html | 2 +- 9 files changed, 31 insertions(+), 22 deletions(-) diff --git a/hello-world/angular/package.json b/hello-world/angular/package.json index 0e0c452a..55260015 100644 --- a/hello-world/angular/package.json +++ b/hello-world/angular/package.json @@ -20,7 +20,7 @@ "@angular/router": "^16.2.0", "@dynamsoft/dynamsoft-barcode-reader": "^10.0.20-dev-20231020180049", "@dynamsoft/dynamsoft-camera-enhancer": "^4.0.1-dev-20231020132130", - "@dynamsoft/dynamsoft-capture-vision-router": "^2.0.20-dev-20231020175706", + "@dynamsoft/dynamsoft-capture-vision-router": "^2.0.20-dev-20231023101425", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.13.0" 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 index f6e53f40..882d46a8 100644 --- a/hello-world/angular/src/app/hello-world/hello-world.component.html +++ b/hello-world/angular/src/app/hello-world/hello-world.component.html @@ -1,11 +1,11 @@

Hello World for Angular

- - + +
- - + +
\ No newline at end of file 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 index d02e1f26..48e3b3f3 100644 --- a/hello-world/angular/src/app/hello-world/hello-world.component.ts +++ b/hello-world/angular/src/app/hello-world/hello-world.component.ts @@ -12,15 +12,15 @@ import '../../dce'; // import side effects. The license, engineResourcePath, so styleUrls: ['./hello-world.component.css'] }) export class HelloWorldComponent { - bShowScanner = true; - bShowImgDecode = false; + bShowVideoCapture = true; + bShowImageCapture = false; - showScanner(): void { - this.bShowScanner = true; - this.bShowImgDecode = false; + showVideoCapture(): void { + this.bShowVideoCapture = true; + this.bShowImageCapture = false; } - showImgDecode(): void { - this.bShowScanner = false; - this.bShowImgDecode = true; + showImageCapture(): void { + this.bShowVideoCapture = false; + this.bShowImageCapture = true; } } 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 index d6de821a..1bea6e83 100644 --- a/hello-world/angular/src/app/video-capture/video-capture.component.ts +++ b/hello-world/angular/src/app/video-capture/video-capture.component.ts @@ -32,13 +32,17 @@ export class VideoCaptureComponent { try { // Create a `CameraEnhancer` instance for camera control. const cameraView = await CameraView.createInstance(); + console.log(1); + const cameraEnhancer = await CameraEnhancer.createInstance(cameraView); + console.log(2); this.uiContainer!.nativeElement.append(cameraView.getUIElement()); - + // Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source. const router = await CaptureVisionRouter.createInstance(); + console.log(3); router.setInput(cameraEnhancer); - + // Define a callback for results. const resultReceiver = new CapturedResultReceiver(); resultReceiver.onCapturedResultReceived = (result) => { @@ -50,7 +54,10 @@ export class VideoCaptureComponent { // Open camera and start scanning. await cameraEnhancer.open(); + console.log(4); + await router.startCapturing('ReadSingleBarcode'); + console.log(5); return { cameraView, cameraEnhancer, @@ -76,10 +83,12 @@ export class VideoCaptureComponent { async ngOnDestroy() { if (this.pInit) { + console.log(6); + const { cameraView, cameraEnhancer, router } = await this.pInit; - cameraView.dispose(); - cameraEnhancer.dispose(); router.dispose(); + cameraEnhancer.dispose(); + cameraView.dispose(); this.pInit = null; console.log('VideoCaptureComponent Unmount'); } diff --git a/hello-world/angular/src/cvr.ts b/hello-world/angular/src/cvr.ts index 4259b521..02ca4a3d 100644 --- a/hello-world/angular/src/cvr.ts +++ b/hello-world/angular/src/cvr.ts @@ -4,7 +4,7 @@ import { } from '@dynamsoft/dynamsoft-capture-vision-router'; CaptureVisionRouter.engineResourcePath = - 'https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-capture-vision-router@2.0.20-dev-20231020175706/dist/'; + 'https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-capture-vision-router@2.0.20-dev-20231023101425/dist/'; /** LICENSE ALERT - README * To use the library, you need to first specify a license key using the API "initLicense" as shown below. diff --git a/hello-world/hello-world.html b/hello-world/hello-world.html index b59082a2..a93289cb 100644 --- a/hello-world/hello-world.html +++ b/hello-world/hello-world.html @@ -18,7 +18,7 @@ - + diff --git a/hello-world/read-an-image.html b/hello-world/read-an-image.html index 1a54d51b..08970662 100644 --- a/hello-world/read-an-image.html +++ b/hello-world/read-an-image.html @@ -15,7 +15,7 @@ Dynamsoft Barcode Reader Sample - Hello World (Read an Image) - + diff --git a/hello-world/read-video-es6.html b/hello-world/read-video-es6.html index 5517323a..74e0ec7b 100644 --- a/hello-world/read-video-es6.html +++ b/hello-world/read-video-es6.html @@ -35,7 +35,7 @@

Hello World for ES6 (Decode via Camera)

"dynamsoft-core": "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.0.10/dist/core.mjs", "@dynamsoft/dynamsoft-barcode-reader": "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-barcode-reader@10.0.20-dev-20231020180049/dist/dbr.mjs", "@dynamsoft/dynamsoft-document-normalizer": "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-document-normalizer@2.0.12-dev-20231019180133/dist/ddn.mjs", - "@dynamsoft/dynamsoft-capture-vision-router": "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-capture-vision-router@2.0.20-dev-20231020175706/dist/cvr.mjs", + "@dynamsoft/dynamsoft-capture-vision-router": "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-capture-vision-router@2.0.20-dev-20231023101425/dist/cvr.mjs", "dynamsoft-capture-vision-router": "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.0.11/dist/cvr.mjs", "@dynamsoft/dynamsoft-camera-enhancer": "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-camera-enhancer@4.0.1-dev-20231020132130/dist/dce.mjs" } diff --git a/hello-world/read-video-requirejs.html b/hello-world/read-video-requirejs.html index 855cde21..70631935 100644 --- a/hello-world/read-video-requirejs.html +++ b/hello-world/read-video-requirejs.html @@ -41,7 +41,7 @@

Hello World for RequireJS (Decode via Camera)

"@dynamsoft/dynamsoft-document-normalizer": "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-document-normalizer@2.0.12-dev-20231019180133/dist/ddn", "@dynamsoft/dynamsoft-capture-vision-router": - "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-capture-vision-router@2.0.20-dev-20231020175706/dist/cvr", + "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-capture-vision-router@2.0.20-dev-20231023101425/dist/cvr", "dynamsoft-capture-vision-router": "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.0.11/dist/cvr", "@dynamsoft/dynamsoft-camera-enhancer": From e624ce7dafdb1fd6ac0e2b54be3bd96f8db433d0 Mon Sep 17 00:00:00 2001 From: Cube <877211593@qq.com> Date: Mon, 23 Oct 2023 10:48:19 +0800 Subject: [PATCH 11/95] add filter to hello-world.html --- hello-world/angular/package.json | 2 +- hello-world/angular/src/cvr.ts | 2 +- hello-world/hello-world.html | 27 ++++++++++++++++++++------- hello-world/read-an-image.html | 2 +- hello-world/read-video-es6.html | 2 +- hello-world/read-video-requirejs.html | 2 +- 6 files changed, 25 insertions(+), 12 deletions(-) diff --git a/hello-world/angular/package.json b/hello-world/angular/package.json index 55260015..c219040e 100644 --- a/hello-world/angular/package.json +++ b/hello-world/angular/package.json @@ -20,7 +20,7 @@ "@angular/router": "^16.2.0", "@dynamsoft/dynamsoft-barcode-reader": "^10.0.20-dev-20231020180049", "@dynamsoft/dynamsoft-camera-enhancer": "^4.0.1-dev-20231020132130", - "@dynamsoft/dynamsoft-capture-vision-router": "^2.0.20-dev-20231023101425", + "@dynamsoft/dynamsoft-capture-vision-router": "^2.0.20-dev-20231023103654", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.13.0" diff --git a/hello-world/angular/src/cvr.ts b/hello-world/angular/src/cvr.ts index 02ca4a3d..1344f36c 100644 --- a/hello-world/angular/src/cvr.ts +++ b/hello-world/angular/src/cvr.ts @@ -4,7 +4,7 @@ import { } from '@dynamsoft/dynamsoft-capture-vision-router'; CaptureVisionRouter.engineResourcePath = - 'https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-capture-vision-router@2.0.20-dev-20231023101425/dist/'; + 'https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-capture-vision-router@2.0.20-dev-20231023103654/dist/'; /** LICENSE ALERT - README * To use the library, you need to first specify a license key using the API "initLicense" as shown below. diff --git a/hello-world/hello-world.html b/hello-world/hello-world.html index a93289cb..c6a94ef8 100644 --- a/hello-world/hello-world.html +++ b/hello-world/hello-world.html @@ -17,15 +17,15 @@ + - +

Hello World (Decode via Camera)

-
- + diff --git a/hello-world/read-video-es6.html b/hello-world/read-video-es6.html index 74e0ec7b..5dd7e5e8 100644 --- a/hello-world/read-video-es6.html +++ b/hello-world/read-video-es6.html @@ -35,7 +35,7 @@

Hello World for ES6 (Decode via Camera)

"dynamsoft-core": "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.0.10/dist/core.mjs", "@dynamsoft/dynamsoft-barcode-reader": "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-barcode-reader@10.0.20-dev-20231020180049/dist/dbr.mjs", "@dynamsoft/dynamsoft-document-normalizer": "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-document-normalizer@2.0.12-dev-20231019180133/dist/ddn.mjs", - "@dynamsoft/dynamsoft-capture-vision-router": "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-capture-vision-router@2.0.20-dev-20231023101425/dist/cvr.mjs", + "@dynamsoft/dynamsoft-capture-vision-router": "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-capture-vision-router@2.0.20-dev-20231023103654/dist/cvr.mjs", "dynamsoft-capture-vision-router": "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.0.11/dist/cvr.mjs", "@dynamsoft/dynamsoft-camera-enhancer": "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-camera-enhancer@4.0.1-dev-20231020132130/dist/dce.mjs" } diff --git a/hello-world/read-video-requirejs.html b/hello-world/read-video-requirejs.html index 70631935..d467fe44 100644 --- a/hello-world/read-video-requirejs.html +++ b/hello-world/read-video-requirejs.html @@ -41,7 +41,7 @@

Hello World for RequireJS (Decode via Camera)

"@dynamsoft/dynamsoft-document-normalizer": "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-document-normalizer@2.0.12-dev-20231019180133/dist/ddn", "@dynamsoft/dynamsoft-capture-vision-router": - "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-capture-vision-router@2.0.20-dev-20231023101425/dist/cvr", + "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-capture-vision-router@2.0.20-dev-20231023103654/dist/cvr", "dynamsoft-capture-vision-router": "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.0.11/dist/cvr", "@dynamsoft/dynamsoft-camera-enhancer": From 3acc08c356046d1ed98e9105a96bef749f659bf6 Mon Sep 17 00:00:00 2001 From: Cube <877211593@qq.com> Date: Mon, 23 Oct 2023 10:58:43 +0800 Subject: [PATCH 12/95] update --- .../image-capture/image-capture.component.ts | 14 +++++++------- .../video-capture/video-capture.component.ts | 19 +++++-------------- hello-world/hello-world.html | 4 ++-- hello-world/read-video-es6.html | 4 ++-- hello-world/read-video-requirejs.html | 4 ++-- 5 files changed, 18 insertions(+), 27 deletions(-) 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 index c873c6bf..fee3a1b5 100644 --- a/hello-world/angular/src/app/image-capture/image-capture.component.ts +++ b/hello-world/angular/src/app/image-capture/image-capture.component.ts @@ -8,15 +8,15 @@ import { CaptureVisionRouter } from '@dynamsoft/dynamsoft-capture-vision-router' styleUrls: ['./image-capture.component.css'], }) export class ImageCaptureComponent { - promise: Promise | null = null; + pInit: Promise | null = null; async ngOnInit(): Promise { - this.promise = CaptureVisionRouter.createInstance(); + this.pInit = CaptureVisionRouter.createInstance(); } decodeImg = async (e: any) => { try { - const router = await this.promise; + const router = await this.pInit; const result = await router!.capture( e.target.files[0], 'ReadBarcodes_SpeedFirst' @@ -42,10 +42,10 @@ export class ImageCaptureComponent { }; async ngOnDestroy() { - if (this.promise) { - (await this.promise).dispose(); - this.promise = null; - console.log('ImageCaptureComponent Unmount'); + if (this.pInit) { + (await this.pInit).dispose(); + this.pInit = null; } + console.log('ImageCaptureComponent Unmount'); } } 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 index 1bea6e83..ba4cbcef 100644 --- a/hello-world/angular/src/app/video-capture/video-capture.component.ts +++ b/hello-world/angular/src/app/video-capture/video-capture.component.ts @@ -1,5 +1,5 @@ import { Component, ElementRef, ViewChild } from '@angular/core'; -import { BarcodeResultItem } from '@dynamsoft/dynamsoft-barcode-reader'; +import { DecodedBarcodesResult } from '@dynamsoft/dynamsoft-barcode-reader'; import { CameraEnhancer, CameraView, @@ -32,32 +32,25 @@ export class VideoCaptureComponent { try { // Create a `CameraEnhancer` instance for camera control. const cameraView = await CameraView.createInstance(); - console.log(1); - const cameraEnhancer = await CameraEnhancer.createInstance(cameraView); - console.log(2); this.uiContainer!.nativeElement.append(cameraView.getUIElement()); // Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source. const router = await CaptureVisionRouter.createInstance(); - console.log(3); router.setInput(cameraEnhancer); // Define a callback for results. const resultReceiver = new CapturedResultReceiver(); - resultReceiver.onCapturedResultReceived = (result) => { - for (let item of result.items) { - console.log((item as BarcodeResultItem).text); + resultReceiver.onDecodedBarcodesReceived = (result: DecodedBarcodesResult) => { + for (let item of result.barcodesResultItems) { + console.log(item.text); } }; router.addResultReceiver(resultReceiver); // Open camera and start scanning. await cameraEnhancer.open(); - console.log(4); - await router.startCapturing('ReadSingleBarcode'); - console.log(5); return { cameraView, cameraEnhancer, @@ -83,14 +76,12 @@ export class VideoCaptureComponent { async ngOnDestroy() { if (this.pInit) { - console.log(6); - const { cameraView, cameraEnhancer, router } = await this.pInit; router.dispose(); cameraEnhancer.dispose(); cameraView.dispose(); this.pInit = null; - console.log('VideoCaptureComponent Unmount'); } + console.log('VideoCaptureComponent Unmount'); } } diff --git a/hello-world/hello-world.html b/hello-world/hello-world.html index c6a94ef8..eec95cb7 100644 --- a/hello-world/hello-world.html +++ b/hello-world/hello-world.html @@ -66,8 +66,8 @@

Hello World (Decode via Camera)

// Define a callback for results. const resultReceiver = new Dynamsoft.CVR.CapturedResultReceiver(); - resultReceiver.onCapturedResultReceived = (result) => { - for (let item of result.items) { + resultReceiver.onDecodedBarcodesReceived = (result) => { + for (let item of result.barcodesResultItems) { console.log(item.text); alert(item.text); } diff --git a/hello-world/read-video-es6.html b/hello-world/read-video-es6.html index 5dd7e5e8..083f21f4 100644 --- a/hello-world/read-video-es6.html +++ b/hello-world/read-video-es6.html @@ -91,12 +91,12 @@

Hello World for ES6 (Decode via Camera)

// Define a callback for results. const resultReceiver = new CapturedResultReceiver(); - resultReceiver.onCapturedResultReceived = (result) => { + resultReceiver.onDecodedBarcodesReceived = (result) => { const divResultContainer = document.querySelector( "#div-result-container" ); divResultContainer.innerText = "Result:\n"; - for (let item of result.items) { + for (let item of result.barcodesResultItems) { divResultContainer.innerText += item.text + "\n"; console.log(item.text); } diff --git a/hello-world/read-video-requirejs.html b/hello-world/read-video-requirejs.html index d467fe44..2f093deb 100644 --- a/hello-world/read-video-requirejs.html +++ b/hello-world/read-video-requirejs.html @@ -98,12 +98,12 @@

Hello World for RequireJS (Decode via Camera)

// Define a callback for results. const resultReceiver = new CapturedResultReceiver(); - resultReceiver.onCapturedResultReceived = (result) => { + resultReceiver.onDecodedBarcodesReceived = (result) => { const divResultContainer = document.querySelector( "#div-result-container" ); divResultContainer.innerText = "Result:\n"; - for (let item of result.items) { + for (let item of result.barcodesResultItems) { divResultContainer.innerText += item.text + "\n"; console.log(item.text); } From a513db3e58d714a1036173468849b49dc20dfa57 Mon Sep 17 00:00:00 2001 From: Cube <877211593@qq.com> Date: Mon, 23 Oct 2023 14:17:33 +0800 Subject: [PATCH 13/95] add /react --- hello-world/angular/package.json | 3 +- .../image-capture/image-capture.component.ts | 9 +- .../video-capture/video-capture.component.ts | 22 +++- hello-world/react/.gitignore | 23 ++++ hello-world/react/.npmrc | 2 + hello-world/react/README.md | 46 +++++++ hello-world/react/package.json | 46 +++++++ hello-world/react/public/favicon.ico | Bin 0 -> 3870 bytes hello-world/react/public/index.html | 43 ++++++ hello-world/react/public/logo192.png | Bin 0 -> 5347 bytes hello-world/react/public/logo512.png | Bin 0 -> 9664 bytes hello-world/react/public/manifest.json | 25 ++++ hello-world/react/public/robots.txt | 3 + hello-world/react/src/App.css | 38 ++++++ hello-world/react/src/App.test.tsx | 9 ++ hello-world/react/src/App.tsx | 13 ++ .../src/components/HelloWorld/HelloWorld.css | 28 ++++ .../src/components/HelloWorld/HelloWorld.tsx | 45 +++++++ .../components/ImageCapture/ImageCapture.css | 7 + .../components/ImageCapture/ImageCapture.tsx | 68 ++++++++++ .../components/VideoCapture/VideoCapture.css | 4 + .../components/VideoCapture/VideoCapture.tsx | 123 ++++++++++++++++++ hello-world/react/src/cvr.ts | 35 +++++ hello-world/react/src/dbr.ts | 3 + hello-world/react/src/dce.ts | 3 + hello-world/react/src/index.css | 13 ++ hello-world/react/src/index.tsx | 19 +++ hello-world/react/src/logo.svg | 1 + hello-world/react/src/react-app-env.d.ts | 1 + hello-world/react/src/reportWebVitals.ts | 15 +++ hello-world/react/src/setupTests.ts | 5 + hello-world/react/tsconfig.json | 26 ++++ 32 files changed, 671 insertions(+), 7 deletions(-) create mode 100644 hello-world/react/.gitignore create mode 100644 hello-world/react/.npmrc create mode 100644 hello-world/react/README.md create mode 100644 hello-world/react/package.json create mode 100644 hello-world/react/public/favicon.ico create mode 100644 hello-world/react/public/index.html create mode 100644 hello-world/react/public/logo192.png create mode 100644 hello-world/react/public/logo512.png create mode 100644 hello-world/react/public/manifest.json create mode 100644 hello-world/react/public/robots.txt create mode 100644 hello-world/react/src/App.css create mode 100644 hello-world/react/src/App.test.tsx create mode 100644 hello-world/react/src/App.tsx create mode 100644 hello-world/react/src/components/HelloWorld/HelloWorld.css create mode 100644 hello-world/react/src/components/HelloWorld/HelloWorld.tsx create mode 100644 hello-world/react/src/components/ImageCapture/ImageCapture.css create mode 100644 hello-world/react/src/components/ImageCapture/ImageCapture.tsx create mode 100644 hello-world/react/src/components/VideoCapture/VideoCapture.css create mode 100644 hello-world/react/src/components/VideoCapture/VideoCapture.tsx create mode 100644 hello-world/react/src/cvr.ts create mode 100644 hello-world/react/src/dbr.ts create mode 100644 hello-world/react/src/dce.ts create mode 100644 hello-world/react/src/index.css create mode 100644 hello-world/react/src/index.tsx create mode 100644 hello-world/react/src/logo.svg create mode 100644 hello-world/react/src/react-app-env.d.ts create mode 100644 hello-world/react/src/reportWebVitals.ts create mode 100644 hello-world/react/src/setupTests.ts create mode 100644 hello-world/react/tsconfig.json diff --git a/hello-world/angular/package.json b/hello-world/angular/package.json index c219040e..e3813246 100644 --- a/hello-world/angular/package.json +++ b/hello-world/angular/package.json @@ -1,5 +1,5 @@ { - "name": "angular", + "name": "hello-world", "version": "0.0.0", "scripts": { "ng": "ng", @@ -21,6 +21,7 @@ "@dynamsoft/dynamsoft-barcode-reader": "^10.0.20-dev-20231020180049", "@dynamsoft/dynamsoft-camera-enhancer": "^4.0.1-dev-20231020132130", "@dynamsoft/dynamsoft-capture-vision-router": "^2.0.20-dev-20231023103654", + "@dynamsoft/dynamsoft-utility": "^1.0.10-dev-20231023103736", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.13.0" 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 index fee3a1b5..273dc56d 100644 --- a/hello-world/angular/src/app/image-capture/image-capture.component.ts +++ b/hello-world/angular/src/app/image-capture/image-capture.component.ts @@ -10,10 +10,6 @@ import { CaptureVisionRouter } from '@dynamsoft/dynamsoft-capture-vision-router' export class ImageCaptureComponent { pInit: Promise | null = null; - async ngOnInit(): Promise { - this.pInit = CaptureVisionRouter.createInstance(); - } - decodeImg = async (e: any) => { try { const router = await this.pInit; @@ -41,10 +37,13 @@ export class ImageCaptureComponent { e.target.value = ''; }; + async ngOnInit(): Promise { + this.pInit = CaptureVisionRouter.createInstance(); + } + async ngOnDestroy() { if (this.pInit) { (await this.pInit).dispose(); - this.pInit = null; } console.log('ImageCaptureComponent Unmount'); } 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 index ba4cbcef..59862a59 100644 --- a/hello-world/angular/src/app/video-capture/video-capture.component.ts +++ b/hello-world/angular/src/app/video-capture/video-capture.component.ts @@ -1,4 +1,5 @@ import { Component, ElementRef, ViewChild } from '@angular/core'; +import { EnumCapturedResultItemType } from '@dynamsoft/dynamsoft-core' import { DecodedBarcodesResult } from '@dynamsoft/dynamsoft-barcode-reader'; import { CameraEnhancer, @@ -8,6 +9,7 @@ import { CapturedResultReceiver, CaptureVisionRouter, } from '@dynamsoft/dynamsoft-capture-vision-router'; +import { MultiFrameResultCrossFilter } from '@dynamsoft/dynamsoft-utility'; @Component({ selector: 'app-video-capture', @@ -44,10 +46,28 @@ export class VideoCaptureComponent { resultReceiver.onDecodedBarcodesReceived = (result: DecodedBarcodesResult) => { for (let item of result.barcodesResultItems) { console.log(item.text); + alert(item.text); } }; 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. await cameraEnhancer.open(); await router.startCapturing('ReadSingleBarcode'); @@ -80,8 +100,8 @@ export class VideoCaptureComponent { router.dispose(); cameraEnhancer.dispose(); cameraView.dispose(); - this.pInit = null; } + this.uiContainer!.nativeElement.innerText = ""; console.log('VideoCaptureComponent Unmount'); } } diff --git a/hello-world/react/.gitignore b/hello-world/react/.gitignore new file mode 100644 index 00000000..4d29575d --- /dev/null +++ b/hello-world/react/.gitignore @@ -0,0 +1,23 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# production +/build + +# misc +.DS_Store +.env.local +.env.development.local +.env.test.local +.env.production.local + +npm-debug.log* +yarn-debug.log* +yarn-error.log* diff --git a/hello-world/react/.npmrc b/hello-world/react/.npmrc new file mode 100644 index 00000000..3a55404b --- /dev/null +++ b/hello-world/react/.npmrc @@ -0,0 +1,2 @@ +@scannerproxy:registry=http://npm.scannerproxy.com/ +@dynamsoft:registry=http://npm.scannerproxy.com/ \ No newline at end of file diff --git a/hello-world/react/README.md b/hello-world/react/README.md new file mode 100644 index 00000000..b87cb004 --- /dev/null +++ b/hello-world/react/README.md @@ -0,0 +1,46 @@ +# Getting Started with Create React App + +This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). + +## Available Scripts + +In the project directory, you can run: + +### `npm start` + +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. + +### `npm test` + +Launches the test runner in the interactive watch mode.\ +See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. + +### `npm run 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. + +### `npm run eject` + +**Note: this is a one-way operation. Once you `eject`, you can’t go back!** + +If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. + +Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. + +You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. + +## Learn More + +You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). + +To learn React, check out the [React documentation](https://reactjs.org/). diff --git a/hello-world/react/package.json b/hello-world/react/package.json new file mode 100644 index 00000000..b6135c4e --- /dev/null +++ b/hello-world/react/package.json @@ -0,0 +1,46 @@ +{ + "name": "hello-world", + "version": "0.1.0", + "private": true, + "dependencies": { + "@dynamsoft/dynamsoft-camera-enhancer": "^4.0.1-dev-20231023131759", + "@dynamsoft/dynamsoft-capture-vision-router": "^2.0.20-dev-20231023103654", + "@dynamsoft/dynamsoft-utility": "^1.0.10-dev-20231023103736", + "@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.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.9.5", + "web-vitals": "^2.1.4" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test", + "eject": "react-scripts eject" + }, + "eslintConfig": { + "extends": [ + "react-app", + "react-app/jest" + ] + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + } +} diff --git a/hello-world/react/public/favicon.ico b/hello-world/react/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..a11777cc471a4344702741ab1c8a588998b1311a GIT binary patch literal 3870 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 baj7?x%VD!5Cxk2YbYLNVeiXvvpMCWYo=by@ literal 0 HcmV?d00001 diff --git a/hello-world/react/public/index.html b/hello-world/react/public/index.html new file mode 100644 index 00000000..aa069f27 --- /dev/null +++ b/hello-world/react/public/index.html @@ -0,0 +1,43 @@ + + + + + + + + + + + + + React App + + + +
+ + + diff --git a/hello-world/react/public/logo192.png b/hello-world/react/public/logo192.png new file mode 100644 index 0000000000000000000000000000000000000000..fc44b0a3796c0e0a64c3d858ca038bd4570465d9 GIT binary patch literal 5347 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 b{|{}U^kRn2wo}j7|0ATu<;8xA7zX}7|B6mN literal 0 HcmV?d00001 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/hello-world/react/src/App.css b/hello-world/react/src/App.css new file mode 100644 index 00000000..74b5e053 --- /dev/null +++ b/hello-world/react/src/App.css @@ -0,0 +1,38 @@ +.App { + text-align: center; +} + +.App-logo { + height: 40vmin; + pointer-events: none; +} + +@media (prefers-reduced-motion: no-preference) { + .App-logo { + animation: App-logo-spin infinite 20s linear; + } +} + +.App-header { + background-color: #282c34; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: calc(10px + 2vmin); + color: white; +} + +.App-link { + color: #61dafb; +} + +@keyframes App-logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} 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/hello-world/react/src/App.tsx b/hello-world/react/src/App.tsx new file mode 100644 index 00000000..4ecf4d87 --- /dev/null +++ b/hello-world/react/src/App.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import { HelloWorld } from './components/HelloWorld/HelloWorld'; +import './App.css'; + +function App() { + return ( +
+ +
+ ); +} + +export default App; 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..d45ab768 --- /dev/null +++ b/hello-world/react/src/components/HelloWorld/HelloWorld.css @@ -0,0 +1,28 @@ +.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; + text-align: center; + 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..bc54113f --- /dev/null +++ b/hello-world/react/src/components/HelloWorld/HelloWorld.tsx @@ -0,0 +1,45 @@ +import React from 'react'; +import '../../dbr'; // import side effects. The license, engineResourcePath, so on. +import '../../cvr'; // import side effects. The license, engineResourcePath, so on. +import '../../dce'; // import side effects. The license, engineResourcePath, so on. +import { VideoCapture } from '../VideoCapture/VideoCapture'; +import { ImageCapture } from '../ImageCapture/ImageCapture'; +import './HelloWorld.css'; + +export 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 ? () : ""} +
+
+ ); + } +} + diff --git a/hello-world/react/src/components/ImageCapture/ImageCapture.css b/hello-world/react/src/components/ImageCapture/ImageCapture.css new file mode 100644 index 00000000..462c83a2 --- /dev/null +++ b/hello-world/react/src/components/ImageCapture/ImageCapture.css @@ -0,0 +1,7 @@ +.div-image-capture { + display: flex; + justify-content: center; + align-items: center; + 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..c8b8e34c --- /dev/null +++ b/hello-world/react/src/components/ImageCapture/ImageCapture.tsx @@ -0,0 +1,68 @@ +import React from 'react' +import { BarcodeResultItem } from '@dynamsoft/dynamsoft-barcode-reader'; +import { CaptureVisionRouter } from '@dynamsoft/dynamsoft-capture-vision-router'; +import './ImageCapture.css' + +export 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) { + (await this.pInit).dispose(); + } + } + + decodeImg = async (e: React.ChangeEvent) => { + try { + const router = await this.pInit; + const result = await router!.capture( + e.target.files![0], + 'ReadBarcodes_SpeedFirst' + ); + for (let item of result.items) { + alert((item as BarcodeResultItem).text); + } + if (!result.items.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 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('ImageCaptureComponent Unmount'); + } + + render() { + return ( +
+ ) + } +} \ No newline at end of file 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..1504babd --- /dev/null +++ b/hello-world/react/src/components/VideoCapture/VideoCapture.css @@ -0,0 +1,4 @@ +.div-ui-container { + width: 100%; + height: 70vh; +} \ No newline at end of file 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..ee31f735 --- /dev/null +++ b/hello-world/react/src/components/VideoCapture/VideoCapture.tsx @@ -0,0 +1,123 @@ +import React from "react"; +import { EnumCapturedResultItemType } from "@dynamsoft/dynamsoft-core" +import { DecodedBarcodesResult } from "@dynamsoft/dynamsoft-barcode-reader"; +import { + CameraEnhancer, + CameraView, +} from "@dynamsoft/dynamsoft-camera-enhancer"; +import { + CapturedResultReceiver, + CaptureVisionRouter, +} from "@dynamsoft/dynamsoft-capture-vision-router"; +import "./VideoCapture.css"; +import { MultiFrameResultCrossFilter } from "@dynamsoft/dynamsoft-utility"; + +export class VideoCapture extends React.Component { + pInit: Promise<{ + cameraView: CameraView; + cameraEnhancer: CameraEnhancer; + router: CaptureVisionRouter; + }> | null = null; + pDestroy: Promise | null = null; + + elRef: React.RefObject = React.createRef(); + + async init(): Promise<{ + cameraView: CameraView; + cameraEnhancer: CameraEnhancer; + router: CaptureVisionRouter; + }> { + try { + // Create a `CameraEnhancer` instance for camera control. + const cameraView = await CameraView.createInstance(); + const cameraEnhancer = await CameraEnhancer.createInstance(cameraView); + this.elRef.current!.innerText = ""; + this.elRef.current!.append(cameraView.getUIElement()); + + // 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 + ) => { + for (let item of result.barcodesResultItems) { + console.log(item.text); + } + }; + 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. + await cameraEnhancer.open(); + await router.startCapturing("ReadSingleBarcode"); + return { + cameraView, + cameraEnhancer, + router, + }; + } 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); + 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("VideoCaptureComponent Unmount"); + } + + shouldComponentUpdate() { + // Never update UI after mount, sdk use native way to bind event, update will remove it. + return false; + } + + render() { + return
; + } +} diff --git a/hello-world/react/src/cvr.ts b/hello-world/react/src/cvr.ts new file mode 100644 index 00000000..1344f36c --- /dev/null +++ b/hello-world/react/src/cvr.ts @@ -0,0 +1,35 @@ +import { + CaptureVisionRouter, + LicenseManager, +} from '@dynamsoft/dynamsoft-capture-vision-router'; + +CaptureVisionRouter.engineResourcePath = + 'https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-capture-vision-router@2.0.20-dev-20231023103654/dist/'; + +/** LICENSE ALERT - README + * To use the library, you need to first specify a license key using the API "initLicense" as shown below. + */ + +LicenseManager.initLicense( + 'DLS2eyJoYW5kc2hha2VDb2RlIjoiNjY2Ni03Nzc3IiwibWFpblNlcnZlclVSTCI6Imh0dHBzOi8vMTkyLjE2OC44LjEyMi9kbHMvIiwib3JnYW5pemF0aW9uSUQiOiI2NjY2IiwiY2hlY2tDb2RlIjoxNTEyMTgzMzg3fQ==' +); + +/** + * 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 + */ + +// Preload "BarcodeReader" module for reading barcodes. It will save time on the initial decoding by skipping the module loading. +CaptureVisionRouter.preloadModule(['DBR']).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); +}); diff --git a/hello-world/react/src/dbr.ts b/hello-world/react/src/dbr.ts new file mode 100644 index 00000000..15a0b729 --- /dev/null +++ b/hello-world/react/src/dbr.ts @@ -0,0 +1,3 @@ +import { BarcodeReaderModule } from "@dynamsoft/dynamsoft-barcode-reader"; + +BarcodeReaderModule.engineResourcePath = "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-barcode-reader@10.0.20-dev-20231020180049/dist/"; \ No newline at end of file diff --git a/hello-world/react/src/dce.ts b/hello-world/react/src/dce.ts new file mode 100644 index 00000000..ad0691a0 --- /dev/null +++ b/hello-world/react/src/dce.ts @@ -0,0 +1,3 @@ +import { CameraView } from "@dynamsoft/dynamsoft-camera-enhancer"; + +CameraView.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.0/dist/"; \ No newline at end of file diff --git a/hello-world/react/src/index.css b/hello-world/react/src/index.css new file mode 100644 index 00000000..ec2585e8 --- /dev/null +++ b/hello-world/react/src/index.css @@ -0,0 +1,13 @@ +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +code { + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + monospace; +} diff --git a/hello-world/react/src/index.tsx b/hello-world/react/src/index.tsx new file mode 100644 index 00000000..032464fb --- /dev/null +++ b/hello-world/react/src/index.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import App from './App'; +import reportWebVitals from './reportWebVitals'; + +const root = ReactDOM.createRoot( + document.getElementById('root') as HTMLElement +); +root.render( + + + +); + +// If you want to start measuring performance in your app, pass a function +// to log results (for example: reportWebVitals(console.log)) +// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals +reportWebVitals(); diff --git a/hello-world/react/src/logo.svg b/hello-world/react/src/logo.svg new file mode 100644 index 00000000..9dfc1c05 --- /dev/null +++ b/hello-world/react/src/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/hello-world/react/src/react-app-env.d.ts b/hello-world/react/src/react-app-env.d.ts new file mode 100644 index 00000000..6431bc5f --- /dev/null +++ b/hello-world/react/src/react-app-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/hello-world/react/src/reportWebVitals.ts b/hello-world/react/src/reportWebVitals.ts new file mode 100644 index 00000000..49a2a16e --- /dev/null +++ b/hello-world/react/src/reportWebVitals.ts @@ -0,0 +1,15 @@ +import { ReportHandler } from 'web-vitals'; + +const reportWebVitals = (onPerfEntry?: ReportHandler) => { + if (onPerfEntry && onPerfEntry instanceof Function) { + import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { + getCLS(onPerfEntry); + getFID(onPerfEntry); + getFCP(onPerfEntry); + getLCP(onPerfEntry); + getTTFB(onPerfEntry); + }); + } +}; + +export default reportWebVitals; 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/hello-world/react/tsconfig.json b/hello-world/react/tsconfig.json new file mode 100644 index 00000000..a273b0cf --- /dev/null +++ b/hello-world/react/tsconfig.json @@ -0,0 +1,26 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": [ + "dom", + "dom.iterable", + "esnext" + ], + "allowJs": true, + "skipLibCheck": true, + "esModuleInterop": true, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "noFallthroughCasesInSwitch": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx" + }, + "include": [ + "src" + ] +} From 126aa135b79d3ec4f10e65beb21c99c61ac4ac58 Mon Sep 17 00:00:00 2001 From: Cube <877211593@qq.com> Date: Mon, 23 Oct 2023 16:33:43 +0800 Subject: [PATCH 14/95] update --- hello-world/angular/package.json | 2 +- .../app/hello-world/hello-world.component.ts | 3 - hello-world/hello-world.html | 2 +- hello-world/react-hooks/.gitignore | 23 ++++ hello-world/react-hooks/.npmrc | 2 + hello-world/react-hooks/README.md | 46 +++++++ hello-world/react-hooks/package.json | 46 +++++++ hello-world/react-hooks/public/favicon.ico | Bin 0 -> 3870 bytes hello-world/react-hooks/public/index.html | 43 ++++++ hello-world/react-hooks/public/logo192.png | Bin 0 -> 5347 bytes hello-world/react-hooks/public/logo512.png | Bin 0 -> 9664 bytes hello-world/react-hooks/public/manifest.json | 25 ++++ hello-world/react-hooks/public/robots.txt | 3 + hello-world/react-hooks/src/App.css | 38 ++++++ hello-world/react-hooks/src/App.test.tsx | 9 ++ hello-world/react-hooks/src/App.tsx | 12 ++ .../src/components/HelloWorld/HelloWorld.css | 28 ++++ .../src/components/HelloWorld/HelloWorld.tsx | 53 ++++++++ .../components/ImageCapture/ImageCapture.css | 7 + .../components/ImageCapture/ImageCapture.tsx | 76 +++++++++++ .../components/VideoCapture/VideoCapture.css | 4 + .../components/VideoCapture/VideoCapture.tsx | 123 +++++++++++++++++ hello-world/react-hooks/src/cvr.ts | 35 +++++ hello-world/react-hooks/src/dbr.ts | 3 + hello-world/react-hooks/src/dce.ts | 3 + hello-world/react-hooks/src/index.css | 13 ++ hello-world/react-hooks/src/index.tsx | 19 +++ hello-world/react-hooks/src/logo.svg | 1 + .../react-hooks/src/react-app-env.d.ts | 1 + .../react-hooks/src/reportWebVitals.ts | 15 ++ hello-world/react-hooks/src/setupTests.ts | 5 + hello-world/react-hooks/tsconfig.json | 26 ++++ hello-world/read-video-es6.html | 2 +- hello-world/read-video-requirejs.html | 2 +- hello-world/vue3/.gitignore | 28 ++++ hello-world/vue3/.npmrc | 2 + hello-world/vue3/README.md | 40 ++++++ hello-world/vue3/env.d.ts | 1 + hello-world/vue3/index.html | 13 ++ hello-world/vue3/package.json | 28 ++++ hello-world/vue3/public/favicon.ico | Bin 0 -> 4286 bytes hello-world/vue3/src/App.vue | 10 ++ hello-world/vue3/src/assets/base.css | 86 ++++++++++++ hello-world/vue3/src/assets/logo.svg | 1 + hello-world/vue3/src/assets/main.css | 35 +++++ .../vue3/src/components/HelloWorld.vue | 65 +++++++++ .../vue3/src/components/ImageCapture.vue | 67 +++++++++ .../vue3/src/components/VideoCapture.vue | 128 ++++++++++++++++++ hello-world/vue3/src/cvr.ts | 35 +++++ hello-world/vue3/src/dbr.ts | 3 + hello-world/vue3/src/dce.ts | 3 + hello-world/vue3/src/main.ts | 6 + hello-world/vue3/tsconfig.app.json | 12 ++ hello-world/vue3/tsconfig.json | 11 ++ hello-world/vue3/tsconfig.node.json | 16 +++ hello-world/vue3/vite.config.ts | 22 +++ 56 files changed, 1275 insertions(+), 7 deletions(-) create mode 100644 hello-world/react-hooks/.gitignore create mode 100644 hello-world/react-hooks/.npmrc create mode 100644 hello-world/react-hooks/README.md create mode 100644 hello-world/react-hooks/package.json create mode 100644 hello-world/react-hooks/public/favicon.ico create mode 100644 hello-world/react-hooks/public/index.html create mode 100644 hello-world/react-hooks/public/logo192.png create mode 100644 hello-world/react-hooks/public/logo512.png create mode 100644 hello-world/react-hooks/public/manifest.json create mode 100644 hello-world/react-hooks/public/robots.txt create mode 100644 hello-world/react-hooks/src/App.css create mode 100644 hello-world/react-hooks/src/App.test.tsx create mode 100644 hello-world/react-hooks/src/App.tsx create mode 100644 hello-world/react-hooks/src/components/HelloWorld/HelloWorld.css create mode 100644 hello-world/react-hooks/src/components/HelloWorld/HelloWorld.tsx create mode 100644 hello-world/react-hooks/src/components/ImageCapture/ImageCapture.css create mode 100644 hello-world/react-hooks/src/components/ImageCapture/ImageCapture.tsx create mode 100644 hello-world/react-hooks/src/components/VideoCapture/VideoCapture.css create mode 100644 hello-world/react-hooks/src/components/VideoCapture/VideoCapture.tsx create mode 100644 hello-world/react-hooks/src/cvr.ts create mode 100644 hello-world/react-hooks/src/dbr.ts create mode 100644 hello-world/react-hooks/src/dce.ts create mode 100644 hello-world/react-hooks/src/index.css create mode 100644 hello-world/react-hooks/src/index.tsx create mode 100644 hello-world/react-hooks/src/logo.svg create mode 100644 hello-world/react-hooks/src/react-app-env.d.ts create mode 100644 hello-world/react-hooks/src/reportWebVitals.ts create mode 100644 hello-world/react-hooks/src/setupTests.ts create mode 100644 hello-world/react-hooks/tsconfig.json create mode 100644 hello-world/vue3/.gitignore create mode 100644 hello-world/vue3/.npmrc create mode 100644 hello-world/vue3/README.md create mode 100644 hello-world/vue3/env.d.ts create mode 100644 hello-world/vue3/index.html create mode 100644 hello-world/vue3/package.json create mode 100644 hello-world/vue3/public/favicon.ico create mode 100644 hello-world/vue3/src/App.vue create mode 100644 hello-world/vue3/src/assets/base.css create mode 100644 hello-world/vue3/src/assets/logo.svg create mode 100644 hello-world/vue3/src/assets/main.css create mode 100644 hello-world/vue3/src/components/HelloWorld.vue create mode 100644 hello-world/vue3/src/components/ImageCapture.vue create mode 100644 hello-world/vue3/src/components/VideoCapture.vue create mode 100644 hello-world/vue3/src/cvr.ts create mode 100644 hello-world/vue3/src/dbr.ts create mode 100644 hello-world/vue3/src/dce.ts create mode 100644 hello-world/vue3/src/main.ts create mode 100644 hello-world/vue3/tsconfig.app.json create mode 100644 hello-world/vue3/tsconfig.json create mode 100644 hello-world/vue3/tsconfig.node.json create mode 100644 hello-world/vue3/vite.config.ts diff --git a/hello-world/angular/package.json b/hello-world/angular/package.json index e3813246..8458119c 100644 --- a/hello-world/angular/package.json +++ b/hello-world/angular/package.json @@ -19,7 +19,7 @@ "@angular/platform-browser-dynamic": "^16.2.0", "@angular/router": "^16.2.0", "@dynamsoft/dynamsoft-barcode-reader": "^10.0.20-dev-20231020180049", - "@dynamsoft/dynamsoft-camera-enhancer": "^4.0.1-dev-20231020132130", + "@dynamsoft/dynamsoft-camera-enhancer": "^4.0.1-dev-20231023154255", "@dynamsoft/dynamsoft-capture-vision-router": "^2.0.20-dev-20231023103654", "@dynamsoft/dynamsoft-utility": "^1.0.10-dev-20231023103736", "rxjs": "~7.8.0", 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 index 48e3b3f3..d1d180b2 100644 --- a/hello-world/angular/src/app/hello-world/hello-world.component.ts +++ b/hello-world/angular/src/app/hello-world/hello-world.component.ts @@ -1,7 +1,4 @@ import { Component } from '@angular/core'; -// import '../dbr'; // import side effects. The license, engineResourcePath, so on. -// import '../../cvr'; // import side effects. The license, engineResourcePath, so on. -// import '../dce'; // import side effects. The license, engineResourcePath, so on. import '../../dbr'; // import side effects. The license, engineResourcePath, so on. import '../../cvr'; // import side effects. The license, engineResourcePath, so on. import '../../dce'; // import side effects. The license, engineResourcePath, so on. diff --git a/hello-world/hello-world.html b/hello-world/hello-world.html index eec95cb7..96f133ab 100644 --- a/hello-world/hello-world.html +++ b/hello-world/hello-world.html @@ -20,7 +20,7 @@ - + diff --git a/hello-world/react-hooks/.gitignore b/hello-world/react-hooks/.gitignore new file mode 100644 index 00000000..4d29575d --- /dev/null +++ b/hello-world/react-hooks/.gitignore @@ -0,0 +1,23 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# production +/build + +# misc +.DS_Store +.env.local +.env.development.local +.env.test.local +.env.production.local + +npm-debug.log* +yarn-debug.log* +yarn-error.log* diff --git a/hello-world/react-hooks/.npmrc b/hello-world/react-hooks/.npmrc new file mode 100644 index 00000000..3a55404b --- /dev/null +++ b/hello-world/react-hooks/.npmrc @@ -0,0 +1,2 @@ +@scannerproxy:registry=http://npm.scannerproxy.com/ +@dynamsoft:registry=http://npm.scannerproxy.com/ \ No newline at end of file diff --git a/hello-world/react-hooks/README.md b/hello-world/react-hooks/README.md new file mode 100644 index 00000000..b87cb004 --- /dev/null +++ b/hello-world/react-hooks/README.md @@ -0,0 +1,46 @@ +# Getting Started with Create React App + +This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). + +## Available Scripts + +In the project directory, you can run: + +### `npm start` + +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. + +### `npm test` + +Launches the test runner in the interactive watch mode.\ +See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. + +### `npm run 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. + +### `npm run eject` + +**Note: this is a one-way operation. Once you `eject`, you can’t go back!** + +If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. + +Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. + +You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. + +## Learn More + +You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). + +To learn React, check out the [React documentation](https://reactjs.org/). diff --git a/hello-world/react-hooks/package.json b/hello-world/react-hooks/package.json new file mode 100644 index 00000000..7c0894b0 --- /dev/null +++ b/hello-world/react-hooks/package.json @@ -0,0 +1,46 @@ +{ + "name": "hello-world", + "version": "0.1.0", + "private": true, + "dependencies": { + "@dynamsoft/dynamsoft-camera-enhancer": "^4.0.1-dev-20231023154255", + "@dynamsoft/dynamsoft-capture-vision-router": "^2.0.20-dev-20231023103654", + "@dynamsoft/dynamsoft-utility": "^1.0.10-dev-20231023103736", + "@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.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.9.5", + "web-vitals": "^2.1.4" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test", + "eject": "react-scripts eject" + }, + "eslintConfig": { + "extends": [ + "react-app", + "react-app/jest" + ] + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + } +} diff --git a/hello-world/react-hooks/public/favicon.ico b/hello-world/react-hooks/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..a11777cc471a4344702741ab1c8a588998b1311a GIT binary patch literal 3870 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 baj7?x%VD!5Cxk2YbYLNVeiXvvpMCWYo=by@ literal 0 HcmV?d00001 diff --git a/hello-world/react-hooks/public/index.html b/hello-world/react-hooks/public/index.html new file mode 100644 index 00000000..aa069f27 --- /dev/null +++ b/hello-world/react-hooks/public/index.html @@ -0,0 +1,43 @@ + + + + + + + + + + + + + React App + + + +
+ + + diff --git a/hello-world/react-hooks/public/logo192.png b/hello-world/react-hooks/public/logo192.png new file mode 100644 index 0000000000000000000000000000000000000000..fc44b0a3796c0e0a64c3d858ca038bd4570465d9 GIT binary patch literal 5347 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 b{|{}U^kRn2wo}j7|0ATu<;8xA7zX}7|B6mN literal 0 HcmV?d00001 diff --git a/hello-world/react-hooks/public/manifest.json b/hello-world/react-hooks/public/manifest.json new file mode 100644 index 00000000..080d6c77 --- /dev/null +++ b/hello-world/react-hooks/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-hooks/public/robots.txt b/hello-world/react-hooks/public/robots.txt new file mode 100644 index 00000000..e9e57dc4 --- /dev/null +++ b/hello-world/react-hooks/public/robots.txt @@ -0,0 +1,3 @@ +# https://www.robotstxt.org/robotstxt.html +User-agent: * +Disallow: diff --git a/hello-world/react-hooks/src/App.css b/hello-world/react-hooks/src/App.css new file mode 100644 index 00000000..74b5e053 --- /dev/null +++ b/hello-world/react-hooks/src/App.css @@ -0,0 +1,38 @@ +.App { + text-align: center; +} + +.App-logo { + height: 40vmin; + pointer-events: none; +} + +@media (prefers-reduced-motion: no-preference) { + .App-logo { + animation: App-logo-spin infinite 20s linear; + } +} + +.App-header { + background-color: #282c34; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: calc(10px + 2vmin); + color: white; +} + +.App-link { + color: #61dafb; +} + +@keyframes App-logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} diff --git a/hello-world/react-hooks/src/App.test.tsx b/hello-world/react-hooks/src/App.test.tsx new file mode 100644 index 00000000..2a68616d --- /dev/null +++ b/hello-world/react-hooks/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/hello-world/react-hooks/src/App.tsx b/hello-world/react-hooks/src/App.tsx new file mode 100644 index 00000000..4b4a9922 --- /dev/null +++ b/hello-world/react-hooks/src/App.tsx @@ -0,0 +1,12 @@ +import HelloWorld from './components/HelloWorld/HelloWorld'; +import './App.css'; + +function App() { + return ( +
+ +
+ ); +} + +export default App; diff --git a/hello-world/react-hooks/src/components/HelloWorld/HelloWorld.css b/hello-world/react-hooks/src/components/HelloWorld/HelloWorld.css new file mode 100644 index 00000000..d45ab768 --- /dev/null +++ b/hello-world/react-hooks/src/components/HelloWorld/HelloWorld.css @@ -0,0 +1,28 @@ +.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; + 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..ce67f0db --- /dev/null +++ b/hello-world/react-hooks/src/components/HelloWorld/HelloWorld.tsx @@ -0,0 +1,53 @@ +import React, { useState } from "react"; +import "../../dbr"; // import side effects. The license, engineResourcePath, so on. +import "../../cvr"; // import side effects. The license, engineResourcePath, so on. +import "../../dce"; // 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/hello-world/react-hooks/src/components/ImageCapture/ImageCapture.css b/hello-world/react-hooks/src/components/ImageCapture/ImageCapture.css new file mode 100644 index 00000000..462c83a2 --- /dev/null +++ b/hello-world/react-hooks/src/components/ImageCapture/ImageCapture.css @@ -0,0 +1,7 @@ +.div-image-capture { + display: flex; + justify-content: center; + align-items: center; + 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..9c3fb9af --- /dev/null +++ b/hello-world/react-hooks/src/components/ImageCapture/ImageCapture.tsx @@ -0,0 +1,76 @@ +import React, { useRef, useEffect } from "react"; +import { BarcodeResultItem } from "@dynamsoft/dynamsoft-barcode-reader"; +import { CaptureVisionRouter } from "@dynamsoft/dynamsoft-capture-vision-router"; +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) { + (await pInit.current).dispose(); + } + }; + + const decodeImg = async (e: React.ChangeEvent) => { + try { + const router = (await pInit.current)!; + const result = await router.capture( + e.target.files![0], + "ReadBarcodes_SpeedFirst" + ); + for (let item of result.items) { + alert((item as BarcodeResultItem).text); + } + if (!result.items.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(() => { + (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..1504babd --- /dev/null +++ b/hello-world/react-hooks/src/components/VideoCapture/VideoCapture.css @@ -0,0 +1,4 @@ +.div-ui-container { + width: 100%; + height: 70vh; +} \ No newline at end of file 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..a4df06a4 --- /dev/null +++ b/hello-world/react-hooks/src/components/VideoCapture/VideoCapture.tsx @@ -0,0 +1,123 @@ +import React, { useEffect, useRef } from "react"; +import { EnumCapturedResultItemType } from "@dynamsoft/dynamsoft-core"; +import { DecodedBarcodesResult } from "@dynamsoft/dynamsoft-barcode-reader"; +import { + CameraEnhancer, + CameraView, +} from "@dynamsoft/dynamsoft-camera-enhancer"; +import { + CapturedResultReceiver, + CaptureVisionRouter, +} from "@dynamsoft/dynamsoft-capture-vision-router"; +import { MultiFrameResultCrossFilter } from "@dynamsoft/dynamsoft-utility"; +import "./VideoCapture.css"; + +function VideoCapture() { + 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. + const cameraView = await CameraView.createInstance(); + const cameraEnhancer = await CameraEnhancer.createInstance(cameraView); + elRef.current!.innerText = ""; + elRef.current!.append(cameraView.getUIElement()); + + // 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 + ) => { + for (let item of result.barcodesResultItems) { + console.log(item.text); + } + }; + 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. + await cameraEnhancer.open(); + await router.startCapturing("ReadSingleBarcode"); + return { + cameraView, + cameraEnhancer, + router, + }; + } 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); + throw ex; + } + }; + + const destroy = async (): Promise => { + if (pInit.current) { + const { cameraView, cameraEnhancer, router } = await pInit.current; + router.dispose(); + cameraEnhancer.dispose(); + cameraView.dispose(); + } + }; + const elRef = useRef(null); + + 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("ImageCapture Component Unmount"); + })(); + }; + }, []); + + return
; +} + +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..1344f36c --- /dev/null +++ b/hello-world/react-hooks/src/cvr.ts @@ -0,0 +1,35 @@ +import { + CaptureVisionRouter, + LicenseManager, +} from '@dynamsoft/dynamsoft-capture-vision-router'; + +CaptureVisionRouter.engineResourcePath = + 'https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-capture-vision-router@2.0.20-dev-20231023103654/dist/'; + +/** LICENSE ALERT - README + * To use the library, you need to first specify a license key using the API "initLicense" as shown below. + */ + +LicenseManager.initLicense( + 'DLS2eyJoYW5kc2hha2VDb2RlIjoiNjY2Ni03Nzc3IiwibWFpblNlcnZlclVSTCI6Imh0dHBzOi8vMTkyLjE2OC44LjEyMi9kbHMvIiwib3JnYW5pemF0aW9uSUQiOiI2NjY2IiwiY2hlY2tDb2RlIjoxNTEyMTgzMzg3fQ==' +); + +/** + * 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 + */ + +// Preload "BarcodeReader" module for reading barcodes. It will save time on the initial decoding by skipping the module loading. +CaptureVisionRouter.preloadModule(['DBR']).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); +}); diff --git a/hello-world/react-hooks/src/dbr.ts b/hello-world/react-hooks/src/dbr.ts new file mode 100644 index 00000000..15a0b729 --- /dev/null +++ b/hello-world/react-hooks/src/dbr.ts @@ -0,0 +1,3 @@ +import { BarcodeReaderModule } from "@dynamsoft/dynamsoft-barcode-reader"; + +BarcodeReaderModule.engineResourcePath = "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-barcode-reader@10.0.20-dev-20231020180049/dist/"; \ No newline at end of file diff --git a/hello-world/react-hooks/src/dce.ts b/hello-world/react-hooks/src/dce.ts new file mode 100644 index 00000000..ad0691a0 --- /dev/null +++ b/hello-world/react-hooks/src/dce.ts @@ -0,0 +1,3 @@ +import { CameraView } from "@dynamsoft/dynamsoft-camera-enhancer"; + +CameraView.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.0/dist/"; \ No newline at end of file diff --git a/hello-world/react-hooks/src/index.css b/hello-world/react-hooks/src/index.css new file mode 100644 index 00000000..ec2585e8 --- /dev/null +++ b/hello-world/react-hooks/src/index.css @@ -0,0 +1,13 @@ +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +code { + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + monospace; +} diff --git a/hello-world/react-hooks/src/index.tsx b/hello-world/react-hooks/src/index.tsx new file mode 100644 index 00000000..032464fb --- /dev/null +++ b/hello-world/react-hooks/src/index.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import App from './App'; +import reportWebVitals from './reportWebVitals'; + +const root = ReactDOM.createRoot( + document.getElementById('root') as HTMLElement +); +root.render( + + + +); + +// If you want to start measuring performance in your app, pass a function +// to log results (for example: reportWebVitals(console.log)) +// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals +reportWebVitals(); diff --git a/hello-world/react-hooks/src/logo.svg b/hello-world/react-hooks/src/logo.svg new file mode 100644 index 00000000..9dfc1c05 --- /dev/null +++ b/hello-world/react-hooks/src/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/hello-world/react-hooks/src/react-app-env.d.ts b/hello-world/react-hooks/src/react-app-env.d.ts new file mode 100644 index 00000000..6431bc5f --- /dev/null +++ b/hello-world/react-hooks/src/react-app-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/hello-world/react-hooks/src/reportWebVitals.ts b/hello-world/react-hooks/src/reportWebVitals.ts new file mode 100644 index 00000000..49a2a16e --- /dev/null +++ b/hello-world/react-hooks/src/reportWebVitals.ts @@ -0,0 +1,15 @@ +import { ReportHandler } from 'web-vitals'; + +const reportWebVitals = (onPerfEntry?: ReportHandler) => { + if (onPerfEntry && onPerfEntry instanceof Function) { + import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { + getCLS(onPerfEntry); + getFID(onPerfEntry); + getFCP(onPerfEntry); + getLCP(onPerfEntry); + getTTFB(onPerfEntry); + }); + } +}; + +export default reportWebVitals; diff --git a/hello-world/react-hooks/src/setupTests.ts b/hello-world/react-hooks/src/setupTests.ts new file mode 100644 index 00000000..8f2609b7 --- /dev/null +++ b/hello-world/react-hooks/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/hello-world/react-hooks/tsconfig.json b/hello-world/react-hooks/tsconfig.json new file mode 100644 index 00000000..a273b0cf --- /dev/null +++ b/hello-world/react-hooks/tsconfig.json @@ -0,0 +1,26 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": [ + "dom", + "dom.iterable", + "esnext" + ], + "allowJs": true, + "skipLibCheck": true, + "esModuleInterop": true, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "noFallthroughCasesInSwitch": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx" + }, + "include": [ + "src" + ] +} diff --git a/hello-world/read-video-es6.html b/hello-world/read-video-es6.html index 083f21f4..3a577a6d 100644 --- a/hello-world/read-video-es6.html +++ b/hello-world/read-video-es6.html @@ -37,7 +37,7 @@

Hello World for ES6 (Decode via Camera)

"@dynamsoft/dynamsoft-document-normalizer": "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-document-normalizer@2.0.12-dev-20231019180133/dist/ddn.mjs", "@dynamsoft/dynamsoft-capture-vision-router": "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-capture-vision-router@2.0.20-dev-20231023103654/dist/cvr.mjs", "dynamsoft-capture-vision-router": "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.0.11/dist/cvr.mjs", - "@dynamsoft/dynamsoft-camera-enhancer": "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-camera-enhancer@4.0.1-dev-20231020132130/dist/dce.mjs" + "@dynamsoft/dynamsoft-camera-enhancer": "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-camera-enhancer@4.0.1-dev-20231023131759/dist/dce.mjs" } } diff --git a/hello-world/read-video-requirejs.html b/hello-world/read-video-requirejs.html index 2f093deb..145ab54c 100644 --- a/hello-world/read-video-requirejs.html +++ b/hello-world/read-video-requirejs.html @@ -45,7 +45,7 @@

Hello World for RequireJS (Decode via Camera)

"dynamsoft-capture-vision-router": "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.0.11/dist/cvr", "@dynamsoft/dynamsoft-camera-enhancer": - "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-camera-enhancer@4.0.1-dev-20231020132130/dist/dce", + "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-camera-enhancer@4.0.1-dev-20231023131759/dist/dce", }, }); diff --git a/hello-world/vue3/.gitignore b/hello-world/vue3/.gitignore new file mode 100644 index 00000000..38adffa6 --- /dev/null +++ b/hello-world/vue3/.gitignore @@ -0,0 +1,28 @@ +# 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 +coverage +*.local + +/cypress/videos/ +/cypress/screenshots/ + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/hello-world/vue3/.npmrc b/hello-world/vue3/.npmrc new file mode 100644 index 00000000..3a55404b --- /dev/null +++ b/hello-world/vue3/.npmrc @@ -0,0 +1,2 @@ +@scannerproxy:registry=http://npm.scannerproxy.com/ +@dynamsoft:registry=http://npm.scannerproxy.com/ \ No newline at end of file diff --git a/hello-world/vue3/README.md b/hello-world/vue3/README.md new file mode 100644 index 00000000..8c8d8e74 --- /dev/null +++ b/hello-world/vue3/README.md @@ -0,0 +1,40 @@ +# vue3 + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Type Support for `.vue` Imports in TS + +TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types. + +If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: + +1. Disable the built-in TypeScript Extension + 1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette + 2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` +2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## 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 +``` diff --git a/hello-world/vue3/env.d.ts b/hello-world/vue3/env.d.ts new file mode 100644 index 00000000..11f02fe2 --- /dev/null +++ b/hello-world/vue3/env.d.ts @@ -0,0 +1 @@ +/// diff --git a/hello-world/vue3/index.html b/hello-world/vue3/index.html new file mode 100644 index 00000000..a8885448 --- /dev/null +++ b/hello-world/vue3/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/hello-world/vue3/package.json b/hello-world/vue3/package.json new file mode 100644 index 00000000..0d21f9de --- /dev/null +++ b/hello-world/vue3/package.json @@ -0,0 +1,28 @@ +{ + "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/dynamsoft-camera-enhancer": "^4.0.1-dev-20231023131759", + "@dynamsoft/dynamsoft-capture-vision-router": "^2.0.20-dev-20231023103654", + "@dynamsoft/dynamsoft-utility": "^1.0.10-dev-20231023103736", + "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/hello-world/vue3/public/favicon.ico b/hello-world/vue3/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/hello-world/vue3/src/App.vue b/hello-world/vue3/src/App.vue new file mode 100644 index 00000000..992b434f --- /dev/null +++ b/hello-world/vue3/src/App.vue @@ -0,0 +1,10 @@ + + + + + diff --git a/hello-world/vue3/src/assets/base.css b/hello-world/vue3/src/assets/base.css new file mode 100644 index 00000000..8816868a --- /dev/null +++ b/hello-world/vue3/src/assets/base.css @@ -0,0 +1,86 @@ +/* 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-dark-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; + 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/hello-world/vue3/src/assets/logo.svg b/hello-world/vue3/src/assets/logo.svg new file mode 100644 index 00000000..75656603 --- /dev/null +++ b/hello-world/vue3/src/assets/logo.svg @@ -0,0 +1 @@ + diff --git a/hello-world/vue3/src/assets/main.css b/hello-world/vue3/src/assets/main.css new file mode 100644 index 00000000..13879920 --- /dev/null +++ b/hello-world/vue3/src/assets/main.css @@ -0,0 +1,35 @@ +@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/hello-world/vue3/src/components/HelloWorld.vue b/hello-world/vue3/src/components/HelloWorld.vue new file mode 100644 index 00000000..7e137c78 --- /dev/null +++ b/hello-world/vue3/src/components/HelloWorld.vue @@ -0,0 +1,65 @@ + + + + + diff --git a/hello-world/vue3/src/components/ImageCapture.vue b/hello-world/vue3/src/components/ImageCapture.vue new file mode 100644 index 00000000..ba63e869 --- /dev/null +++ b/hello-world/vue3/src/components/ImageCapture.vue @@ -0,0 +1,67 @@ + + + + + diff --git a/hello-world/vue3/src/components/VideoCapture.vue b/hello-world/vue3/src/components/VideoCapture.vue new file mode 100644 index 00000000..7975219c --- /dev/null +++ b/hello-world/vue3/src/components/VideoCapture.vue @@ -0,0 +1,128 @@ + + + + + diff --git a/hello-world/vue3/src/cvr.ts b/hello-world/vue3/src/cvr.ts new file mode 100644 index 00000000..1344f36c --- /dev/null +++ b/hello-world/vue3/src/cvr.ts @@ -0,0 +1,35 @@ +import { + CaptureVisionRouter, + LicenseManager, +} from '@dynamsoft/dynamsoft-capture-vision-router'; + +CaptureVisionRouter.engineResourcePath = + 'https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-capture-vision-router@2.0.20-dev-20231023103654/dist/'; + +/** LICENSE ALERT - README + * To use the library, you need to first specify a license key using the API "initLicense" as shown below. + */ + +LicenseManager.initLicense( + 'DLS2eyJoYW5kc2hha2VDb2RlIjoiNjY2Ni03Nzc3IiwibWFpblNlcnZlclVSTCI6Imh0dHBzOi8vMTkyLjE2OC44LjEyMi9kbHMvIiwib3JnYW5pemF0aW9uSUQiOiI2NjY2IiwiY2hlY2tDb2RlIjoxNTEyMTgzMzg3fQ==' +); + +/** + * 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 + */ + +// Preload "BarcodeReader" module for reading barcodes. It will save time on the initial decoding by skipping the module loading. +CaptureVisionRouter.preloadModule(['DBR']).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); +}); diff --git a/hello-world/vue3/src/dbr.ts b/hello-world/vue3/src/dbr.ts new file mode 100644 index 00000000..15a0b729 --- /dev/null +++ b/hello-world/vue3/src/dbr.ts @@ -0,0 +1,3 @@ +import { BarcodeReaderModule } from "@dynamsoft/dynamsoft-barcode-reader"; + +BarcodeReaderModule.engineResourcePath = "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-barcode-reader@10.0.20-dev-20231020180049/dist/"; \ No newline at end of file diff --git a/hello-world/vue3/src/dce.ts b/hello-world/vue3/src/dce.ts new file mode 100644 index 00000000..ad0691a0 --- /dev/null +++ b/hello-world/vue3/src/dce.ts @@ -0,0 +1,3 @@ +import { CameraView } from "@dynamsoft/dynamsoft-camera-enhancer"; + +CameraView.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.0/dist/"; \ No newline at end of file diff --git a/hello-world/vue3/src/main.ts b/hello-world/vue3/src/main.ts new file mode 100644 index 00000000..0ac3a5ff --- /dev/null +++ b/hello-world/vue3/src/main.ts @@ -0,0 +1,6 @@ +import './assets/main.css' + +import { createApp } from 'vue' +import App from './App.vue' + +createApp(App).mount('#app') diff --git a/hello-world/vue3/tsconfig.app.json b/hello-world/vue3/tsconfig.app.json new file mode 100644 index 00000000..3e5b621e --- /dev/null +++ b/hello-world/vue3/tsconfig.app.json @@ -0,0 +1,12 @@ +{ + "extends": "@vue/tsconfig/tsconfig.dom.json", + "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], + "exclude": ["src/**/__tests__/*"], + "compilerOptions": { + "composite": true, + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + } + } +} diff --git a/hello-world/vue3/tsconfig.json b/hello-world/vue3/tsconfig.json new file mode 100644 index 00000000..66b5e570 --- /dev/null +++ b/hello-world/vue3/tsconfig.json @@ -0,0 +1,11 @@ +{ + "files": [], + "references": [ + { + "path": "./tsconfig.node.json" + }, + { + "path": "./tsconfig.app.json" + } + ] +} diff --git a/hello-world/vue3/tsconfig.node.json b/hello-world/vue3/tsconfig.node.json new file mode 100644 index 00000000..dee96bed --- /dev/null +++ b/hello-world/vue3/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/vue3/vite.config.ts b/hello-world/vue3/vite.config.ts new file mode 100644 index 00000000..2908fade --- /dev/null +++ b/hello-world/vue3/vite.config.ts @@ -0,0 +1,22 @@ +import { fileURLToPath, URL } from 'node:url' + +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue({ + template: { + compilerOptions: { + isCustomElement: (tag) => tag.includes('-') + } + } + }), + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) From fa0c74ea8a06fbcc0c172c61cc5a0c3c525582ed Mon Sep 17 00:00:00 2001 From: Cube <877211593@qq.com> Date: Mon, 23 Oct 2023 17:31:34 +0800 Subject: [PATCH 15/95] update --- .../image-capture/image-capture.component.ts | 1 + .../video-capture/video-capture.component.ts | 2 +- hello-world/hello-world.html | 2 +- .../components/ImageCapture/ImageCapture.tsx | 1 + .../components/VideoCapture/VideoCapture.tsx | 2 +- .../components/ImageCapture/ImageCapture.tsx | 1 + .../components/VideoCapture/VideoCapture.tsx | 2 +- hello-world/read-an-image.html | 1 + hello-world/read-video-es6.html | 31 ++++++++++++---- hello-world/read-video-requirejs.html | 37 ++++++++++++++----- .../vue3/src/components/ImageCapture.vue | 1 + .../vue3/src/components/VideoCapture.vue | 2 +- 12 files changed, 61 insertions(+), 22 deletions(-) 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 index 273dc56d..a1bce9b9 100644 --- a/hello-world/angular/src/app/image-capture/image-capture.component.ts +++ b/hello-world/angular/src/app/image-capture/image-capture.component.ts @@ -13,6 +13,7 @@ export class ImageCaptureComponent { 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' 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 index 59862a59..0c7b6e57 100644 --- a/hello-world/angular/src/app/video-capture/video-capture.component.ts +++ b/hello-world/angular/src/app/video-capture/video-capture.component.ts @@ -68,7 +68,7 @@ export class VideoCaptureComponent { ); await router.addResultFilter(filter); - // Open camera and start scanning. + // Open camera and start scanning single barcode. await cameraEnhancer.open(); await router.startCapturing('ReadSingleBarcode'); return { diff --git a/hello-world/hello-world.html b/hello-world/hello-world.html index 96f133ab..a9c3628d 100644 --- a/hello-world/hello-world.html +++ b/hello-world/hello-world.html @@ -91,7 +91,7 @@

Hello World (Decode via Camera)

); await router.addResultFilter(filter); - // Open camera and start scanning. + // Open camera and start scanning single barcode. await cameraEnhancer.open(); await router.startCapturing("ReadSingleBarcode"); } catch (ex) { diff --git a/hello-world/react-hooks/src/components/ImageCapture/ImageCapture.tsx b/hello-world/react-hooks/src/components/ImageCapture/ImageCapture.tsx index 9c3fb9af..e4f8aa71 100644 --- a/hello-world/react-hooks/src/components/ImageCapture/ImageCapture.tsx +++ b/hello-world/react-hooks/src/components/ImageCapture/ImageCapture.tsx @@ -21,6 +21,7 @@ function ImageCapture() { 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" diff --git a/hello-world/react-hooks/src/components/VideoCapture/VideoCapture.tsx b/hello-world/react-hooks/src/components/VideoCapture/VideoCapture.tsx index a4df06a4..59fb6276 100644 --- a/hello-world/react-hooks/src/components/VideoCapture/VideoCapture.tsx +++ b/hello-world/react-hooks/src/components/VideoCapture/VideoCapture.tsx @@ -66,7 +66,7 @@ function VideoCapture() { ); await router.addResultFilter(filter); - // Open camera and start scanning. + // Open camera and start scanning single barcode. await cameraEnhancer.open(); await router.startCapturing("ReadSingleBarcode"); return { diff --git a/hello-world/react/src/components/ImageCapture/ImageCapture.tsx b/hello-world/react/src/components/ImageCapture/ImageCapture.tsx index c8b8e34c..46f458f4 100644 --- a/hello-world/react/src/components/ImageCapture/ImageCapture.tsx +++ b/hello-world/react/src/components/ImageCapture/ImageCapture.tsx @@ -21,6 +21,7 @@ export class ImageCapture extends React.Component { 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' diff --git a/hello-world/react/src/components/VideoCapture/VideoCapture.tsx b/hello-world/react/src/components/VideoCapture/VideoCapture.tsx index ee31f735..fef4e87f 100644 --- a/hello-world/react/src/components/VideoCapture/VideoCapture.tsx +++ b/hello-world/react/src/components/VideoCapture/VideoCapture.tsx @@ -66,7 +66,7 @@ export class VideoCapture extends React.Component { ); await router.addResultFilter(filter); - // Open camera and start scanning. + // Open camera and start scanning single barcode. await cameraEnhancer.open(); await router.startCapturing("ReadSingleBarcode"); return { diff --git a/hello-world/read-an-image.html b/hello-world/read-an-image.html index 9e6c96e0..5c0b10f6 100644 --- a/hello-world/read-an-image.html +++ b/hello-world/read-an-image.html @@ -57,6 +57,7 @@

Hello World (Read an Image)

); document.querySelector("input").onchange = async function () { const router = await promise; + // Decode selected image with 'ReadBarcodes_SpeedFirst' template. const result = await router.capture( this.files[0], "ReadBarcodes_SpeedFirst" diff --git a/hello-world/read-video-es6.html b/hello-world/read-video-es6.html index 3a577a6d..cb5d0b0a 100644 --- a/hello-world/read-video-es6.html +++ b/hello-world/read-video-es6.html @@ -10,7 +10,7 @@ Dynamsoft Barcode Reader Sample - Hello World for ES6 (Decode via Camera) @@ -20,7 +20,6 @@ <body> <h1>Hello World for ES6 (Decode via Camera)</h1> <div id="div-ui-container" style="width: 100%; height: 80vh"></div> - <div id="div-result-container" style="margin-top: 6px"></div> <script> if (location.protocol === "file:") { const message = `The page is opened via file:// and some SDKs may not work properly. Please open the page via https:// or host it on "http://localhost/".`; @@ -33,6 +32,7 @@ <h1>Hello World for ES6 (Decode via Camera)</h1> "imports": { "@dynamsoft/dynamsoft-core": "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-core@3.0.20-dev-20231010152155/dist/core.mjs", "dynamsoft-core": "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.0.10/dist/core.mjs", + "@dynamsoft/dynamsoft-utility": "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-utility@1.0.10-dev-20231023103736/dist/utility.mjs", "@dynamsoft/dynamsoft-barcode-reader": "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-barcode-reader@10.0.20-dev-20231020180049/dist/dbr.mjs", "@dynamsoft/dynamsoft-document-normalizer": "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-document-normalizer@2.0.12-dev-20231019180133/dist/ddn.mjs", "@dynamsoft/dynamsoft-capture-vision-router": "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-capture-vision-router@2.0.20-dev-20231023103654/dist/cvr.mjs", @@ -42,6 +42,8 @@ <h1>Hello World for ES6 (Decode via Camera)</h1> } </script> <script type="module"> + import { EnumCapturedResultItemType } from "@dynamsoft/dynamsoft-core"; + import { MultiFrameResultCrossFilter } from "@dynamsoft/dynamsoft-utility"; import { BarcodeReaderModule } from "@dynamsoft/dynamsoft-barcode-reader"; import { LicenseManager, @@ -92,18 +94,31 @@ <h1>Hello World for ES6 (Decode via Camera)</h1> // Define a callback for results. const resultReceiver = new CapturedResultReceiver(); resultReceiver.onDecodedBarcodesReceived = (result) => { - const divResultContainer = document.querySelector( - "#div-result-container" - ); - divResultContainer.innerText = "Result:\n"; for (let item of result.barcodesResultItems) { - divResultContainer.innerText += item.text + "\n"; console.log(item.text); + alert(item.text); } }; router.addResultReceiver(resultReceiver); - // Open camera and start scanning. + // 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"); } catch (ex) { diff --git a/hello-world/read-video-requirejs.html b/hello-world/read-video-requirejs.html index 145ab54c..593a117c 100644 --- a/hello-world/read-video-requirejs.html +++ b/hello-world/read-video-requirejs.html @@ -10,10 +10,11 @@ <meta name="keywords" content="barcode, camera, RequireJS" /> <link rel="canonical" - href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/hello-world.html" + href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/read-video-requirejs.html" /> <title> - Dynamsoft Barcode Reader Sample - Hello World for RequireJS (Decode via Camera) + Dynamsoft Barcode Reader Sample - Hello World for RequireJS (Decode via + Camera) @@ -21,7 +22,6 @@

Hello World for RequireJS (Decode via Camera)

-
diff --git a/hello-world/vue3/vite.config.ts b/hello-world/vue3/vite.config.ts index 2908fade..5c45e1d9 100644 --- a/hello-world/vue3/vite.config.ts +++ b/hello-world/vue3/vite.config.ts @@ -6,13 +6,7 @@ import vue from '@vitejs/plugin-vue' // https://vitejs.dev/config/ export default defineConfig({ plugins: [ - vue({ - template: { - compilerOptions: { - isCustomElement: (tag) => tag.includes('-') - } - } - }), + vue(), ], resolve: { alias: { From c3d6634217f56db6e1124ca66060874b7237b895 Mon Sep 17 00:00:00 2001 From: Cube <877211593@qq.com> Date: Tue, 24 Oct 2023 10:38:37 +0800 Subject: [PATCH 17/95] update vue3 readme --- hello-world/6.read-video-vue3/README.md | 2 +- hello-world/vue3/README.md | 380 +++++++++++++++++- .../vue3/src/components/HelloWorld.vue | 5 +- .../vue3/src/components/VideoCapture.vue | 9 +- 4 files changed, 371 insertions(+), 25 deletions(-) diff --git a/hello-world/6.read-video-vue3/README.md b/hello-world/6.read-video-vue3/README.md index f85760b0..fec0eaf7 100644 --- a/hello-world/6.read-video-vue3/README.md +++ b/hello-world/6.read-video-vue3/README.md @@ -1,4 +1,4 @@ -# JavaScript Hello World Sample - Vue 3 +# 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 we will use `TypeScript`. diff --git a/hello-world/vue3/README.md b/hello-world/vue3/README.md index 8c8d8e74..883a342d 100644 --- a/hello-world/vue3/README.md +++ b/hello-world/vue3/README.md @@ -1,25 +1,379 @@ -# vue3 +# Hello World Sample for Vue3 -This template should help get you started developing with Vue 3 in Vite. +[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 we will use `TypeScript`. -## Recommended IDE Setup +## Official Sample -[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). +* Hello World in Vue 3 - Demo +* Hello World in Vue 3 - Source Code -## Type Support for `.vue` Imports in TS +## Preparation -TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types. +Make sure you have [node](https://nodejs.org/) installed. `node 16.20.1` and `vue 3.3.4` are used in the example below. -If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: +## Create the sample project -1. Disable the built-in TypeScript Extension - 1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette - 2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` -2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. +### Create a Bootstrapped Raw Vue Application -## Customize configuration +```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-utility +npm install dynamsoft-capture-vision-router +npm install dynamsoft-camera-enhancer +``` + +## Start to implement + +### Add files "dbr.ts", "cvr.ts" and "dce.ts" under "/src/" to configure libraries + +```typescript +// dbr.ts +import { BarcodeReaderModule } from "@dynamsoft/dynamsoft-barcode-reader"; +BarcodeReaderModule.engineResourcePath = "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-barcode-reader@10.0.20-dev-20231020180049/dist/"; +``` + +```typescript +// cvr.ts +import { CaptureVisionRouter, LicenseManager } from '@dynamsoft/dynamsoft-capture-vision-router'; +CaptureVisionRouter.engineResourcePath = 'https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-capture-vision-router@2.0.20-dev-20231023103654/dist/'; +LicenseManager.initLicense('DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9'); +// Preload "BarcodeReader" module for reading barcodes. It will save time on the initial decoding by skipping the module loading. +CaptureVisionRouter.preloadModule(['DBR']).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); +}); +``` + +```typescript +// dce.ts +import { CameraView } from "@dynamsoft/dynamsoft-camera-enhancer"; +CameraView.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.0/dist/"; +``` + +> 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. +> * `engineResourcePath` 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 help 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 help decode barcodes in an image. + +* In `ImageCapture.vue`, add code for initializing and destroying some instances. + +```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 +``` -See [Vite Configuration Reference](https://vitejs.dev/config/). +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. ## Project Setup diff --git a/hello-world/vue3/src/components/HelloWorld.vue b/hello-world/vue3/src/components/HelloWorld.vue index 7e137c78..0ca65302 100644 --- a/hello-world/vue3/src/components/HelloWorld.vue +++ b/hello-world/vue3/src/components/HelloWorld.vue @@ -24,9 +24,8 @@ const showImageCapture = () => {

Hello World for Vue 3

- + @click="showVideoCapture">Decode Video +
diff --git a/hello-world/vue3/src/components/VideoCapture.vue b/hello-world/vue3/src/components/VideoCapture.vue index 995c170c..b886cc62 100644 --- a/hello-world/vue3/src/components/VideoCapture.vue +++ b/hello-world/vue3/src/components/VideoCapture.vue @@ -109,9 +109,7 @@ onBeforeUnmount(async () => { From 609fde9745b619d465d13d2430a1636cf7f373d4 Mon Sep 17 00:00:00 2001 From: Cube <877211593@qq.com> Date: Tue, 24 Oct 2023 10:52:44 +0800 Subject: [PATCH 18/95] update --- hello-world/vue3/README.md | 39 +++++++++++++------ .../vue3/src/components/ImageCapture.vue | 4 +- .../vue3/src/components/VideoCapture.vue | 16 ++++---- hello-world/vue3/vite.config.ts | 1 + 4 files changed, 37 insertions(+), 23 deletions(-) diff --git a/hello-world/vue3/README.md b/hello-world/vue3/README.md index 883a342d..c20e680a 100644 --- a/hello-world/vue3/README.md +++ b/hello-world/vue3/README.md @@ -85,7 +85,7 @@ import { type Ref, } from "vue"; import { EnumCapturedResultItemType } from "@dynamsoft/dynamsoft-core"; -import { DecodedBarcodesResult } from "@dynamsoft/dynamsoft-barcode-reader"; +import { type DecodedBarcodesResult } from "@dynamsoft/dynamsoft-barcode-reader"; import { CameraEnhancer, CameraView, @@ -96,13 +96,11 @@ import { } from "@dynamsoft/dynamsoft-capture-vision-router"; import { MultiFrameResultCrossFilter } from "@dynamsoft/dynamsoft-utility"; -const pInit: Ref< - Promise<{ - cameraView: CameraView; - cameraEnhancer: CameraEnhancer; - router: CaptureVisionRouter; - } | null> -> = ref(null); +const pInit: Ref | null> = ref(null); const elRefs: Ref = ref(null); const init = async (): Promise<{ @@ -114,7 +112,7 @@ const init = async (): Promise<{ // 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); - elRefs.value.append(cameraView.getUIElement()); // Get default UI and append it to DOM. + elRefs.value!.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(); @@ -207,12 +205,12 @@ onBeforeUnmount(async () => { * Add a file `ImageCapture.vue` under "/components/" as the `ImageCapture` component. The `ImageCapture` component help decode barcodes in an image. -* In `ImageCapture.vue`, add code for initializing and destroying some instances. +* In `ImageCapture.vue`, add code for initializing and destroying `CaptureVisionRouter` instance. ```vue - -

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 1d5cb14e..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 7c193be0..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 0b2c5028..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 66bb205e..00000000 --- a/2.ui-tweaking/5.read-video-with-custom-default-ui.html +++ /dev/null @@ -1,435 +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 e7df875c..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=latest#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 From 965d8d6d8cdc92cef16a85719afc36e871917988 Mon Sep 17 00:00:00 2001 From: Cube <877211593@qq.com> Date: Wed, 25 Oct 2023 10:37:51 +0800 Subject: [PATCH 21/95] remove 3.settings --- .../1.barcodeFormats-expectedBarcodes.html | 117 ------ ...2.localizationModes-binarizationModes.html | 378 ----------------- 3.settings/3.blurred-small-barcodes.html | 383 ------------------ .../4.deformed-incomplete-barcodes.html | 198 --------- ...5.regionOfInterest-regionPredetection.html | 341 ---------------- 3.settings/6.dense-barcodes.html | 99 ----- 3.settings/README.md | 158 -------- 3.settings/initScanner.js | 112 ----- 3.settings/settings-css.css | 148 ------- 9 files changed, 1934 deletions(-) delete mode 100644 3.settings/1.barcodeFormats-expectedBarcodes.html delete mode 100644 3.settings/2.localizationModes-binarizationModes.html delete mode 100644 3.settings/3.blurred-small-barcodes.html delete mode 100644 3.settings/4.deformed-incomplete-barcodes.html delete mode 100644 3.settings/5.regionOfInterest-regionPredetection.html delete mode 100644 3.settings/6.dense-barcodes.html delete mode 100644 3.settings/README.md delete mode 100644 3.settings/initScanner.js delete mode 100644 3.settings/settings-css.css diff --git a/3.settings/1.barcodeFormats-expectedBarcodes.html b/3.settings/1.barcodeFormats-expectedBarcodes.html deleted file mode 100644 index b44ac182..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 bad375b2..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 bbad7446..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 fb22414d..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 0c8bfaa8..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 ab674628..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 2652e869..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=latest). 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=latest). - -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=latest). - -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=latest). 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=latest). - -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=latest). - -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=latest). - -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=latest). - -The parameter for this case is called [ `BarcodeComplementMode` ](https://www.dynamsoft.com/barcode-reader/parameters/reference/barcode-complement-modes.html?ver=latest) 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=latest) 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=latest). - -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 df608123..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.31&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 From ecb85efdc83e9b080bed0dd0bd7d5d797ee0336d Mon Sep 17 00:00:00 2001 From: Cube <877211593@qq.com> Date: Wed, 25 Oct 2023 10:38:18 +0800 Subject: [PATCH 22/95] rename --- {5.others => others}/debug/.gitignore | 0 {5.others => others}/debug/README.md | 0 {5.others => others}/debug/app.js | 0 {5.others => others}/debug/package.json | 0 {5.others => others}/debug/pem/ryans-cert.pem | 0 {5.others => others}/debug/pem/ryans-csr.pem | 0 {5.others => others}/debug/pem/ryans-key.pem | 0 {5.others => others}/debug/public/index.html | 0 8 files changed, 0 insertions(+), 0 deletions(-) rename {5.others => others}/debug/.gitignore (100%) rename {5.others => others}/debug/README.md (100%) rename {5.others => others}/debug/app.js (100%) rename {5.others => others}/debug/package.json (100%) rename {5.others => others}/debug/pem/ryans-cert.pem (100%) rename {5.others => others}/debug/pem/ryans-csr.pem (100%) rename {5.others => others}/debug/pem/ryans-key.pem (100%) rename {5.others => others}/debug/public/index.html (100%) 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 100% rename from 5.others/debug/README.md rename to others/debug/README.md 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/5.others/debug/public/index.html b/others/debug/public/index.html similarity index 100% rename from 5.others/debug/public/index.html rename to others/debug/public/index.html From c8d5fcbfa84ad5956e0ef4cf38acca5178ce0bc2 Mon Sep 17 00:00:00 2001 From: Cube <877211593@qq.com> Date: Wed, 25 Oct 2023 10:38:39 +0800 Subject: [PATCH 23/95] rename --- .../1.fill-a-form-with-barcode-reading.html | 0 .../2.read-a-drivers-license.html | 0 .../3.show-result-texts-on-the-video.html | 0 {4.use-case => use-case}/README.md | 0 {4.use-case => use-case}/SampleDriversLicense.jpg | Bin 5 files changed, 0 insertions(+), 0 deletions(-) rename {4.use-case => use-case}/1.fill-a-form-with-barcode-reading.html (100%) rename {4.use-case => use-case}/2.read-a-drivers-license.html (100%) rename {4.use-case => use-case}/3.show-result-texts-on-the-video.html (100%) rename {4.use-case => use-case}/README.md (100%) rename {4.use-case => use-case}/SampleDriversLicense.jpg (100%) diff --git a/4.use-case/1.fill-a-form-with-barcode-reading.html b/use-case/1.fill-a-form-with-barcode-reading.html similarity index 100% rename from 4.use-case/1.fill-a-form-with-barcode-reading.html rename to use-case/1.fill-a-form-with-barcode-reading.html diff --git a/4.use-case/2.read-a-drivers-license.html b/use-case/2.read-a-drivers-license.html similarity index 100% rename from 4.use-case/2.read-a-drivers-license.html rename to use-case/2.read-a-drivers-license.html diff --git a/4.use-case/3.show-result-texts-on-the-video.html b/use-case/3.show-result-texts-on-the-video.html similarity index 100% rename from 4.use-case/3.show-result-texts-on-the-video.html rename to use-case/3.show-result-texts-on-the-video.html diff --git a/4.use-case/README.md b/use-case/README.md similarity index 100% rename from 4.use-case/README.md rename to use-case/README.md 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 From 67148bd793fc4da4c0d1c69e61ccbf56d6424f45 Mon Sep 17 00:00:00 2001 From: Cube <877211593@qq.com> Date: Wed, 25 Oct 2023 10:40:47 +0800 Subject: [PATCH 24/95] rename --- .../android/.gitignore | 0 .../android/README.md | 0 .../android/app/.gitignore | 0 .../android/app/build.gradle | 0 .../android/app/proguard-rules.pro | 0 .../android/app/src/main/AndroidManifest.xml | 0 .../app/src/main/assets/decodeBarcodeInVideo.html | 0 .../java/com/dynamsoft/dbrjswebview/MainActivity.kt | 0 .../res/drawable-v24/ic_launcher_foreground.xml | 0 .../main/res/drawable/ic_launcher_background.xml | 0 .../app/src/main/res/layout/activity_main.xml | 0 .../src/main/res/mipmap-anydpi-v26/ic_launcher.xml | 0 .../res/mipmap-anydpi-v26/ic_launcher_round.xml | 0 .../src/main/res/mipmap-anydpi-v33/ic_launcher.xml | 0 .../app/src/main/res/mipmap-hdpi/ic_launcher.webp | Bin .../src/main/res/mipmap-hdpi/ic_launcher_round.webp | Bin .../app/src/main/res/mipmap-mdpi/ic_launcher.webp | Bin .../src/main/res/mipmap-mdpi/ic_launcher_round.webp | Bin .../app/src/main/res/mipmap-xhdpi/ic_launcher.webp | Bin .../main/res/mipmap-xhdpi/ic_launcher_round.webp | Bin .../app/src/main/res/mipmap-xxhdpi/ic_launcher.webp | Bin .../main/res/mipmap-xxhdpi/ic_launcher_round.webp | Bin .../src/main/res/mipmap-xxxhdpi/ic_launcher.webp | Bin .../main/res/mipmap-xxxhdpi/ic_launcher_round.webp | Bin .../app/src/main/res/values-night/themes.xml | 0 .../android/app/src/main/res/values/colors.xml | 0 .../android/app/src/main/res/values/strings.xml | 0 .../android/app/src/main/res/values/themes.xml | 0 .../android/app/src/main/res/xml/backup_rules.xml | 0 .../app/src/main/res/xml/data_extraction_rules.xml | 0 .../android/build.gradle | 0 .../android/gradle.properties | 0 .../android/gradle/wrapper/gradle-wrapper.jar | Bin .../gradle/wrapper/gradle-wrapper.properties | 0 .../android/gradlew | 0 .../android/gradlew.bat | 0 .../android/settings.gradle | 0 .../ios/.gitignore | 0 .../ios/README.md | 0 .../ios/dbrjswebview.xcodeproj/project.pbxproj | 0 .../project.xcworkspace/contents.xcworkspacedata | 0 .../xcshareddata/IDEWorkspaceChecks.plist | 0 .../ios/dbrjswebview/AppDelegate.swift | 0 .../AccentColor.colorset/Contents.json | 0 .../AppIcon.appiconset/Contents.json | 0 .../ios/dbrjswebview/Assets.xcassets/Contents.json | 0 .../dbrjswebview/Base.lproj/LaunchScreen.storyboard | 0 .../ios/dbrjswebview/Base.lproj/Main.storyboard | 0 .../ios/dbrjswebview/Info.plist | 0 .../ios/dbrjswebview/SceneDelegate.swift | 0 .../ios/dbrjswebview/ViewController.swift | 0 .../ios/dbrjswebview/html/decodeFileInVideo.html | 0 52 files changed, 0 insertions(+), 0 deletions(-) rename hello-world/{14.read-video-webview => webview}/android/.gitignore (100%) rename hello-world/{14.read-video-webview => webview}/android/README.md (100%) rename hello-world/{14.read-video-webview => webview}/android/app/.gitignore (100%) rename hello-world/{14.read-video-webview => webview}/android/app/build.gradle (100%) rename hello-world/{14.read-video-webview => webview}/android/app/proguard-rules.pro (100%) rename hello-world/{14.read-video-webview => webview}/android/app/src/main/AndroidManifest.xml (100%) rename hello-world/{14.read-video-webview => webview}/android/app/src/main/assets/decodeBarcodeInVideo.html (100%) rename hello-world/{14.read-video-webview => webview}/android/app/src/main/java/com/dynamsoft/dbrjswebview/MainActivity.kt (100%) rename hello-world/{14.read-video-webview => webview}/android/app/src/main/res/drawable-v24/ic_launcher_foreground.xml (100%) rename hello-world/{14.read-video-webview => webview}/android/app/src/main/res/drawable/ic_launcher_background.xml (100%) rename hello-world/{14.read-video-webview => webview}/android/app/src/main/res/layout/activity_main.xml (100%) rename hello-world/{14.read-video-webview => webview}/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml (100%) rename hello-world/{14.read-video-webview => webview}/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml (100%) rename hello-world/{14.read-video-webview => webview}/android/app/src/main/res/mipmap-anydpi-v33/ic_launcher.xml (100%) rename hello-world/{14.read-video-webview => webview}/android/app/src/main/res/mipmap-hdpi/ic_launcher.webp (100%) rename hello-world/{14.read-video-webview => webview}/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.webp (100%) rename hello-world/{14.read-video-webview => webview}/android/app/src/main/res/mipmap-mdpi/ic_launcher.webp (100%) rename hello-world/{14.read-video-webview => webview}/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.webp (100%) rename hello-world/{14.read-video-webview => webview}/android/app/src/main/res/mipmap-xhdpi/ic_launcher.webp (100%) rename hello-world/{14.read-video-webview => webview}/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp (100%) rename hello-world/{14.read-video-webview => webview}/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.webp (100%) rename hello-world/{14.read-video-webview => webview}/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp (100%) rename hello-world/{14.read-video-webview => webview}/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp (100%) rename hello-world/{14.read-video-webview => webview}/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp (100%) rename hello-world/{14.read-video-webview => webview}/android/app/src/main/res/values-night/themes.xml (100%) rename hello-world/{14.read-video-webview => webview}/android/app/src/main/res/values/colors.xml (100%) rename hello-world/{14.read-video-webview => webview}/android/app/src/main/res/values/strings.xml (100%) rename hello-world/{14.read-video-webview => webview}/android/app/src/main/res/values/themes.xml (100%) rename hello-world/{14.read-video-webview => webview}/android/app/src/main/res/xml/backup_rules.xml (100%) rename hello-world/{14.read-video-webview => webview}/android/app/src/main/res/xml/data_extraction_rules.xml (100%) rename hello-world/{14.read-video-webview => webview}/android/build.gradle (100%) rename hello-world/{14.read-video-webview => webview}/android/gradle.properties (100%) rename hello-world/{14.read-video-webview => webview}/android/gradle/wrapper/gradle-wrapper.jar (100%) rename hello-world/{14.read-video-webview => webview}/android/gradle/wrapper/gradle-wrapper.properties (100%) rename hello-world/{14.read-video-webview => webview}/android/gradlew (100%) rename hello-world/{14.read-video-webview => webview}/android/gradlew.bat (100%) rename hello-world/{14.read-video-webview => webview}/android/settings.gradle (100%) rename hello-world/{14.read-video-webview => webview}/ios/.gitignore (100%) rename hello-world/{14.read-video-webview => webview}/ios/README.md (100%) rename hello-world/{14.read-video-webview => webview}/ios/dbrjswebview.xcodeproj/project.pbxproj (100%) rename hello-world/{14.read-video-webview => webview}/ios/dbrjswebview.xcodeproj/project.xcworkspace/contents.xcworkspacedata (100%) rename hello-world/{14.read-video-webview => webview}/ios/dbrjswebview.xcodeproj/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist (100%) rename hello-world/{14.read-video-webview => webview}/ios/dbrjswebview/AppDelegate.swift (100%) rename hello-world/{14.read-video-webview => webview}/ios/dbrjswebview/Assets.xcassets/AccentColor.colorset/Contents.json (100%) rename hello-world/{14.read-video-webview => webview}/ios/dbrjswebview/Assets.xcassets/AppIcon.appiconset/Contents.json (100%) rename hello-world/{14.read-video-webview => webview}/ios/dbrjswebview/Assets.xcassets/Contents.json (100%) rename hello-world/{14.read-video-webview => webview}/ios/dbrjswebview/Base.lproj/LaunchScreen.storyboard (100%) rename hello-world/{14.read-video-webview => webview}/ios/dbrjswebview/Base.lproj/Main.storyboard (100%) rename hello-world/{14.read-video-webview => webview}/ios/dbrjswebview/Info.plist (100%) rename hello-world/{14.read-video-webview => webview}/ios/dbrjswebview/SceneDelegate.swift (100%) rename hello-world/{14.read-video-webview => webview}/ios/dbrjswebview/ViewController.swift (100%) rename hello-world/{14.read-video-webview => webview}/ios/dbrjswebview/html/decodeFileInVideo.html (100%) diff --git a/hello-world/14.read-video-webview/android/.gitignore b/hello-world/webview/android/.gitignore similarity index 100% rename from hello-world/14.read-video-webview/android/.gitignore rename to hello-world/webview/android/.gitignore diff --git a/hello-world/14.read-video-webview/android/README.md b/hello-world/webview/android/README.md similarity index 100% rename from hello-world/14.read-video-webview/android/README.md rename to hello-world/webview/android/README.md diff --git a/hello-world/14.read-video-webview/android/app/.gitignore b/hello-world/webview/android/app/.gitignore similarity index 100% rename from hello-world/14.read-video-webview/android/app/.gitignore rename to hello-world/webview/android/app/.gitignore diff --git a/hello-world/14.read-video-webview/android/app/build.gradle b/hello-world/webview/android/app/build.gradle similarity index 100% rename from hello-world/14.read-video-webview/android/app/build.gradle rename to hello-world/webview/android/app/build.gradle diff --git a/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 hello-world/14.read-video-webview/android/app/proguard-rules.pro rename to hello-world/webview/android/app/proguard-rules.pro diff --git a/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 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/14.read-video-webview/android/app/src/main/assets/decodeBarcodeInVideo.html b/hello-world/webview/android/app/src/main/assets/decodeBarcodeInVideo.html similarity index 100% rename from hello-world/14.read-video-webview/android/app/src/main/assets/decodeBarcodeInVideo.html rename to hello-world/webview/android/app/src/main/assets/decodeBarcodeInVideo.html diff --git a/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 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/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 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/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 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/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 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/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 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/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 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/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 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/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 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/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 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/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 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/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 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/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 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/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 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/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 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/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 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/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 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/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 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/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 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/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 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/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 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/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 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/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 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/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 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/hello-world/14.read-video-webview/android/build.gradle b/hello-world/webview/android/build.gradle similarity index 100% rename from hello-world/14.read-video-webview/android/build.gradle rename to hello-world/webview/android/build.gradle diff --git a/hello-world/14.read-video-webview/android/gradle.properties b/hello-world/webview/android/gradle.properties similarity index 100% rename from hello-world/14.read-video-webview/android/gradle.properties rename to hello-world/webview/android/gradle.properties diff --git a/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 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/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 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/hello-world/14.read-video-webview/android/gradlew b/hello-world/webview/android/gradlew similarity index 100% rename from hello-world/14.read-video-webview/android/gradlew rename to hello-world/webview/android/gradlew diff --git a/hello-world/14.read-video-webview/android/gradlew.bat b/hello-world/webview/android/gradlew.bat similarity index 100% rename from hello-world/14.read-video-webview/android/gradlew.bat rename to hello-world/webview/android/gradlew.bat diff --git a/hello-world/14.read-video-webview/android/settings.gradle b/hello-world/webview/android/settings.gradle similarity index 100% rename from hello-world/14.read-video-webview/android/settings.gradle rename to hello-world/webview/android/settings.gradle diff --git a/hello-world/14.read-video-webview/ios/.gitignore b/hello-world/webview/ios/.gitignore similarity index 100% rename from hello-world/14.read-video-webview/ios/.gitignore rename to hello-world/webview/ios/.gitignore diff --git a/hello-world/14.read-video-webview/ios/README.md b/hello-world/webview/ios/README.md similarity index 100% rename from hello-world/14.read-video-webview/ios/README.md rename to hello-world/webview/ios/README.md diff --git a/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 hello-world/14.read-video-webview/ios/dbrjswebview.xcodeproj/project.pbxproj rename to hello-world/webview/ios/dbrjswebview.xcodeproj/project.pbxproj diff --git a/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 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/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 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/hello-world/14.read-video-webview/ios/dbrjswebview/AppDelegate.swift b/hello-world/webview/ios/dbrjswebview/AppDelegate.swift similarity index 100% rename from hello-world/14.read-video-webview/ios/dbrjswebview/AppDelegate.swift rename to hello-world/webview/ios/dbrjswebview/AppDelegate.swift diff --git a/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 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/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 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/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 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/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 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/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 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/hello-world/14.read-video-webview/ios/dbrjswebview/Info.plist b/hello-world/webview/ios/dbrjswebview/Info.plist similarity index 100% rename from hello-world/14.read-video-webview/ios/dbrjswebview/Info.plist rename to hello-world/webview/ios/dbrjswebview/Info.plist diff --git a/hello-world/14.read-video-webview/ios/dbrjswebview/SceneDelegate.swift b/hello-world/webview/ios/dbrjswebview/SceneDelegate.swift similarity index 100% rename from hello-world/14.read-video-webview/ios/dbrjswebview/SceneDelegate.swift rename to hello-world/webview/ios/dbrjswebview/SceneDelegate.swift diff --git a/hello-world/14.read-video-webview/ios/dbrjswebview/ViewController.swift b/hello-world/webview/ios/dbrjswebview/ViewController.swift similarity index 100% rename from hello-world/14.read-video-webview/ios/dbrjswebview/ViewController.swift rename to hello-world/webview/ios/dbrjswebview/ViewController.swift diff --git a/hello-world/14.read-video-webview/ios/dbrjswebview/html/decodeFileInVideo.html b/hello-world/webview/ios/dbrjswebview/html/decodeFileInVideo.html similarity index 100% rename from hello-world/14.read-video-webview/ios/dbrjswebview/html/decodeFileInVideo.html rename to hello-world/webview/ios/dbrjswebview/html/decodeFileInVideo.html From 169e2c43113489fb774d4dbdd0cda3c7fe387ae0 Mon Sep 17 00:00:00 2001 From: Cube <877211593@qq.com> Date: Wed, 25 Oct 2023 10:41:57 +0800 Subject: [PATCH 25/95] rename --- ...barcode-reading.html => fill-a-form-with-barcode-reading.html} | 0 ...{2.read-a-drivers-license.html => read-a-drivers-license.html} | 0 ...exts-on-the-video.html => show-result-texts-on-the-video.html} | 0 3 files changed, 0 insertions(+), 0 deletions(-) rename use-case/{1.fill-a-form-with-barcode-reading.html => fill-a-form-with-barcode-reading.html} (100%) rename use-case/{2.read-a-drivers-license.html => read-a-drivers-license.html} (100%) rename use-case/{3.show-result-texts-on-the-video.html => show-result-texts-on-the-video.html} (100%) diff --git a/use-case/1.fill-a-form-with-barcode-reading.html b/use-case/fill-a-form-with-barcode-reading.html similarity index 100% rename from use-case/1.fill-a-form-with-barcode-reading.html rename to use-case/fill-a-form-with-barcode-reading.html diff --git a/use-case/2.read-a-drivers-license.html b/use-case/read-a-drivers-license.html similarity index 100% rename from use-case/2.read-a-drivers-license.html rename to use-case/read-a-drivers-license.html diff --git a/use-case/3.show-result-texts-on-the-video.html b/use-case/show-result-texts-on-the-video.html similarity index 100% rename from use-case/3.show-result-texts-on-the-video.html rename to use-case/show-result-texts-on-the-video.html From 408af514c8363a567edbe9cc550741cc2692cb4e Mon Sep 17 00:00:00 2001 From: Cube <877211593@qq.com> Date: Wed, 25 Oct 2023 10:54:08 +0800 Subject: [PATCH 26/95] add --- hello-world/next/.gitignore | 35 ++++++++ hello-world/next/README.md | 36 ++++++++ hello-world/next/app/favicon.ico | Bin 0 -> 25931 bytes hello-world/next/app/globals.css | 27 ++++++ hello-world/next/app/layout.tsx | 22 +++++ hello-world/next/app/page.tsx | 113 ++++++++++++++++++++++++++ hello-world/next/next.config.js | 4 + hello-world/next/package.json | 25 ++++++ hello-world/next/postcss.config.js | 6 ++ hello-world/next/public/next.svg | 1 + hello-world/next/public/vercel.svg | 1 + hello-world/next/tailwind.config.ts | 20 +++++ hello-world/next/tsconfig.json | 27 ++++++ hello-world/nuxt/.gitignore | 24 ++++++ hello-world/nuxt/README.md | 75 +++++++++++++++++ hello-world/nuxt/app.vue | 5 ++ hello-world/nuxt/nuxt.config.ts | 4 + hello-world/nuxt/package.json | 18 ++++ hello-world/nuxt/public/favicon.ico | Bin 0 -> 4286 bytes hello-world/nuxt/server/tsconfig.json | 3 + hello-world/nuxt/tsconfig.json | 4 + 21 files changed, 450 insertions(+) create mode 100644 hello-world/next/.gitignore create mode 100644 hello-world/next/README.md create mode 100644 hello-world/next/app/favicon.ico create mode 100644 hello-world/next/app/globals.css create mode 100644 hello-world/next/app/layout.tsx create mode 100644 hello-world/next/app/page.tsx create mode 100644 hello-world/next/next.config.js create mode 100644 hello-world/next/package.json create mode 100644 hello-world/next/postcss.config.js create mode 100644 hello-world/next/public/next.svg create mode 100644 hello-world/next/public/vercel.svg create mode 100644 hello-world/next/tailwind.config.ts create mode 100644 hello-world/next/tsconfig.json create mode 100644 hello-world/nuxt/.gitignore create mode 100644 hello-world/nuxt/README.md create mode 100644 hello-world/nuxt/app.vue create mode 100644 hello-world/nuxt/nuxt.config.ts create mode 100644 hello-world/nuxt/package.json create mode 100644 hello-world/nuxt/public/favicon.ico create mode 100644 hello-world/nuxt/server/tsconfig.json create mode 100644 hello-world/nuxt/tsconfig.json diff --git a/hello-world/next/.gitignore b/hello-world/next/.gitignore new file mode 100644 index 00000000..8f322f0d --- /dev/null +++ b/hello-world/next/.gitignore @@ -0,0 +1,35 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# local env files +.env*.local + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts diff --git a/hello-world/next/README.md b/hello-world/next/README.md new file mode 100644 index 00000000..c4033664 --- /dev/null +++ b/hello-world/next/README.md @@ -0,0 +1,36 @@ +This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). + +## Getting Started + +First, run the development server: + +```bash +npm run dev +# or +yarn dev +# or +pnpm dev +# or +bun dev +``` + +Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. + +You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. + +This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. + +## Learn More + +To learn more about Next.js, take a look at the following resources: + +- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. +- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. + +You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! + +## Deploy on Vercel + +The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. + +Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. diff --git a/hello-world/next/app/favicon.ico b/hello-world/next/app/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..718d6fea4835ec2d246af9800eddb7ffb276240c GIT binary patch literal 25931 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 LrJugUA?W`A8`#=m literal 0 HcmV?d00001 diff --git a/hello-world/next/app/globals.css b/hello-world/next/app/globals.css new file mode 100644 index 00000000..fd81e885 --- /dev/null +++ b/hello-world/next/app/globals.css @@ -0,0 +1,27 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +:root { + --foreground-rgb: 0, 0, 0; + --background-start-rgb: 214, 219, 220; + --background-end-rgb: 255, 255, 255; +} + +@media (prefers-color-scheme: dark) { + :root { + --foreground-rgb: 255, 255, 255; + --background-start-rgb: 0, 0, 0; + --background-end-rgb: 0, 0, 0; + } +} + +body { + color: rgb(var(--foreground-rgb)); + background: linear-gradient( + to bottom, + transparent, + rgb(var(--background-end-rgb)) + ) + rgb(var(--background-start-rgb)); +} diff --git a/hello-world/next/app/layout.tsx b/hello-world/next/app/layout.tsx new file mode 100644 index 00000000..40e027fb --- /dev/null +++ b/hello-world/next/app/layout.tsx @@ -0,0 +1,22 @@ +import type { Metadata } from 'next' +import { Inter } from 'next/font/google' +import './globals.css' + +const inter = Inter({ subsets: ['latin'] }) + +export const metadata: Metadata = { + title: 'Create Next App', + description: 'Generated by create next app', +} + +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..7a8286b5 --- /dev/null +++ b/hello-world/next/app/page.tsx @@ -0,0 +1,113 @@ +import Image from 'next/image' + +export default function Home() { + return ( +
+
+

+ Get started by editing  + app/page.tsx +

+ +
+ +
+ Next.js Logo +
+ + +
+ ) +} diff --git a/hello-world/next/next.config.js b/hello-world/next/next.config.js new file mode 100644 index 00000000..767719fc --- /dev/null +++ b/hello-world/next/next.config.js @@ -0,0 +1,4 @@ +/** @type {import('next').NextConfig} */ +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..bb5dada3 --- /dev/null +++ b/hello-world/next/package.json @@ -0,0 +1,25 @@ +{ + "name": "hello-world", + "version": "0.1.0", + "private": true, + "scripts": { + "dev": "next dev", + "build": "next build", + "start": "next start", + "lint": "next lint" + }, + "dependencies": { + "react": "^18", + "react-dom": "^18", + "next": "13.5.6" + }, + "devDependencies": { + "typescript": "^5", + "@types/node": "^20", + "@types/react": "^18", + "@types/react-dom": "^18", + "autoprefixer": "^10", + "postcss": "^8", + "tailwindcss": "^3" + } +} diff --git a/hello-world/next/postcss.config.js b/hello-world/next/postcss.config.js new file mode 100644 index 00000000..33ad091d --- /dev/null +++ b/hello-world/next/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} 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/hello-world/next/public/vercel.svg b/hello-world/next/public/vercel.svg new file mode 100644 index 00000000..d2f84222 --- /dev/null +++ b/hello-world/next/public/vercel.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/hello-world/next/tailwind.config.ts b/hello-world/next/tailwind.config.ts new file mode 100644 index 00000000..c7ead804 --- /dev/null +++ b/hello-world/next/tailwind.config.ts @@ -0,0 +1,20 @@ +import type { Config } from 'tailwindcss' + +const config: Config = { + content: [ + './pages/**/*.{js,ts,jsx,tsx,mdx}', + './components/**/*.{js,ts,jsx,tsx,mdx}', + './app/**/*.{js,ts,jsx,tsx,mdx}', + ], + theme: { + extend: { + backgroundImage: { + 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))', + 'gradient-conic': + 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))', + }, + }, + }, + plugins: [], +} +export default config diff --git a/hello-world/next/tsconfig.json b/hello-world/next/tsconfig.json new file mode 100644 index 00000000..c7146963 --- /dev/null +++ b/hello-world/next/tsconfig.json @@ -0,0 +1,27 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": true, + "noEmit": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "bundler", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve", + "incremental": true, + "plugins": [ + { + "name": "next" + } + ], + "paths": { + "@/*": ["./*"] + } + }, + "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..f5db2a2d --- /dev/null +++ b/hello-world/nuxt/README.md @@ -0,0 +1,75 @@ +# Nuxt 3 Minimal Starter + +Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more. + +## Setup + +Make sure to install the dependencies: + +```bash +# npm +npm install + +# pnpm +pnpm install + +# yarn +yarn install + +# bun +bun install +``` + +## Development Server + +Start the development server on `http://localhost:3000`: + +```bash +# npm +npm run dev + +# pnpm +pnpm run dev + +# yarn +yarn dev + +# bun +bun run dev +``` + +## Production + +Build the application for production: + +```bash +# npm +npm run build + +# pnpm +pnpm run build + +# yarn +yarn build + +# bun +bun run build +``` + +Locally preview production build: + +```bash +# npm +npm run preview + +# pnpm +pnpm run preview + +# yarn +yarn preview + +# bun +bun run preview +``` + +Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information. diff --git a/hello-world/nuxt/app.vue b/hello-world/nuxt/app.vue new file mode 100644 index 00000000..a495b757 --- /dev/null +++ b/hello-world/nuxt/app.vue @@ -0,0 +1,5 @@ + diff --git a/hello-world/nuxt/nuxt.config.ts b/hello-world/nuxt/nuxt.config.ts new file mode 100644 index 00000000..8851e774 --- /dev/null +++ b/hello-world/nuxt/nuxt.config.ts @@ -0,0 +1,4 @@ +// https://nuxt.com/docs/api/configuration/nuxt-config +export default defineNuxtConfig({ + devtools: { enabled: true } +}) diff --git a/hello-world/nuxt/package.json b/hello-world/nuxt/package.json new file mode 100644 index 00000000..338f5655 --- /dev/null +++ b/hello-world/nuxt/package.json @@ -0,0 +1,18 @@ +{ + "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/devtools": "latest", + "nuxt": "^3.8.0", + "vue": "^3.3.6", + "vue-router": "^4.2.5" + } +} diff --git a/hello-world/nuxt/public/favicon.ico b/hello-world/nuxt/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..18993ad91cfd43e03b074dd0b5cc3f37ab38e49c GIT binary patch literal 4286 zcmeHLOKuuL5PjK%MHWVi6lD zOGiREbCw`xmFozJ^aNatJY>w+g ze6a2@u~m#^BZm@8wco9#Crlli0uLb^3E$t2-WIc^#(?t)*@`UpuofJ(Uyh@F>b3Ph z$D^m8Xq~pTkGJ4Q`Q2)te3mgkWYZ^Ijq|hkiP^9`De={bQQ%heZC$QU2UpP(-tbl8 zPWD2abEew;oat@w`uP3J^YpsgT%~jT(Dk%oU}sa$7|n6hBjDj`+I;RX(>)%lm_7N{+B7Mu%H?422lE%MBJH!!YTN2oT7xr>>N-8OF$C&qU^ z>vLsa{$0X%q1fjOe3P1mCv#lN{xQ4_*HCSAZjTb1`}mlc+9rl8$B3OP%VT@mch_~G z7Y+4b{r>9e=M+7vSI;BgB?ryZDY4m>&wcHSn81VH1N~`0gvwH{ z8dv#hG|OK`>1;j7tM#B)Z7zDN?{6=dUal}$e Date: Wed, 25 Oct 2023 11:07:02 +0800 Subject: [PATCH 27/95] add and rename --- hello-world/electron/README.md | 176 +++++++++++++++ hello-world/electron/package.json | 20 ++ hello-world/{read-video-es6.html => es6.html} | 2 +- hello-world/pwa/README.md | 204 ++++++++++++++++++ ...ad-video-requirejs.html => requirejs.html} | 2 +- 5 files changed, 402 insertions(+), 2 deletions(-) create mode 100644 hello-world/electron/README.md create mode 100644 hello-world/electron/package.json rename hello-world/{read-video-es6.html => es6.html} (99%) create mode 100644 hello-world/pwa/README.md rename hello-world/{read-video-requirejs.html => requirejs.html} (99%) diff --git a/hello-world/electron/README.md b/hello-world/electron/README.md new file mode 100644 index 00000000..0a632133 --- /dev/null +++ b/hello-world/electron/README.md @@ -0,0 +1,176 @@ +# JavaScript Hello World Sample - 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 "hello-world" and a package.json file inside it with the following content: + +```json +{ + "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 ." + }, + "author": "tom@dynamsoft.com", + "dependencies": { + "electron": "14.0.1", + "dynamsoft-javascript-barcode": "^9.6.31" + } +} +``` + +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 +``` diff --git a/hello-world/electron/package.json b/hello-world/electron/package.json new file mode 100644 index 00000000..76588295 --- /dev/null +++ b/hello-world/electron/package.json @@ -0,0 +1,20 @@ +{ + "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" +} diff --git a/hello-world/read-video-es6.html b/hello-world/es6.html similarity index 99% rename from hello-world/read-video-es6.html rename to hello-world/es6.html index 50e90e37..1b249244 100644 --- a/hello-world/read-video-es6.html +++ b/hello-world/es6.html @@ -10,7 +10,7 @@ Dynamsoft Barcode Reader Sample - Hello World for ES6 (Decode via Camera) diff --git a/hello-world/pwa/README.md b/hello-world/pwa/README.md new file mode 100644 index 00000000..4a230ce7 --- /dev/null +++ b/hello-world/pwa/README.md @@ -0,0 +1,204 @@ +# JavaScript Hello World Sample - 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 + +* <a target = "_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/10.read-video-pwa/helloworld-pwa.html">Hello World in PWA - Demo</a> +* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/1.hello-world/10.read-video-pwa">Hello World in PWA - Source Code</a> + +## Preparation + +We will try to turn our most basic hello world sample into a PWA. + +First, create a file with the name "helloworld-pwa.html" and fill it with the following code: + +```html +<!DOCTYPE html> +<html lang="en"> + +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width,initial-scale=1.0"> + <title>Dynamsoft Barcode Reader PWA Sample - Hello World (Decoding via Camera) + + + +

Hello World for PWA

+ Loading... + + + + + +``` + +Next, set up a secure environment (HTTPs) to run the page "helloworld-pwa.html". This is required because PWAs only run in secure environments. + +In our case, we use IIS to set up a secure site at "https://localhost" and the page is put at the root so that it can be accessed at "https://localhost/helloworld-pwa.html". + +## Make the app progressive + +### Register a service worker for offline support + +As the basis for PWAs, Service Workers are a virtual proxy between the browser and the network. A service worker can serve content offline, handle notifications and perform heavy calculations, etc. all on a separate thread. + +To use a service worker, we first need to register it. In the helloworld-pwa.html file, add the following at the end of the script: + +```javascript +if ('serviceWorker' in navigator) { + navigator.serviceWorker.register('./service-worker.js'); +}; +``` + +Create the service-worker.js file with the following content: + +```javascript +// Files to cache +const cacheName = 'helloworld-pwa'; +const appShellFiles = [ + './helloworld-pwa.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; + })()); +}); +``` + +With the above code, the application can now work offline because the service worker will cache the page helloworld-pwa.html and its related resources. + +For more information, refer to [Making PWAs work offline with Service workers](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Offline_Service_workers). + +> NOTE +> +> Since the files are being cached, changes we make in later steps may not be reflected. Therefore, don't forget to clear the cache after a change is made. To do so, you can run the following in the browser console. +> +> ```javascript +> const cacheName = 'helloworld-pwa'; +> const cache = await caches.delete(cacheName); +> ``` + +### Use a web manifest file to make the application installable + +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: + +```json +{ + "name": "Dynamsoft Barcode Reader Progressive Web App", + "short_name": "DBR-PWA", + "description": "Progressive Web App that reads barcodes from a video input with Dynamsoft Barcode Reader.", + "start_url": "./helloworld-pwa.html", + "scope": ".", + "display": "standalone", + "theme_color": "#B12A34", + "background_color": "#B12A34", + "icons": [ + { + "src": "./dynamsoft-512x512.png", + "sizes": "512x512", + "type": "image/png" + }, + { + "src": "./dynamsoft-192x192.png", + "sizes": "192x192", + "type": "image/png" + } + ] +} +``` + +> The icon files can be found in the github repository. + +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 ``: + +```html + + + + + + + +``` + +Now, if you open the application again in your browser, you will notice an install icon appear on the right side of the address bar. When you click on it, a pop-up will appear asking if you want to install the app. + +Once installed, you can use it like a native app. + +For offline use, you need to cache more files. + +service-worker.js +```javascript +const dbrVersion = "9.6.31"; +const dbrCdn = `https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@${dbrVersion}/dist/`; + +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`, +]; +``` + +## 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 diff --git a/hello-world/read-video-requirejs.html b/hello-world/requirejs.html similarity index 99% rename from hello-world/read-video-requirejs.html rename to hello-world/requirejs.html index 5b87abd4..a450584f 100644 --- a/hello-world/read-video-requirejs.html +++ b/hello-world/requirejs.html @@ -10,7 +10,7 @@ Dynamsoft Barcode Reader Sample - Hello World for RequireJS (Decode via From d2f1828eea2763f270f7563d881fcaa4b8779439 Mon Sep 17 00:00:00 2001 From: Cube <877211593@qq.com> Date: Wed, 25 Oct 2023 11:23:19 +0800 Subject: [PATCH 28/95] update --- hello-world/electron/.npmrc | 3 +++ hello-world/electron/package.json | 5 ++++- 2 files changed, 7 insertions(+), 1 deletion(-) create mode 100644 hello-world/electron/.npmrc diff --git a/hello-world/electron/.npmrc b/hello-world/electron/.npmrc new file mode 100644 index 00000000..605a95d9 --- /dev/null +++ b/hello-world/electron/.npmrc @@ -0,0 +1,3 @@ +@scannerproxy:registry=http://npm.scannerproxy.com/ +@dynamsoft:registry=http://npm.scannerproxy.com/ +electron_mirror=https://npm.taobao.org/mirrors/electron/ \ No newline at end of file diff --git a/hello-world/electron/package.json b/hello-world/electron/package.json index 76588295..9f75f7f8 100644 --- a/hello-world/electron/package.json +++ b/hello-world/electron/package.json @@ -16,5 +16,8 @@ "bugs": { "url": "https://github.com/Dynamsoft/barcode-reader-javascript-samples/issues" }, - "homepage": "https://github.com/Dynamsoft/barcode-reader-javascript-samples#readme" + "homepage": "https://github.com/Dynamsoft/barcode-reader-javascript-samples#readme", + "devDependencies": { + "electron": "^26.4.1" + } } From 36bd86f11e38d4cd4d842de6e303bd167679ed6a Mon Sep 17 00:00:00 2001 From: Cube <877211593@qq.com> Date: Wed, 25 Oct 2023 14:11:18 +0800 Subject: [PATCH 29/95] update --- hello-world/10.read-video-pwa/README.md | 6 +- .../13.read-video-react-hooks/README.md | 4 +- hello-world/3.read-video-angular/README.md | 8 +- hello-world/4.read-video-react/README.md | 10 +- hello-world/6.read-video-vue3/README.md | 4 + hello-world/7.read-video-nextjs/README.md | 6 +- hello-world/8.read-video-nuxtjs/README.md | 6 +- hello-world/9.read-video-electron/README.md | 4 + hello-world/README.md | 2 +- hello-world/angular/README.md | 6 +- .../image-capture/image-capture.component.ts | 9 +- hello-world/electron/README.md | 4 + hello-world/react/README.md | 472 +++++++++++++++++- hello-world/react/package.json | 1 + .../src/components/HelloWorld/HelloWorld.tsx | 98 ++-- hello-world/vue3/README.md | 8 +- 16 files changed, 559 insertions(+), 89 deletions(-) diff --git a/hello-world/10.read-video-pwa/README.md b/hello-world/10.read-video-pwa/README.md index 4a230ce7..debcf820 100644 --- a/hello-world/10.read-video-pwa/README.md +++ b/hello-world/10.read-video-pwa/README.md @@ -201,4 +201,8 @@ const appShellFiles = [ ## 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 via [email](mailto:support@dynamsoft.com) or the "Chat" button in [homepage](https://www.dynamsoft.com/barcode-reader/sdk-javascript/). \ No newline at end of file diff --git a/hello-world/13.read-video-react-hooks/README.md b/hello-world/13.read-video-react-hooks/README.md index c647ef93..81456bd7 100644 --- a/hello-world/13.read-video-react-hooks/README.md +++ b/hello-world/13.read-video-react-hooks/README.md @@ -19,7 +19,7 @@ Make sure you have [node](https://nodejs.org/) installed. `node 14.21.3` and `re npx create-react-app read-video-react-hooks --template typescript ``` -### **CD** to the root directory of the application and install necessary libraries +### **CD** to the root directory of the application and install necessary library ```cmd cd read-video-react-hooks @@ -400,4 +400,4 @@ See the section about [deployment](https://facebook.github.io/create-react-app/d ## 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 +If you have any questions, feel free to contact Dynamsoft support via [email](mailto:support@dynamsoft.com) or the "Chat" button in [homepage](https://www.dynamsoft.com/barcode-reader/sdk-javascript/). \ No newline at end of file diff --git a/hello-world/3.read-video-angular/README.md b/hello-world/3.read-video-angular/README.md index 517f5809..4c828b1d 100644 --- a/hello-world/3.read-video-angular/README.md +++ b/hello-world/3.read-video-angular/README.md @@ -19,7 +19,7 @@ Make sure you have [node](https://nodejs.org/) and [Angular CLI](https://cli.ang ng new my-app ``` -### **CD** to the root directory of the application and install necessary libraries +### **CD** to the root directory of the application and install necessary library ```cmd cd my-app @@ -42,11 +42,11 @@ BarcodeReader.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javas > * `engineResourcePath` tells the library where to get the necessary resources at runtime. ### Generate three components -* `video-decode` component help read barcode from camera. +* `video-decode` component helps read barcode from camera. ```cmd ng generate component video-decode ``` -* `img-decode` component help read barcode from still images. +* `img-decode` component helps read barcode from still images. ```cmd ng generate component img-decode ``` @@ -307,4 +307,4 @@ Run `ng build` to build the project. The build artifacts will be stored in the ` ## 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. +If you have any questions, feel free to contact Dynamsoft support via [email](mailto:support@dynamsoft.com) or the "Chat" button in [homepage](https://www.dynamsoft.com/barcode-reader/sdk-javascript/). diff --git a/hello-world/4.read-video-react/README.md b/hello-world/4.read-video-react/README.md index 77d18588..732f2686 100644 --- a/hello-world/4.read-video-react/README.md +++ b/hello-world/4.read-video-react/README.md @@ -1,6 +1,6 @@ -# JavaScript Hello World Sample - React +# 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` showing using `Hooks` in 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 @@ -9,7 +9,7 @@ ## Preparation -Make sure you have [node](https://nodejs.org/) installed. `node 14.21.3` and `react 18.2.0` used in the example below. +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 @@ -19,7 +19,7 @@ Make sure you have [node](https://nodejs.org/) installed. `node 14.21.3` and `re npx create-react-app read-video-react --template typescript ``` -### **CD** to the root directory of the application and install necessary libraries +### **CD** to the root directory of the application and install necessary library ```cmd cd read-video-react @@ -365,4 +365,4 @@ See the section about [deployment](https://facebook.github.io/create-react-app/d ## 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 +If you have any questions, feel free to contact Dynamsoft support via [email](mailto:support@dynamsoft.com) or the "Chat" button in [homepage](https://www.dynamsoft.com/barcode-reader/sdk-javascript/). \ No newline at end of file diff --git a/hello-world/6.read-video-vue3/README.md b/hello-world/6.read-video-vue3/README.md index 73b2abcf..6fc82eda 100644 --- a/hello-world/6.read-video-vue3/README.md +++ b/hello-world/6.read-video-vue3/README.md @@ -479,3 +479,7 @@ npm run dev ```sh npm run build ``` + +## Support + +If you have any questions, feel free to contact Dynamsoft support via [email](mailto:support@dynamsoft.com) or the "Chat" button in [homepage](https://www.dynamsoft.com/barcode-reader/sdk-javascript/). diff --git a/hello-world/7.read-video-nextjs/README.md b/hello-world/7.read-video-nextjs/README.md index 4a5184cb..5ba9df1b 100644 --- a/hello-world/7.read-video-nextjs/README.md +++ b/hello-world/7.read-video-nextjs/README.md @@ -356,4 +356,8 @@ npm run dev ```sh npm run build -``` \ No newline at end of file +``` + +## Support + +If you have any questions, feel free to contact Dynamsoft support via [email](mailto:support@dynamsoft.com) or the "Chat" button in [homepage](https://www.dynamsoft.com/barcode-reader/sdk-javascript/). \ No newline at end of file diff --git a/hello-world/8.read-video-nuxtjs/README.md b/hello-world/8.read-video-nuxtjs/README.md index d9b517de..445803c7 100644 --- a/hello-world/8.read-video-nuxtjs/README.md +++ b/hello-world/8.read-video-nuxtjs/README.md @@ -462,4 +462,8 @@ npm run dev ```sh npm run build -``` \ No newline at end of file +``` + +## Support + +If you have any questions, feel free to contact Dynamsoft support via [email](mailto:support@dynamsoft.com) or the "Chat" button in [homepage](https://www.dynamsoft.com/barcode-reader/sdk-javascript/). \ No newline at end of file diff --git a/hello-world/9.read-video-electron/README.md b/hello-world/9.read-video-electron/README.md index b9b6579c..de709677 100644 --- a/hello-world/9.read-video-electron/README.md +++ b/hello-world/9.read-video-electron/README.md @@ -174,3 +174,7 @@ 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 via [email](mailto:support@dynamsoft.com) or the "Chat" button in [homepage](https://www.dynamsoft.com/barcode-reader/sdk-javascript/). diff --git a/hello-world/README.md b/hello-world/README.md index 6a5aa033..6b63f400 100644 --- a/hello-world/README.md +++ b/hello-world/README.md @@ -98,4 +98,4 @@ 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. +If you have any questions, feel free to contact Dynamsoft support via [email](mailto:support@dynamsoft.com) or the "Chat" button in [homepage](https://www.dynamsoft.com/barcode-reader/sdk-javascript/). diff --git a/hello-world/angular/README.md b/hello-world/angular/README.md index 8379fa4f..95ab8957 100644 --- a/hello-world/angular/README.md +++ b/hello-world/angular/README.md @@ -69,11 +69,11 @@ CameraView.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-camera-e > * `engineResourcePath` tells the library where to get the necessary resources at runtime. ### Generate three components -* `video-capture` component help read barcode from camera. +* `video-capture` component helps read barcode from camera. ```cmd ng generate component video-capture ``` -* `image-capture` component help read barcode from still images. +* `image-capture` component helps read barcode from still images. ```cmd ng generate component image-capture ``` @@ -391,4 +391,4 @@ Run `ng build` to build the project. The build artifacts will be stored in the ` ## 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. +If you have any questions, feel free to contact Dynamsoft support via [email](mailto:support@dynamsoft.com) or the "Chat" button in [homepage](https://www.dynamsoft.com/barcode-reader/sdk-javascript/). 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 index a1bce9b9..f02a687c 100644 --- a/hello-world/angular/src/app/image-capture/image-capture.component.ts +++ b/hello-world/angular/src/app/image-capture/image-capture.component.ts @@ -18,12 +18,13 @@ export class ImageCaptureComponent { e.target.files[0], 'ReadBarcodes_SpeedFirst' ); + let texts = ''; for (let item of result.items) { - alert((item as BarcodeResultItem).text); - } - if (!result.items.length) { - alert('No barcode found'); + 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; if (ex.message.includes('network connection error')) { diff --git a/hello-world/electron/README.md b/hello-world/electron/README.md index 0a632133..633c1931 100644 --- a/hello-world/electron/README.md +++ b/hello-world/electron/README.md @@ -174,3 +174,7 @@ 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 via [email](mailto:support@dynamsoft.com) or the "Chat" button in [homepage](https://www.dynamsoft.com/barcode-reader/sdk-javascript/). diff --git a/hello-world/react/README.md b/hello-world/react/README.md index b87cb004..cbac8549 100644 --- a/hello-world/react/README.md +++ b/hello-world/react/README.md @@ -1,12 +1,451 @@ -# Getting Started with Create React App +# Hello World Sample for React -This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). +[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. -## Available Scripts +## Official Sample -In the project directory, you can run: +* <a target = "_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/react/build/">Hello World in React - Demo</a> +* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world/react">Hello World in React - Source Code</a> -### `npm start` +## 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-utility +npm install dynamsoft-capture-vision-router +npm install dynamsoft-camera-enhancer +``` + +## Start to implement + +### Add files "dbr.ts", "cvr.ts" and "dce.ts" under "/src/" to configure libraries + +```typescript +// dbr.ts +import { BarcodeReaderModule } from "@dynamsoft/dynamsoft-barcode-reader"; +BarcodeReaderModule.engineResourcePath = "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-barcode-reader@10.0.20-dev-20231020180049/dist/"; +``` + +```typescript +// cvr.ts +import { CaptureVisionRouter, LicenseManager } from '@dynamsoft/dynamsoft-capture-vision-router'; +CaptureVisionRouter.engineResourcePath = 'https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-capture-vision-router@2.0.20-dev-20231023103654/dist/'; +LicenseManager.initLicense('DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9'); +// Preload "BarcodeReader" module for reading barcodes. It will save time on the initial decoding by skipping the module loading. +CaptureVisionRouter.preloadModule(['DBR']).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); +}); +``` + +```typescript +// dce.ts +import { CameraView } from "@dynamsoft/dynamsoft-camera-enhancer"; +CameraView.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.0/dist/"; +``` + +> 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. +> * `engineResourcePath` tells the library where to get the necessary resources at runtime. + +> 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", "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/dynamsoft-core" +import { DecodedBarcodesResult } from "@dynamsoft/dynamsoft-barcode-reader"; +import { + CameraEnhancer, + CameraView, +} from "@dynamsoft/dynamsoft-camera-enhancer"; +import { + CapturedResultReceiver, + CaptureVisionRouter, +} from "@dynamsoft/dynamsoft-capture-vision-router"; +import "./VideoCapture.css"; +import { MultiFrameResultCrossFilter } from "@dynamsoft/dynamsoft-utility"; + +export class VideoCapture extends React.Component { + pInit: Promise<{ + cameraView: CameraView; + cameraEnhancer: CameraEnhancer; + router: CaptureVisionRouter; + }> | null = null; + pDestroy: Promise<void> | null = null; + + elRef: React.RefObject<HTMLDivElement> = 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.elRef.current!.innerText = ""; + this.elRef.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 + ) => { + for (let item of result.barcodesResultItems) { + console.log(item.text); + } + }; + 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; + 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); + throw ex; + } + } + + async destroy(): Promise<void> { + 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("VideoCaptureComponent Unmount"); + } + + shouldComponentUpdate() { + // Never update UI after mount, sdk use native way to bind event, update will remove it. + return false; + } + + render() { + return <div ref={this.elRef} className="div-ui-container"></div>; + } +} +``` + +> 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; +} +``` + +### 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/dynamsoft-barcode-reader'; +import { CaptureVisionRouter } from '@dynamsoft/dynamsoft-capture-vision-router'; +import './ImageCapture.css' + +export class ImageCapture extends React.Component { + pInit: Promise<CaptureVisionRouter> | null = null; + pDestroy: Promise<void> | null = null; + + async init(): Promise<CaptureVisionRouter> { + const router = await CaptureVisionRouter.createInstance(); + return router; + } + + async destroy(): Promise<void> { + if (this.pInit) { + (await this.pInit).dispose(); + } + } + + decodeImg = async (e: React.ChangeEvent<HTMLInputElement>) => { + try { + const router = await this.pInit; + // Decode selected image with 'ReadBarcodes_SpeedFirst' template. + const result = await router!.capture( + e.target.files![0], + 'ReadBarcodes_SpeedFirst' + ); + for (let item of result.items) { + alert((item as BarcodeResultItem).text); + } + if (!result.items.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 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('ImageCaptureComponent Unmount'); + } + + render() { + return ( + <div className="div-image-capture"><input type="file" accept=".jpg,.jpeg,.icon,.gif,.svg,.webp,.png,.bmp" onChange={this.decodeImg} /></div> + ) + } +} +``` + +* 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 "../../dbr"; // import side effects. The license, engineResourcePath, so on. +import "../../cvr"; // import side effects. The license, engineResourcePath, so on. +import "../../dce"; // import side effects. The license, engineResourcePath, so on. +import { VideoCapture } from "../VideoCapture/VideoCapture"; +import { ImageCapture } from "../ImageCapture/ImageCapture"; +import "./HelloWorld.css"; + +export 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 ( + <div className="div-hello-world"> + <h1>Hello World for React</h1> + <div> + <button + style={{ + marginRight: "10px", + backgroundColor: this.state.bShowVideoCapture + ? "rgb(255,174,55)" + : "white", + }} + onClick={this.showVideoCapture} + > + Decode Video + </button> + <button + style={{ + backgroundColor: this.state.bShowImageCapture + ? "rgb(255,174,55)" + : "white", + }} + onClick={this.showImageCapture} + > + Decode Image + </button> + </div> + <div className="container"> + {this.state.bShowVideoCapture ? <VideoCapture></VideoCapture> : ""} + {this.state.bShowImageCapture ? <ImageCapture></ImageCapture> : ""} + </div> + </div> + ); + } +} +``` + +* 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; + 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 { HelloWorld } from './components/HelloWorld/HelloWorld'; +import './App.css'; + +function App() { + return ( + <div className="App"> + <HelloWorld></HelloWorld> + </div> + ); +} + +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. @@ -14,12 +453,7 @@ 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. -### `npm test` - -Launches the test runner in the interactive watch mode.\ -See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. - -### `npm run build` +## 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. @@ -29,18 +463,6 @@ Your app is ready to be deployed! See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. -### `npm run eject` - -**Note: this is a one-way operation. Once you `eject`, you can’t go back!** - -If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. - -Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. - -You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. - -## Learn More - -You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). +## Support -To learn React, check out the [React documentation](https://reactjs.org/). +If you have any questions, feel free to contact Dynamsoft support via [email](mailto:support@dynamsoft.com) or the "Chat" button in [homepage](https://www.dynamsoft.com/barcode-reader/sdk-javascript/). \ No newline at end of file diff --git a/hello-world/react/package.json b/hello-world/react/package.json index b6135c4e..f006d014 100644 --- a/hello-world/react/package.json +++ b/hello-world/react/package.json @@ -2,6 +2,7 @@ "name": "hello-world", "version": "0.1.0", "private": true, + "homepage": "./", "dependencies": { "@dynamsoft/dynamsoft-camera-enhancer": "^4.0.1-dev-20231023131759", "@dynamsoft/dynamsoft-capture-vision-router": "^2.0.20-dev-20231023103654", diff --git a/hello-world/react/src/components/HelloWorld/HelloWorld.tsx b/hello-world/react/src/components/HelloWorld/HelloWorld.tsx index bc54113f..92b66cb9 100644 --- a/hello-world/react/src/components/HelloWorld/HelloWorld.tsx +++ b/hello-world/react/src/components/HelloWorld/HelloWorld.tsx @@ -1,45 +1,63 @@ -import React from 'react'; -import '../../dbr'; // import side effects. The license, engineResourcePath, so on. -import '../../cvr'; // import side effects. The license, engineResourcePath, so on. -import '../../dce'; // import side effects. The license, engineResourcePath, so on. -import { VideoCapture } from '../VideoCapture/VideoCapture'; -import { ImageCapture } from '../ImageCapture/ImageCapture'; -import './HelloWorld.css'; +import React from "react"; +import "../../dbr"; // import side effects. The license, engineResourcePath, so on. +import "../../cvr"; // import side effects. The license, engineResourcePath, so on. +import "../../dce"; // import side effects. The license, engineResourcePath, so on. +import { VideoCapture } from "../VideoCapture/VideoCapture"; +import { ImageCapture } from "../ImageCapture/ImageCapture"; +import "./HelloWorld.css"; export class HelloWorld extends React.Component { - state = { - bShowVideoCapture: true, - bShowImageCapture: false - }; - - showVideoCapture = () => { - this.setState({ - bShowVideoCapture: true, - bShowImageCapture: false - }); - } + state = { + bShowVideoCapture: true, + bShowImageCapture: false, + }; - showImageCapture = () => { - this.setState({ - bShowVideoCapture: false, - bShowImageCapture: true - }); - } + showVideoCapture = () => { + this.setState({ + bShowVideoCapture: true, + bShowImageCapture: false, + }); + }; - render() { - return ( - <div className="div-hello-world"> - <h1>Hello World for React</h1> - <div> - <button style={{ marginRight: '10px', backgroundColor: this.state.bShowVideoCapture ? 'rgb(255,174,55)' : 'white' }} onClick={this.showVideoCapture}>Decode Video</button> - <button style={{ backgroundColor: this.state.bShowImageCapture ? 'rgb(255,174,55)' : 'white' }} onClick={this.showImageCapture}>Decode Image</button> - </div> - <div className="container"> - {this.state.bShowVideoCapture ? (<VideoCapture></VideoCapture>) : ""} - {this.state.bShowImageCapture ? (<ImageCapture></ImageCapture>) : ""} - </div> - </div> - ); - } -} + showImageCapture = () => { + this.setState({ + bShowVideoCapture: false, + bShowImageCapture: true, + }); + }; + render() { + return ( + <div className="div-hello-world"> + <h1>Hello World for React</h1> + <div> + <button + style={{ + marginRight: "10px", + backgroundColor: this.state.bShowVideoCapture + ? "rgb(255,174,55)" + : "white", + }} + onClick={this.showVideoCapture} + > + Decode Video + </button> + <button + style={{ + backgroundColor: this.state.bShowImageCapture + ? "rgb(255,174,55)" + : "white", + }} + onClick={this.showImageCapture} + > + Decode Image + </button> + </div> + <div className="container"> + {this.state.bShowVideoCapture ? <VideoCapture></VideoCapture> : ""} + {this.state.bShowImageCapture ? <ImageCapture></ImageCapture> : ""} + </div> + </div> + ); + } +} diff --git a/hello-world/vue3/README.md b/hello-world/vue3/README.md index 741ba4e7..ff4ceca4 100644 --- a/hello-world/vue3/README.md +++ b/hello-world/vue3/README.md @@ -71,7 +71,7 @@ CameraView.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-camera-e ### Create and edit the `VideoCapture` component -* Add a file `VideoCapture.vue` under "/components/" as the `VideoCapture` component. The `VideoCapture` component help decode barcodes via camera. +* 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. @@ -203,7 +203,7 @@ onBeforeUnmount(async () => { ### Create and edit the `ImageCapture` component -* Add a file `ImageCapture.vue` under "/components/" as the `ImageCapture` component. The `ImageCapture` component help decode barcodes in an image. +* 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. @@ -407,3 +407,7 @@ npm run dev ```sh npm run build ``` + +## Support + +If you have any questions, feel free to contact Dynamsoft support via [email](mailto:support@dynamsoft.com) or the "Chat" button in [homepage](https://www.dynamsoft.com/barcode-reader/sdk-javascript/). From cbd65bd67e38c3e4e9e1d309a9c29ddd429094d4 Mon Sep 17 00:00:00 2001 From: Keillion <keillionv@gmail.com> Date: Wed, 25 Oct 2023 14:17:36 +0800 Subject: [PATCH 30/95] dbr10 webview --- .../src/main/assets/decodeBarcodeInVideo.html | 110 ++++++++++------- .../dbrjswebview/html/decodeFileInVideo.html | 111 +++++++++++------- 2 files changed, 137 insertions(+), 84 deletions(-) diff --git a/hello-world/webview/android/app/src/main/assets/decodeBarcodeInVideo.html b/hello-world/webview/android/app/src/main/assets/decodeBarcodeInVideo.html index 480cb1ca..7cf01855 100644 --- a/hello-world/webview/android/app/src/main/assets/decodeBarcodeInVideo.html +++ b/hello-world/webview/android/app/src/main/assets/decodeBarcodeInVideo.html @@ -11,60 +11,86 @@ </head> <body> -Loading... -<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.31/dist/dbr.js"></script> + <h1>Hello World (Decode via Camera)</h1> + <div id="div-ui-container" style="width: 100%; height: 80vh"></div> +<!-- <script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.0.20/dist/dbr.js"></script> --> +<script src="https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-core@3.0.20-dev-20231010152155/dist/core.js"></script> +<script src="https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-utility@1.0.10-dev-20231023103736/dist/utility.js"></script> +<script src="https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-barcode-reader@10.0.20-dev-20231020140243/dist/dbr.js"></script> +<script src="https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-capture-vision-router@2.0.20-dev-20231023103654/dist/cvr.js"></script> +<script src="https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-camera-enhancer@4.0.1-dev-20231023131759/dist/dce.js"></script> <script> /** LICENSE ALERT - README - * To use the library, you need to first specify a license key using the API "license" as shown below. + * To use the library, you need to first specify a license key using the API "initLicense" as shown below. */ - Dynamsoft.DBR.BarcodeReader.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9'; + Dynamsoft.License.LicenseManager.initLicense( + "DLS2eyJoYW5kc2hha2VDb2RlIjoiNjY2Ni03Nzc3IiwibWFpblNlcnZlclVSTCI6Imh0dHBzOi8vMTkyLjE2OC44LjEyMi9kbHMvIiwib3JnYW5pemF0aW9uSUQiOiI2NjY2IiwiY2hlY2tDb2RlIjoxNTEyMTgzMzg3fQ==" + ); /** * 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.31&utm_source=github#specify-the-license or contact support@dynamsoft.com. + * 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 */ - (async function() { - try { - const scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); - /** - * 'onFrameRead' is triggered after the library finishes reading a frame image. - * There can be multiple barcodes on one image. - */ - scanner.onFrameRead = results => { - console.log("Barcodes on one frame:"); - for (let result of results) { - const format = result.barcodeFormatString; - console.log(format + ": " + result.barcodeText); - } - }; - /** - * 'onUniqueRead' is triggered only when a 'new' barcode is found. - * The amount of time that the library 'remembers' a barcode is defined by - * "duplicateForgetTime" in "ScanSettings". By default it is set to 3000 ms. - */ - scanner.onUniqueRead = (txt, result) => { - alert(txt); - console.log("Unique Code Found: ", result); - } - /** - * 'show()' opens the camera and shows the video stream on the page. - * After that, the library starts to scan the frame images continuously. - */ - 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); + (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) => { + for (let item of result.barcodesResultItems) { + console.log(item.text); + alert(item.text); + } + }; + 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; + 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); + } })(); </script> </body> diff --git a/hello-world/webview/ios/dbrjswebview/html/decodeFileInVideo.html b/hello-world/webview/ios/dbrjswebview/html/decodeFileInVideo.html index ebdd0fbd..44ca54b5 100644 --- a/hello-world/webview/ios/dbrjswebview/html/decodeFileInVideo.html +++ b/hello-world/webview/ios/dbrjswebview/html/decodeFileInVideo.html @@ -11,59 +11,86 @@ </head> <body> -Loading... -<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.31/dist/dbr.js"></script> + <h1>Hello World (Decode via Camera)</h1> + <div id="div-ui-container" style="width: 100%; height: 80vh"></div> +<!-- <script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.0.20/dist/dbr.js"></script> --> +<script src="https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-core@3.0.20-dev-20231010152155/dist/core.js"></script> +<script src="https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-utility@1.0.10-dev-20231023103736/dist/utility.js"></script> +<script src="https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-barcode-reader@10.0.20-dev-20231020140243/dist/dbr.js"></script> +<script src="https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-capture-vision-router@2.0.20-dev-20231023103654/dist/cvr.js"></script> +<script src="https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-camera-enhancer@4.0.1-dev-20231023131759/dist/dce.js"></script> <script> /** LICENSE ALERT - README - * To use the library, you need to first specify a license key using the API "license" as shown below. + * To use the library, you need to first specify a license key using the API "initLicense" as shown below. */ - Dynamsoft.DBR.BarcodeReader.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9'; + + Dynamsoft.License.LicenseManager.initLicense( + "DLS2eyJoYW5kc2hha2VDb2RlIjoiNjY2Ni03Nzc3IiwibWFpblNlcnZlclVSTCI6Imh0dHBzOi8vMTkyLjE2OC44LjEyMi9kbHMvIiwib3JnYW5pemF0aW9uSUQiOiI2NjY2IiwiY2hlY2tDb2RlIjoxNTEyMTgzMzg3fQ==" + ); /** * 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.31&utm_source=github#specify-the-license or contact support@dynamsoft.com. + * 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 */ - (async function() { - try { - const scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); - /** - * 'onFrameRead' is triggered after the library finishes reading a frame image. - * There can be multiple barcodes on one image. - */ - scanner.onFrameRead = results => { - console.log("Barcodes on one frame:"); - for (let result of results) { - const format = result.barcodeFormatString; - console.log(format + ": " + result.barcodeText); - } - }; - /** - * 'onUniqueRead' is triggered only when a 'new' barcode is found. - * The amount of time that the library 'remembers' a barcode is defined by - * "duplicateForgetTime" in "ScanSettings". By default it is set to 3000 ms. - */ - scanner.onUniqueRead = (txt, result) => { - alert(txt); - console.log("Unique Code Found: ", result); - } - /** - * 'show()' opens the camera and shows the video stream on the page. - * After that, the library starts to scan the frame images continuously. - */ - 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); + (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) => { + for (let item of result.barcodesResultItems) { + console.log(item.text); + alert(item.text); + } + }; + 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; + 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); + } })(); </script> </body> From 88fd374c086097ca51bf565736f0b8565cb34ea0 Mon Sep 17 00:00:00 2001 From: Cube <877211593@qq.com> Date: Wed, 25 Oct 2023 14:24:13 +0800 Subject: [PATCH 31/95] update --- hello-world/react-hooks/README.md | 464 +++++++++++++++++++++++++-- hello-world/react-hooks/package.json | 1 + hello-world/react/README.md | 5 - 3 files changed, 440 insertions(+), 30 deletions(-) diff --git a/hello-world/react-hooks/README.md b/hello-world/react-hooks/README.md index b87cb004..f6c13480 100644 --- a/hello-world/react-hooks/README.md +++ b/hello-world/react-hooks/README.md @@ -1,12 +1,443 @@ -# Getting Started with Create React App +# Hello World Sample for React with Hooks -This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). +[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. -## Available Scripts +## Official Sample -In the project directory, you can run: +* <a target = "_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/react-hooks/build/">Hello World in React with Hooks - Demo</a> +* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world/react-hooks">Hello World in React with Hooks - Source Code</a> -### `npm start` +## 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-utility +npm install dynamsoft-capture-vision-router +npm install dynamsoft-camera-enhancer +``` + +## Start to implement + +### Add files "dbr.ts", "cvr.ts" and "dce.ts" under "/src/" to configure libraries + +```typescript +// dbr.ts +import { BarcodeReaderModule } from "@dynamsoft/dynamsoft-barcode-reader"; +BarcodeReaderModule.engineResourcePath = "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-barcode-reader@10.0.20-dev-20231020180049/dist/"; +``` + +```typescript +// cvr.ts +import { CaptureVisionRouter, LicenseManager } from '@dynamsoft/dynamsoft-capture-vision-router'; +CaptureVisionRouter.engineResourcePath = 'https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-capture-vision-router@2.0.20-dev-20231023103654/dist/'; +LicenseManager.initLicense('DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9'); +// Preload "BarcodeReader" module for reading barcodes. It will save time on the initial decoding by skipping the module loading. +CaptureVisionRouter.preloadModule(['DBR']).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); +}); +``` + +```typescript +// dce.ts +import { CameraView } from "@dynamsoft/dynamsoft-camera-enhancer"; +CameraView.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.0/dist/"; +``` + +> 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. +> * `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", "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/dynamsoft-core"; +import { DecodedBarcodesResult } from "@dynamsoft/dynamsoft-barcode-reader"; +import { + CameraEnhancer, + CameraView, +} from "@dynamsoft/dynamsoft-camera-enhancer"; +import { + CapturedResultReceiver, + CaptureVisionRouter, +} from "@dynamsoft/dynamsoft-capture-vision-router"; +import { MultiFrameResultCrossFilter } from "@dynamsoft/dynamsoft-utility"; +import "./VideoCapture.css"; + +function VideoCapture() { + const pInit = useRef( + null as Promise<{ + cameraView: CameraView; + cameraEnhancer: CameraEnhancer; + router: CaptureVisionRouter; + }> | null + ); + const pDestroy = useRef(null as Promise<void> | 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); + elRef.current!.innerText = ""; + elRef.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 + ) => { + for (let item of result.barcodesResultItems) { + console.log(item.text); + } + }; + 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; + 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); + throw ex; + } + }; + + const destroy = async (): Promise<void> => { + if (pInit.current) { + const { cameraView, cameraEnhancer, router } = await pInit.current; + router.dispose(); + cameraEnhancer.dispose(); + cameraView.dispose(); + } + }; + const elRef = useRef<HTMLDivElement>(null); + + 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("ImageCapture Component Unmount"); + })(); + }; + }, []); + + return <div ref={elRef} className="div-ui-container"></div>; +} + +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; +} +``` + +### 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/dynamsoft-barcode-reader"; +import { CaptureVisionRouter } from "@dynamsoft/dynamsoft-capture-vision-router"; +import "./ImageCapture.css"; + +function ImageCapture() { + const pInit = useRef(null as null | Promise<CaptureVisionRouter>); + const pDestroy = useRef(null as null | Promise<void>); + + const init = async (): Promise<CaptureVisionRouter> => { + const router = await CaptureVisionRouter.createInstance(); + return router; + }; + + const destroy = async (): Promise<void> => { + if (pInit.current) { + (await pInit.current).dispose(); + } + }; + + const decodeImg = async (e: React.ChangeEvent<HTMLInputElement>) => { + try { + const router = (await pInit.current)!; + // Decode selected image with 'ReadBarcodes_SpeedFirst' template. + const result = await router.capture( + e.target.files![0], + "ReadBarcodes_SpeedFirst" + ); + for (let item of result.items) { + alert((item as BarcodeResultItem).text); + } + if (!result.items.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(() => { + (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 ( + <div className="div-image-capture"> + <input + type="file" + accept=".jpg,.jpeg,.icon,.gif,.svg,.webp,.png,.bmp" + onChange={decodeImg} + /> + </div> + ); +} + +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 "../../dbr"; // import side effects. The license, engineResourcePath, so on. +import "../../cvr"; // import side effects. The license, engineResourcePath, so on. +import "../../dce"; // 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 ( + <div className="div-hello-world"> + <h1>Hello World for React(Hooks)</h1> + <div> + <button + style={{ + marginRight: "10px", + backgroundColor: bShowVideoCapture ? "rgb(255,174,55)" : "white", + }} + onClick={showVideoCapture} + > + Decode Video + </button> + <button + style={{ + backgroundColor: bShowImageCapture ? "rgb(255,174,55)" : "white", + }} + onClick={showImageCapture} + > + Decode Image + </button> + </div> + <div className="container"> + {bShowVideoCapture ? <VideoCapture></VideoCapture> : ""} + {bShowImageCapture ? <ImageCapture></ImageCapture> : ""} + </div> + </div> + ); +} + +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; + 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 HelloWorld from './components/HelloWorld/HelloWorld'; +import './App.css'; + +function App() { + return ( + <div className="App"> + <HelloWorld></HelloWorld> + </div> + ); +} + +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. @@ -14,12 +445,7 @@ 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. -### `npm test` - -Launches the test runner in the interactive watch mode.\ -See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. - -### `npm run build` +## 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. @@ -29,18 +455,6 @@ Your app is ready to be deployed! See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. -### `npm run eject` - -**Note: this is a one-way operation. Once you `eject`, you can’t go back!** - -If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. - -Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. - -You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. - -## Learn More - -You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). +## Support -To learn React, check out the [React documentation](https://reactjs.org/). +If you have any questions, feel free to contact Dynamsoft support via [email](mailto:support@dynamsoft.com) or the "Chat" button in [homepage](https://www.dynamsoft.com/barcode-reader/sdk-javascript/). \ No newline at end of file diff --git a/hello-world/react-hooks/package.json b/hello-world/react-hooks/package.json index 7c0894b0..7fedb819 100644 --- a/hello-world/react-hooks/package.json +++ b/hello-world/react-hooks/package.json @@ -2,6 +2,7 @@ "name": "hello-world", "version": "0.1.0", "private": true, + "homepage": "./", "dependencies": { "@dynamsoft/dynamsoft-camera-enhancer": "^4.0.1-dev-20231023154255", "@dynamsoft/dynamsoft-capture-vision-router": "^2.0.20-dev-20231023103654", diff --git a/hello-world/react/README.md b/hello-world/react/README.md index cbac8549..d46440d3 100644 --- a/hello-world/react/README.md +++ b/hello-world/react/README.md @@ -68,11 +68,6 @@ CameraView.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-camera-e > * `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. > * `engineResourcePath` tells the library where to get the necessary resources at runtime. -> 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", "VideoCapture" and "ImageCapture" under "/src/components/". From 28a2a9bdb6b10382f8156459295cb146ea4c078f Mon Sep 17 00:00:00 2001 From: Cube <877211593@qq.com> Date: Wed, 25 Oct 2023 14:30:56 +0800 Subject: [PATCH 32/95] update --- hello-world/angular/README.md | 17 ++++++++++------- .../image-capture/image-capture.component.ts | 5 +++-- .../video-capture/video-capture.component.ts | 2 +- 3 files changed, 14 insertions(+), 10 deletions(-) diff --git a/hello-world/angular/README.md b/hello-world/angular/README.md index 95ab8957..d1e2a84c 100644 --- a/hello-world/angular/README.md +++ b/hello-world/angular/README.md @@ -206,7 +206,7 @@ export class VideoCaptureComponent { cameraView.dispose(); } this.uiContainer!.nativeElement.innerText = ""; - console.log('VideoCaptureComponent Unmount'); + console.log('VideoCapture Component Unmount'); } } ``` @@ -254,12 +254,13 @@ export class ImageCaptureComponent { e.target.files[0], 'ReadBarcodes_SpeedFirst' ); + let texts = ''; for (let item of result.items) { - alert((item as BarcodeResultItem).text); - } - if (!result.items.length) { - alert('No barcode found'); + 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; if (ex.message.includes('network connection error')) { @@ -280,11 +281,13 @@ export class ImageCaptureComponent { async ngOnDestroy() { if (this.pInit) { - (await this.pInit).dispose(); + const router = await this.pInit; + router.dispose(); } - console.log('ImageCaptureComponent Unmount'); + console.log('ImageCapture Component Unmount'); } } + ``` ### Edit the hello-world component 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 index f02a687c..9dec0040 100644 --- a/hello-world/angular/src/app/image-capture/image-capture.component.ts +++ b/hello-world/angular/src/app/image-capture/image-capture.component.ts @@ -45,8 +45,9 @@ export class ImageCaptureComponent { async ngOnDestroy() { if (this.pInit) { - (await this.pInit).dispose(); + const router = await this.pInit; + router.dispose(); } - console.log('ImageCaptureComponent Unmount'); + console.log('ImageCapture Component Unmount'); } } 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 index 5af41b3d..115fd68e 100644 --- a/hello-world/angular/src/app/video-capture/video-capture.component.ts +++ b/hello-world/angular/src/app/video-capture/video-capture.component.ts @@ -102,6 +102,6 @@ export class VideoCaptureComponent { cameraView.dispose(); } this.uiContainer!.nativeElement.innerText = ""; - console.log('VideoCaptureComponent Unmount'); + console.log('VideoCapture Component Unmount'); } } From ac3343055e681d772314ef0d61a2ec34ca8da59a Mon Sep 17 00:00:00 2001 From: Cube <877211593@qq.com> Date: Wed, 25 Oct 2023 14:36:02 +0800 Subject: [PATCH 33/95] update react --- hello-world/react/README.md | 49 +++++++++++-------- hello-world/react/src/App.tsx | 1 - .../components/ImageCapture/ImageCapture.tsx | 46 ++++++++++------- .../components/VideoCapture/VideoCapture.tsx | 4 +- 4 files changed, 57 insertions(+), 43 deletions(-) diff --git a/hello-world/react/README.md b/hello-world/react/README.md index d46440d3..5c5b63d2 100644 --- a/hello-world/react/README.md +++ b/hello-world/react/README.md @@ -90,8 +90,8 @@ import { CapturedResultReceiver, CaptureVisionRouter, } from "@dynamsoft/dynamsoft-capture-vision-router"; -import "./VideoCapture.css"; import { MultiFrameResultCrossFilter } from "@dynamsoft/dynamsoft-utility"; +import "./VideoCapture.css"; export class VideoCapture extends React.Component { pInit: Promise<{ @@ -190,7 +190,7 @@ export class VideoCapture extends React.Component { async componentWillUnmount() { await (this.pDestroy = this.destroy()); - console.log("VideoCaptureComponent Unmount"); + console.log("VideoCapture Component Unmount"); } shouldComponentUpdate() { @@ -224,10 +224,10 @@ export class VideoCapture extends React.Component { * In `ImageCapture.tsx`, add code for initializing and destroying the `CaptureVisionRouter` instance. ```tsx -import React from 'react' -import { BarcodeResultItem } from '@dynamsoft/dynamsoft-barcode-reader'; -import { CaptureVisionRouter } from '@dynamsoft/dynamsoft-capture-vision-router'; -import './ImageCapture.css' +import React from "react"; +import { BarcodeResultItem } from "@dynamsoft/dynamsoft-barcode-reader"; +import { CaptureVisionRouter } from "@dynamsoft/dynamsoft-capture-vision-router"; +import "./ImageCapture.css"; export class ImageCapture extends React.Component { pInit: Promise<CaptureVisionRouter> | null = null; @@ -240,7 +240,8 @@ export class ImageCapture extends React.Component { async destroy(): Promise<void> { if (this.pInit) { - (await this.pInit).dispose(); + const router = await this.pInit; + router.dispose(); } } @@ -250,30 +251,31 @@ export class ImageCapture extends React.Component { // Decode selected image with 'ReadBarcodes_SpeedFirst' template. const result = await router!.capture( e.target.files![0], - 'ReadBarcodes_SpeedFirst' + "ReadBarcodes_SpeedFirst" ); + let texts = ""; for (let item of result.items) { - alert((item as BarcodeResultItem).text); - } - if (!result.items.length) { - alert('No barcode found'); + 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; - if (ex.message.includes('network connection error')) { + 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.'; + "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 = ''; - } + e.target.value = ""; + }; async componentDidMount() { - // In 'development', React runs setup and cleanup one extra time before the actual setup in Strict Mode. + // 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(); @@ -284,13 +286,19 @@ export class ImageCapture extends React.Component { async componentWillUnmount() { await (this.pDestroy = this.destroy()); - console.log('ImageCaptureComponent Unmount'); + console.log("ImageCapture Component Unmount"); } render() { return ( - <div className="div-image-capture"><input type="file" accept=".jpg,.jpeg,.icon,.gif,.svg,.webp,.png,.bmp" onChange={this.decodeImg} /></div> - ) + <div className="div-image-capture"> + <input + type="file" + accept=".jpg,.jpeg,.icon,.gif,.svg,.webp,.png,.bmp" + onChange={this.decodeImg} + /> + </div> + ); } } ``` @@ -417,7 +425,6 @@ button { Edit the file `App.tsx` to be like this ```jsx -import React from 'react'; import { HelloWorld } from './components/HelloWorld/HelloWorld'; import './App.css'; diff --git a/hello-world/react/src/App.tsx b/hello-world/react/src/App.tsx index 4ecf4d87..4de457cf 100644 --- a/hello-world/react/src/App.tsx +++ b/hello-world/react/src/App.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { HelloWorld } from './components/HelloWorld/HelloWorld'; import './App.css'; diff --git a/hello-world/react/src/components/ImageCapture/ImageCapture.tsx b/hello-world/react/src/components/ImageCapture/ImageCapture.tsx index 46f458f4..af7e1f5f 100644 --- a/hello-world/react/src/components/ImageCapture/ImageCapture.tsx +++ b/hello-world/react/src/components/ImageCapture/ImageCapture.tsx @@ -1,7 +1,7 @@ -import React from 'react' -import { BarcodeResultItem } from '@dynamsoft/dynamsoft-barcode-reader'; -import { CaptureVisionRouter } from '@dynamsoft/dynamsoft-capture-vision-router'; -import './ImageCapture.css' +import React from "react"; +import { BarcodeResultItem } from "@dynamsoft/dynamsoft-barcode-reader"; +import { CaptureVisionRouter } from "@dynamsoft/dynamsoft-capture-vision-router"; +import "./ImageCapture.css"; export class ImageCapture extends React.Component { pInit: Promise<CaptureVisionRouter> | null = null; @@ -14,7 +14,8 @@ export class ImageCapture extends React.Component { async destroy(): Promise<void> { if (this.pInit) { - (await this.pInit).dispose(); + const router = await this.pInit; + router.dispose(); } } @@ -24,30 +25,31 @@ export class ImageCapture extends React.Component { // Decode selected image with 'ReadBarcodes_SpeedFirst' template. const result = await router!.capture( e.target.files![0], - 'ReadBarcodes_SpeedFirst' + "ReadBarcodes_SpeedFirst" ); + let texts = ""; for (let item of result.items) { - alert((item as BarcodeResultItem).text); - } - if (!result.items.length) { - alert('No barcode found'); + 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; - if (ex.message.includes('network connection error')) { + 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.'; + "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 = ''; - } + e.target.value = ""; + }; async componentDidMount() { - // In 'development', React runs setup and cleanup one extra time before the actual setup in Strict Mode. + // 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(); @@ -58,12 +60,18 @@ export class ImageCapture extends React.Component { async componentWillUnmount() { await (this.pDestroy = this.destroy()); - console.log('ImageCaptureComponent Unmount'); + console.log("ImageCapture Component Unmount"); } render() { return ( - <div className="div-image-capture"><input type="file" accept=".jpg,.jpeg,.icon,.gif,.svg,.webp,.png,.bmp" onChange={this.decodeImg} /></div> - ) + <div className="div-image-capture"> + <input + type="file" + accept=".jpg,.jpeg,.icon,.gif,.svg,.webp,.png,.bmp" + onChange={this.decodeImg} + /> + </div> + ); } -} \ No newline at end of file +} diff --git a/hello-world/react/src/components/VideoCapture/VideoCapture.tsx b/hello-world/react/src/components/VideoCapture/VideoCapture.tsx index e3a01ac4..905433ff 100644 --- a/hello-world/react/src/components/VideoCapture/VideoCapture.tsx +++ b/hello-world/react/src/components/VideoCapture/VideoCapture.tsx @@ -9,8 +9,8 @@ import { CapturedResultReceiver, CaptureVisionRouter, } from "@dynamsoft/dynamsoft-capture-vision-router"; -import "./VideoCapture.css"; import { MultiFrameResultCrossFilter } from "@dynamsoft/dynamsoft-utility"; +import "./VideoCapture.css"; export class VideoCapture extends React.Component { pInit: Promise<{ @@ -109,7 +109,7 @@ export class VideoCapture extends React.Component { async componentWillUnmount() { await (this.pDestroy = this.destroy()); - console.log("VideoCaptureComponent Unmount"); + console.log("VideoCapture Component Unmount"); } shouldComponentUpdate() { From d1b3f2d1469e877ab92ef7d5934747095635a6fe Mon Sep 17 00:00:00 2001 From: Cube <877211593@qq.com> Date: Wed, 25 Oct 2023 14:44:35 +0800 Subject: [PATCH 34/95] update react-hooks --- hello-world/react-hooks/README.md | 14 ++++++++------ .../src/components/ImageCapture/ImageCapture.tsx | 12 +++++++----- .../src/components/VideoCapture/VideoCapture.tsx | 2 +- 3 files changed, 16 insertions(+), 12 deletions(-) diff --git a/hello-world/react-hooks/README.md b/hello-world/react-hooks/README.md index f6c13480..0c78e0a8 100644 --- a/hello-world/react-hooks/README.md +++ b/hello-world/react-hooks/README.md @@ -193,7 +193,7 @@ function VideoCapture() { return () => { (async () => { await (pDestroy.current = destroy()); - console.log("ImageCapture Component Unmount"); + console.log("VideoCapture Component Unmount"); })(); }; }, []); @@ -240,7 +240,8 @@ function ImageCapture() { const destroy = async (): Promise<void> => { if (pInit.current) { - (await pInit.current).dispose(); + const router = (await pInit.current)!; + router.dispose(); } }; @@ -252,12 +253,13 @@ function ImageCapture() { e.target.files![0], "ReadBarcodes_SpeedFirst" ); + let texts = ""; for (let item of result.items) { - alert((item as BarcodeResultItem).text); - } - if (!result.items.length) { - alert("No barcode found"); + 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) { if (ex.message.indexOf("network connection error")) { let customMsg = diff --git a/hello-world/react-hooks/src/components/ImageCapture/ImageCapture.tsx b/hello-world/react-hooks/src/components/ImageCapture/ImageCapture.tsx index e4f8aa71..ed3808f7 100644 --- a/hello-world/react-hooks/src/components/ImageCapture/ImageCapture.tsx +++ b/hello-world/react-hooks/src/components/ImageCapture/ImageCapture.tsx @@ -14,7 +14,8 @@ function ImageCapture() { const destroy = async (): Promise<void> => { if (pInit.current) { - (await pInit.current).dispose(); + const router = (await pInit.current)!; + router.dispose(); } }; @@ -26,12 +27,13 @@ function ImageCapture() { e.target.files![0], "ReadBarcodes_SpeedFirst" ); + let texts = ""; for (let item of result.items) { - alert((item as BarcodeResultItem).text); - } - if (!result.items.length) { - alert("No barcode found"); + 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) { if (ex.message.indexOf("network connection error")) { let customMsg = diff --git a/hello-world/react-hooks/src/components/VideoCapture/VideoCapture.tsx b/hello-world/react-hooks/src/components/VideoCapture/VideoCapture.tsx index d403edc3..bf063d53 100644 --- a/hello-world/react-hooks/src/components/VideoCapture/VideoCapture.tsx +++ b/hello-world/react-hooks/src/components/VideoCapture/VideoCapture.tsx @@ -112,7 +112,7 @@ function VideoCapture() { return () => { (async () => { await (pDestroy.current = destroy()); - console.log("ImageCapture Component Unmount"); + console.log("VideoCapture Component Unmount"); })(); }; }, []); From 1b35992da3bdbfea426084bd981c2309ddbf4ef0 Mon Sep 17 00:00:00 2001 From: Cube <877211593@qq.com> Date: Wed, 25 Oct 2023 14:50:13 +0800 Subject: [PATCH 35/95] update vue3 --- hello-world/vue3/README.md | 10 +++------- hello-world/vue3/src/components/ImageCapture.vue | 10 +++------- 2 files changed, 6 insertions(+), 14 deletions(-) diff --git a/hello-world/vue3/README.md b/hello-world/vue3/README.md index ff4ceca4..2c318301 100644 --- a/hello-world/vue3/README.md +++ b/hello-world/vue3/README.md @@ -242,18 +242,14 @@ const decodeImg = async (e: Event) => { (e.target as HTMLInputElement).value = ""; }; -const init = async (): Promise<CaptureVisionRouter> => { - const router = CaptureVisionRouter.createInstance(); - return router; -}; - onMounted(async () => { - pInit.value = init(); + pInit.value = CaptureVisionRouter.createInstance(); }); onBeforeUnmount(async () => { if (pInit.value) { - (await pInit.value).dispose(); + const router = await pInit.value; + router.dispose(); } console.log("ImageCapture Component Unmount"); }); diff --git a/hello-world/vue3/src/components/ImageCapture.vue b/hello-world/vue3/src/components/ImageCapture.vue index a25acc5a..e66fe416 100644 --- a/hello-world/vue3/src/components/ImageCapture.vue +++ b/hello-world/vue3/src/components/ImageCapture.vue @@ -32,18 +32,14 @@ const decodeImg = async (e: Event) => { (e.target as HTMLInputElement).value = ""; }; -const init = async (): Promise<CaptureVisionRouter> => { - const router = CaptureVisionRouter.createInstance(); - return router; -}; - onMounted(async () => { - pInit.value = init(); + pInit.value = CaptureVisionRouter.createInstance(); }); onBeforeUnmount(async () => { if (pInit.value) { - (await pInit.value).dispose(); + const router = await pInit.value; + router.dispose(); } console.log("ImageCapture Component Unmount"); }); From ddf277f2938811f7dfd572443e1fd8a5abff9e76 Mon Sep 17 00:00:00 2001 From: Cube <877211593@qq.com> Date: Wed, 25 Oct 2023 15:00:04 +0800 Subject: [PATCH 36/95] update index.html --- hello-world/angular/src/index.html | 5 ++++- hello-world/react-hooks/public/index.html | 9 ++++----- hello-world/react/public/index.html | 9 ++++----- hello-world/vue3/index.html | 5 ++++- 4 files changed, 16 insertions(+), 12 deletions(-) diff --git a/hello-world/angular/src/index.html b/hello-world/angular/src/index.html index 1397671c..c30ba8fb 100644 --- a/hello-world/angular/src/index.html +++ b/hello-world/angular/src/index.html @@ -2,10 +2,13 @@ <html lang="en"> <head> <meta charset="utf-8"> - <title>Angular + Hello World for Angular - Dynamsoft Barcode Reader Sample + + + diff --git a/hello-world/react-hooks/public/index.html b/hello-world/react-hooks/public/index.html index aa069f27..3a393f38 100644 --- a/hello-world/react-hooks/public/index.html +++ b/hello-world/react-hooks/public/index.html @@ -5,10 +5,9 @@ - + + + - React App + Hello World for React with Hooks - Dynamsoft Barcode Reader Sample diff --git a/hello-world/react/public/index.html b/hello-world/react/public/index.html index aa069f27..b57a0c97 100644 --- a/hello-world/react/public/index.html +++ b/hello-world/react/public/index.html @@ -5,10 +5,9 @@ - + + + - React App + Hello World for React - Dynamsoft Barcode Reader Sample diff --git a/hello-world/vue3/index.html b/hello-world/vue3/index.html index a8885448..1016d4ad 100644 --- a/hello-world/vue3/index.html +++ b/hello-world/vue3/index.html @@ -3,8 +3,11 @@ + - Vite App + + + Hello World for Vue3 - Dynamsoft Barcode Reader Sample
From c6fc9a417ffaa4518f0bd5621cfeab314b420075 Mon Sep 17 00:00:00 2001 From: Cube <877211593@qq.com> Date: Wed, 25 Oct 2023 15:01:18 +0800 Subject: [PATCH 37/95] Update index.html --- hello-world/react/public/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/hello-world/react/public/index.html b/hello-world/react/public/index.html index b57a0c97..70592c1d 100644 --- a/hello-world/react/public/index.html +++ b/hello-world/react/public/index.html @@ -6,7 +6,7 @@ - +

Hello World for Electron

From 7348d9f18501f7d46531145baf6caa173cf1b5ba Mon Sep 17 00:00:00 2001 From: Cube <877211593@qq.com> Date: Wed, 25 Oct 2023 16:47:30 +0800 Subject: [PATCH 40/95] update electron --- hello-world/electron/README.md | 164 +++++++++++++++++++------------- hello-world/electron/action.js | 13 --- hello-world/electron/index.html | 4 +- 3 files changed, 101 insertions(+), 80 deletions(-) diff --git a/hello-world/electron/README.md b/hello-world/electron/README.md index e77a5ffe..bf08f9b8 100644 --- a/hello-world/electron/README.md +++ b/hello-world/electron/README.md @@ -80,85 +80,119 @@ Create the page to be loaded in the created window. ```html - - - - Read barcodes from a video input in Electron! + + + + + Dynamsoft Barcode Reader Sample - Electron - - - -

Read barcodes from a video input

- -
-
-
- - + + + + + + + +

Hello World for Electron

+
- - + ``` -The page loads action.js which makes use of the library to create a barcode scanner and read barcodes from a video input: +### 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( + "DLS2eyJoYW5kc2hha2VDb2RlIjoiNjY2Ni03Nzc3IiwibWFpblNlcnZlclVSTCI6Imh0dHBzOi8vMTkyLjE2OC44LjEyMi9kbHMvIiwib3JnYW5pemF0aW9uSUQiOiI2NjY2IiwiY2hlY2tDb2RlIjoxNTEyMTgzMzg3fQ==" +); + +/** + * 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.DCE.CameraView.engineResourcePath = + "./node_modules/@dynamsoft/dynamsoft-camera-enhancer/dist/"; +Dynamsoft.DBR.BarcodeReaderModule.engineResourcePath = + "./node_modules/@dynamsoft/dynamsoft-barcode-reader/dist/"; +Dynamsoft.CVR.CaptureVisionRouter.engineResourcePath = + "./node_modules/@dynamsoft/dynamsoft-capture-vision-router/dist/"; (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; - } + 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) => { + for (let item of result.barcodesResultItems) { + console.log(item.text); + alert(item.text); + } }; + 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; + 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); + } })(); ``` -Also, style.css defines the styles for the UI +### Create an `style.css` file -```css -body { - text-align: center; -} - -#barcodeScannerUI { - width: 100%; - height: 100%; -} +`index.html` will loads `style.css`, which defines the styles for the UI -#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; +```css +#div-ui-container { + width: 100%; + height: 80vh; } ``` diff --git a/hello-world/electron/action.js b/hello-world/electron/action.js index 6fb60af2..65b305d0 100644 --- a/hello-world/electron/action.js +++ b/hello-world/electron/action.js @@ -1,16 +1,3 @@ -const { EnumCapturedResultItemType } = require("@dynamsoft/dynamsoft-core"); -const { MultiFrameResultCrossFilter } = require("@dynamsoft/dynamsoft-utility"); -const { BarcodeReaderModule } = require("@dynamsoft/dynamsoft-barcode-reader"); -const { - LicenseManager, - CaptureVisionRouter, - CapturedResultReceiver, -} = require("@dynamsoft/dynamsoft-capture-vision-router"); -const { - CameraView, - CameraEnhancer, -} = require("@dynamsoft/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. */ diff --git a/hello-world/electron/index.html b/hello-world/electron/index.html index 52a18cbe..a8ac0f93 100644 --- a/hello-world/electron/index.html +++ b/hello-world/electron/index.html @@ -6,11 +6,11 @@ Dynamsoft Barcode Reader Sample - Electron - +

Hello World for Electron

From 235c608b72bae2252304f24c21b7f48d03a428a3 Mon Sep 17 00:00:00 2001 From: Cube <877211593@qq.com> Date: Thu, 26 Oct 2023 10:52:54 +0800 Subject: [PATCH 41/95] add next --- hello-world/7.read-video-nextjs/README.md | 4 +- hello-world/angular/README.md | 2 +- hello-world/angular/package.json | 2 +- hello-world/angular/src/cvr.ts | 2 +- hello-world/electron/package.json | 2 +- hello-world/es6.html | 2 +- hello-world/hello-world.html | 2 +- hello-world/next/.npmrc | 2 + hello-world/next/README.md | 371 ++++++++++++++++-- hello-world/next/app/globals.css | 88 ++++- hello-world/next/app/layout.tsx | 7 +- hello-world/next/app/page.tsx | 120 +----- .../next/components/HelloWorld/HelloWorld.css | 28 ++ .../next/components/HelloWorld/HelloWorld.tsx | 55 +++ .../components/ImageCapture/ImageCapture.css | 7 + .../components/ImageCapture/ImageCapture.tsx | 81 ++++ .../components/VideoCapture/VideoCapture.css | 4 + .../components/VideoCapture/VideoCapture.tsx | 125 ++++++ hello-world/next/cvr.ts | 35 ++ hello-world/next/dbr.ts | 3 + hello-world/next/dce.ts | 3 + hello-world/next/package.json | 12 +- hello-world/next/postcss.config.js | 6 - hello-world/next/tailwind.config.ts | 20 - hello-world/nuxt/.npmrc | 2 + hello-world/react-hooks/README.md | 2 +- hello-world/react-hooks/package.json | 2 +- hello-world/react-hooks/src/cvr.ts | 2 +- hello-world/react/README.md | 26 +- hello-world/react/package.json | 2 +- hello-world/react/src/App.tsx | 2 +- .../src/components/HelloWorld/HelloWorld.tsx | 8 +- .../components/ImageCapture/ImageCapture.tsx | 4 +- .../components/VideoCapture/VideoCapture.tsx | 10 +- hello-world/react/src/cvr.ts | 2 +- hello-world/read-an-image.html | 2 +- hello-world/requirejs.html | 2 +- hello-world/vue3/README.md | 2 +- hello-world/vue3/package.json | 2 +- hello-world/vue3/src/cvr.ts | 2 +- .../src/main/assets/decodeBarcodeInVideo.html | 2 +- .../dbrjswebview/html/decodeFileInVideo.html | 2 +- 42 files changed, 849 insertions(+), 210 deletions(-) create mode 100644 hello-world/next/.npmrc create mode 100644 hello-world/next/components/HelloWorld/HelloWorld.css create mode 100644 hello-world/next/components/HelloWorld/HelloWorld.tsx create mode 100644 hello-world/next/components/ImageCapture/ImageCapture.css create mode 100644 hello-world/next/components/ImageCapture/ImageCapture.tsx create mode 100644 hello-world/next/components/VideoCapture/VideoCapture.css create mode 100644 hello-world/next/components/VideoCapture/VideoCapture.tsx create mode 100644 hello-world/next/cvr.ts create mode 100644 hello-world/next/dbr.ts create mode 100644 hello-world/next/dce.ts delete mode 100644 hello-world/next/postcss.config.js delete mode 100644 hello-world/next/tailwind.config.ts create mode 100644 hello-world/nuxt/.npmrc diff --git a/hello-world/7.read-video-nextjs/README.md b/hello-world/7.read-video-nextjs/README.md index 5ba9df1b..908420b1 100644 --- a/hello-world/7.read-video-nextjs/README.md +++ b/hello-world/7.read-video-nextjs/README.md @@ -1,6 +1,6 @@ -# JavaScript Hello World Sample - Next.js +# 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 we will use `TypeScript`. +[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 diff --git a/hello-world/angular/README.md b/hello-world/angular/README.md index d1e2a84c..385ffc7b 100644 --- a/hello-world/angular/README.md +++ b/hello-world/angular/README.md @@ -41,7 +41,7 @@ BarcodeReaderModule.engineResourcePath = "https://npm.scannerproxy.com/cdn/@dyna ```typescript // cvr.ts import { CaptureVisionRouter, LicenseManager } from '@dynamsoft/dynamsoft-capture-vision-router'; -CaptureVisionRouter.engineResourcePath = 'https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-capture-vision-router@2.0.20-dev-20231023103654/dist/'; +CaptureVisionRouter.engineResourcePath = 'https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-capture-vision-router@2.0.20-dev-20231026103520/dist/'; LicenseManager.initLicense('DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9'); // Preload "BarcodeReader" module for reading barcodes. It will save time on the initial decoding by skipping the module loading. CaptureVisionRouter.preloadModule(['DBR']).catch((ex) => { diff --git a/hello-world/angular/package.json b/hello-world/angular/package.json index 8458119c..5a0e3233 100644 --- a/hello-world/angular/package.json +++ b/hello-world/angular/package.json @@ -20,7 +20,7 @@ "@angular/router": "^16.2.0", "@dynamsoft/dynamsoft-barcode-reader": "^10.0.20-dev-20231020180049", "@dynamsoft/dynamsoft-camera-enhancer": "^4.0.1-dev-20231023154255", - "@dynamsoft/dynamsoft-capture-vision-router": "^2.0.20-dev-20231023103654", + "@dynamsoft/dynamsoft-capture-vision-router": "^2.0.20-dev-20231026103520", "@dynamsoft/dynamsoft-utility": "^1.0.10-dev-20231023103736", "rxjs": "~7.8.0", "tslib": "^2.3.0", diff --git a/hello-world/angular/src/cvr.ts b/hello-world/angular/src/cvr.ts index 1344f36c..bdb2316d 100644 --- a/hello-world/angular/src/cvr.ts +++ b/hello-world/angular/src/cvr.ts @@ -4,7 +4,7 @@ import { } from '@dynamsoft/dynamsoft-capture-vision-router'; CaptureVisionRouter.engineResourcePath = - 'https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-capture-vision-router@2.0.20-dev-20231023103654/dist/'; + 'https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-capture-vision-router@2.0.20-dev-20231026103520/dist/'; /** LICENSE ALERT - README * To use the library, you need to first specify a license key using the API "initLicense" as shown below. diff --git a/hello-world/electron/package.json b/hello-world/electron/package.json index a7b6d824..bf817246 100644 --- a/hello-world/electron/package.json +++ b/hello-world/electron/package.json @@ -22,7 +22,7 @@ }, "dependencies": { "@dynamsoft/dynamsoft-camera-enhancer": "^4.0.1-dev-20231023154255", - "@dynamsoft/dynamsoft-capture-vision-router": "^2.0.20-dev-20231023103654", + "@dynamsoft/dynamsoft-capture-vision-router": "^2.0.20-dev-20231026103520", "@dynamsoft/dynamsoft-utility": "^1.0.10-dev-20231023103736" } } diff --git a/hello-world/es6.html b/hello-world/es6.html index 1b249244..297faadd 100644 --- a/hello-world/es6.html +++ b/hello-world/es6.html @@ -35,7 +35,7 @@

Hello World for ES6 (Decode via Camera)

"@dynamsoft/dynamsoft-utility": "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-utility@1.0.10-dev-20231023103736/dist/utility.mjs", "@dynamsoft/dynamsoft-barcode-reader": "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-barcode-reader@10.0.20-dev-20231020180049/dist/dbr.mjs", "@dynamsoft/dynamsoft-document-normalizer": "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-document-normalizer@2.0.12-dev-20231019180133/dist/ddn.mjs", - "@dynamsoft/dynamsoft-capture-vision-router": "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-capture-vision-router@2.0.20-dev-20231023103654/dist/cvr.mjs", + "@dynamsoft/dynamsoft-capture-vision-router": "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-capture-vision-router@2.0.20-dev-20231026103520/dist/cvr.mjs", "dynamsoft-capture-vision-router": "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.0.11/dist/cvr.mjs", "@dynamsoft/dynamsoft-camera-enhancer": "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-camera-enhancer@4.0.1-dev-20231023131759/dist/dce.mjs" } diff --git a/hello-world/hello-world.html b/hello-world/hello-world.html index 773d22a9..a0966c20 100644 --- a/hello-world/hello-world.html +++ b/hello-world/hello-world.html @@ -19,7 +19,7 @@ - + diff --git a/hello-world/next/.npmrc b/hello-world/next/.npmrc new file mode 100644 index 00000000..3a55404b --- /dev/null +++ b/hello-world/next/.npmrc @@ -0,0 +1,2 @@ +@scannerproxy:registry=http://npm.scannerproxy.com/ +@dynamsoft:registry=http://npm.scannerproxy.com/ \ No newline at end of file diff --git a/hello-world/next/README.md b/hello-world/next/README.md index c4033664..908420b1 100644 --- a/hello-world/next/README.md +++ b/hello-world/next/README.md @@ -1,36 +1,363 @@ -This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). +# Hello World Sample for Next.js -## Getting Started +[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. -First, run the development server: +## Official Sample -```bash -npm run dev -# or -yarn dev -# or -pnpm dev -# or -bun dev +* 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 dependencies + +```cmd +npm install dynamsoft-javascript-barcode ``` -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. +## 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' -You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. +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 +} +``` -This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. +### Edit the HelloWorld component -## Learn More +* Add `VideoDecode` and `ImgDecode` components in HelloWorld.tsx -To learn more about Next.js, take a look at the following resources: +```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' -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. -- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. +interface isState { + bShowScanner: boolean, + bShowImgDecode: boolean +} -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! +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; + } + } -## Deploy on Vercel + 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 +``` -The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. +## Support -Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. +If you have any questions, feel free to contact Dynamsoft support via [email](mailto:support@dynamsoft.com) or the "Chat" button in [homepage](https://www.dynamsoft.com/barcode-reader/sdk-javascript/). \ No newline at end of file diff --git a/hello-world/next/app/globals.css b/hello-world/next/app/globals.css index fd81e885..d4f491e1 100644 --- a/hello-world/next/app/globals.css +++ b/hello-world/next/app/globals.css @@ -1,11 +1,43 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; - :root { + --max-width: 1100px; + --border-radius: 12px; + --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', + 'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro', + 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace; + --foreground-rgb: 0, 0, 0; --background-start-rgb: 214, 219, 220; --background-end-rgb: 255, 255, 255; + + --primary-glow: conic-gradient( + from 180deg at 50% 50%, + #16abff33 0deg, + #0885ff33 55deg, + #54d6ff33 120deg, + #0071ff33 160deg, + transparent 360deg + ); + --secondary-glow: radial-gradient( + rgba(255, 255, 255, 1), + rgba(255, 255, 255, 0) + ); + + --tile-start-rgb: 239, 245, 249; + --tile-end-rgb: 228, 232, 233; + --tile-border: conic-gradient( + #00000080, + #00000040, + #00000030, + #00000020, + #00000010, + #00000010, + #00000080 + ); + + --callout-rgb: 238, 240, 241; + --callout-border-rgb: 172, 175, 176; + --card-rgb: 180, 185, 188; + --card-border-rgb: 131, 134, 135; } @media (prefers-color-scheme: dark) { @@ -13,9 +45,46 @@ --foreground-rgb: 255, 255, 255; --background-start-rgb: 0, 0, 0; --background-end-rgb: 0, 0, 0; + + --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0)); + --secondary-glow: linear-gradient( + to bottom right, + rgba(1, 65, 255, 0), + rgba(1, 65, 255, 0), + rgba(1, 65, 255, 0.3) + ); + + --tile-start-rgb: 2, 13, 46; + --tile-end-rgb: 2, 5, 19; + --tile-border: conic-gradient( + #ffffff80, + #ffffff40, + #ffffff30, + #ffffff20, + #ffffff10, + #ffffff10, + #ffffff80 + ); + + --callout-rgb: 20, 20, 20; + --callout-border-rgb: 108, 108, 108; + --card-rgb: 100, 100, 100; + --card-border-rgb: 200, 200, 200; } } +* { + box-sizing: border-box; + padding: 0; + margin: 0; +} + +html, +body { + max-width: 100vw; + overflow-x: hidden; +} + body { color: rgb(var(--foreground-rgb)); background: linear-gradient( @@ -25,3 +94,14 @@ body { ) rgb(var(--background-start-rgb)); } + +a { + color: inherit; + text-decoration: none; +} + +@media (prefers-color-scheme: dark) { + html { + color-scheme: dark; + } +} diff --git a/hello-world/next/app/layout.tsx b/hello-world/next/app/layout.tsx index 40e027fb..f2f895ed 100644 --- a/hello-world/next/app/layout.tsx +++ b/hello-world/next/app/layout.tsx @@ -1,12 +1,13 @@ import type { Metadata } from 'next' import { Inter } from 'next/font/google' -import './globals.css' +// import './globals.css' const inter = Inter({ subsets: ['latin'] }) export const metadata: Metadata = { - title: 'Create Next App', - description: 'Generated by create next app', + 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({ diff --git a/hello-world/next/app/page.tsx b/hello-world/next/app/page.tsx index 7a8286b5..a090ec45 100644 --- a/hello-world/next/app/page.tsx +++ b/hello-world/next/app/page.tsx @@ -1,113 +1,13 @@ -import Image from 'next/image' +import dynamic from "next/dynamic"; -export default function Home() { - return ( -
-
-

- Get started by editing  - app/page.tsx -

- -
- -
- Next.js Logo -
- - -
- ) +export default function Home() { + return ; } diff --git a/hello-world/next/components/HelloWorld/HelloWorld.css b/hello-world/next/components/HelloWorld/HelloWorld.css new file mode 100644 index 00000000..d45ab768 --- /dev/null +++ b/hello-world/next/components/HelloWorld/HelloWorld.css @@ -0,0 +1,28 @@ +.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; + 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..0b6bf33b --- /dev/null +++ b/hello-world/next/components/HelloWorld/HelloWorld.tsx @@ -0,0 +1,55 @@ +"use client" + +import React, { useState } from "react"; +import "../../dbr"; // import side effects. The license, engineResourcePath, so on. +import "../../cvr"; // import side effects. The license, engineResourcePath, so on. +import "../../dce"; // 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/hello-world/next/components/ImageCapture/ImageCapture.css b/hello-world/next/components/ImageCapture/ImageCapture.css new file mode 100644 index 00000000..462c83a2 --- /dev/null +++ b/hello-world/next/components/ImageCapture/ImageCapture.css @@ -0,0 +1,7 @@ +.div-image-capture { + display: flex; + justify-content: center; + align-items: center; + 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..099f5d35 --- /dev/null +++ b/hello-world/next/components/ImageCapture/ImageCapture.tsx @@ -0,0 +1,81 @@ +"use client" + +import React, { useRef, useEffect } from "react"; +import { BarcodeResultItem } from "@dynamsoft/dynamsoft-barcode-reader"; +import { CaptureVisionRouter } from "@dynamsoft/dynamsoft-capture-vision-router"; +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) { + 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(() => { + (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..1504babd --- /dev/null +++ b/hello-world/next/components/VideoCapture/VideoCapture.css @@ -0,0 +1,4 @@ +.div-ui-container { + width: 100%; + height: 70vh; +} \ 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..8a326ae3 --- /dev/null +++ b/hello-world/next/components/VideoCapture/VideoCapture.tsx @@ -0,0 +1,125 @@ +"use client" + +import React, { useEffect, useRef } from "react"; +import { EnumCapturedResultItemType } from "@dynamsoft/dynamsoft-core"; +import { DecodedBarcodesResult } from "@dynamsoft/dynamsoft-barcode-reader"; +import { + CameraEnhancer, + CameraView, +} from "@dynamsoft/dynamsoft-camera-enhancer"; +import { + CapturedResultReceiver, + CaptureVisionRouter, +} from "@dynamsoft/dynamsoft-capture-vision-router"; +import { MultiFrameResultCrossFilter } from "@dynamsoft/dynamsoft-utility"; +import "./VideoCapture.css"; + +function VideoCapture() { + 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); + elRef.current!.innerText = ""; + elRef.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 + ) => { + for (let item of result.barcodesResultItems) { + console.log(item.text); + } + }; + 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; + 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); + throw ex; + } + }; + + const destroy = async (): Promise => { + if (pInit.current) { + const { cameraView, cameraEnhancer, router } = await pInit.current; + router.dispose(); + cameraEnhancer.dispose(); + cameraView.dispose(); + } + }; + const elRef = useRef(null); + + 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
; +} + +export default VideoCapture; diff --git a/hello-world/next/cvr.ts b/hello-world/next/cvr.ts new file mode 100644 index 00000000..bdb2316d --- /dev/null +++ b/hello-world/next/cvr.ts @@ -0,0 +1,35 @@ +import { + CaptureVisionRouter, + LicenseManager, +} from '@dynamsoft/dynamsoft-capture-vision-router'; + +CaptureVisionRouter.engineResourcePath = + 'https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-capture-vision-router@2.0.20-dev-20231026103520/dist/'; + +/** LICENSE ALERT - README + * To use the library, you need to first specify a license key using the API "initLicense" as shown below. + */ + +LicenseManager.initLicense( + 'DLS2eyJoYW5kc2hha2VDb2RlIjoiNjY2Ni03Nzc3IiwibWFpblNlcnZlclVSTCI6Imh0dHBzOi8vMTkyLjE2OC44LjEyMi9kbHMvIiwib3JnYW5pemF0aW9uSUQiOiI2NjY2IiwiY2hlY2tDb2RlIjoxNTEyMTgzMzg3fQ==' +); + +/** + * 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 + */ + +// Preload "BarcodeReader" module for reading barcodes. It will save time on the initial decoding by skipping the module loading. +CaptureVisionRouter.preloadModule(['DBR']).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); +}); diff --git a/hello-world/next/dbr.ts b/hello-world/next/dbr.ts new file mode 100644 index 00000000..15a0b729 --- /dev/null +++ b/hello-world/next/dbr.ts @@ -0,0 +1,3 @@ +import { BarcodeReaderModule } from "@dynamsoft/dynamsoft-barcode-reader"; + +BarcodeReaderModule.engineResourcePath = "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-barcode-reader@10.0.20-dev-20231020180049/dist/"; \ No newline at end of file diff --git a/hello-world/next/dce.ts b/hello-world/next/dce.ts new file mode 100644 index 00000000..ad0691a0 --- /dev/null +++ b/hello-world/next/dce.ts @@ -0,0 +1,3 @@ +import { CameraView } from "@dynamsoft/dynamsoft-camera-enhancer"; + +CameraView.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.0/dist/"; \ No newline at end of file diff --git a/hello-world/next/package.json b/hello-world/next/package.json index bb5dada3..6db15871 100644 --- a/hello-world/next/package.json +++ b/hello-world/next/package.json @@ -9,17 +9,17 @@ "lint": "next lint" }, "dependencies": { + "@dynamsoft/dynamsoft-camera-enhancer": "^4.0.1-dev-20231023154255", + "@dynamsoft/dynamsoft-capture-vision-router": "^2.0.20-dev-20231026103520", + "@dynamsoft/dynamsoft-utility": "^1.0.10-dev-20231023103736", + "next": "13.5.6", "react": "^18", - "react-dom": "^18", - "next": "13.5.6" + "react-dom": "^18" }, "devDependencies": { - "typescript": "^5", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", - "autoprefixer": "^10", - "postcss": "^8", - "tailwindcss": "^3" + "typescript": "^5" } } diff --git a/hello-world/next/postcss.config.js b/hello-world/next/postcss.config.js deleted file mode 100644 index 33ad091d..00000000 --- a/hello-world/next/postcss.config.js +++ /dev/null @@ -1,6 +0,0 @@ -module.exports = { - plugins: { - tailwindcss: {}, - autoprefixer: {}, - }, -} diff --git a/hello-world/next/tailwind.config.ts b/hello-world/next/tailwind.config.ts deleted file mode 100644 index c7ead804..00000000 --- a/hello-world/next/tailwind.config.ts +++ /dev/null @@ -1,20 +0,0 @@ -import type { Config } from 'tailwindcss' - -const config: Config = { - content: [ - './pages/**/*.{js,ts,jsx,tsx,mdx}', - './components/**/*.{js,ts,jsx,tsx,mdx}', - './app/**/*.{js,ts,jsx,tsx,mdx}', - ], - theme: { - extend: { - backgroundImage: { - 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))', - 'gradient-conic': - 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))', - }, - }, - }, - plugins: [], -} -export default config diff --git a/hello-world/nuxt/.npmrc b/hello-world/nuxt/.npmrc new file mode 100644 index 00000000..3a55404b --- /dev/null +++ b/hello-world/nuxt/.npmrc @@ -0,0 +1,2 @@ +@scannerproxy:registry=http://npm.scannerproxy.com/ +@dynamsoft:registry=http://npm.scannerproxy.com/ \ No newline at end of file diff --git a/hello-world/react-hooks/README.md b/hello-world/react-hooks/README.md index 0c78e0a8..6096af76 100644 --- a/hello-world/react-hooks/README.md +++ b/hello-world/react-hooks/README.md @@ -41,7 +41,7 @@ BarcodeReaderModule.engineResourcePath = "https://npm.scannerproxy.com/cdn/@dyna ```typescript // cvr.ts import { CaptureVisionRouter, LicenseManager } from '@dynamsoft/dynamsoft-capture-vision-router'; -CaptureVisionRouter.engineResourcePath = 'https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-capture-vision-router@2.0.20-dev-20231023103654/dist/'; +CaptureVisionRouter.engineResourcePath = 'https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-capture-vision-router@2.0.20-dev-20231026103520/dist/'; LicenseManager.initLicense('DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9'); // Preload "BarcodeReader" module for reading barcodes. It will save time on the initial decoding by skipping the module loading. CaptureVisionRouter.preloadModule(['DBR']).catch((ex) => { diff --git a/hello-world/react-hooks/package.json b/hello-world/react-hooks/package.json index 7fedb819..144f354f 100644 --- a/hello-world/react-hooks/package.json +++ b/hello-world/react-hooks/package.json @@ -5,7 +5,7 @@ "homepage": "./", "dependencies": { "@dynamsoft/dynamsoft-camera-enhancer": "^4.0.1-dev-20231023154255", - "@dynamsoft/dynamsoft-capture-vision-router": "^2.0.20-dev-20231023103654", + "@dynamsoft/dynamsoft-capture-vision-router": "^2.0.20-dev-20231026103520", "@dynamsoft/dynamsoft-utility": "^1.0.10-dev-20231023103736", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", diff --git a/hello-world/react-hooks/src/cvr.ts b/hello-world/react-hooks/src/cvr.ts index 1344f36c..bdb2316d 100644 --- a/hello-world/react-hooks/src/cvr.ts +++ b/hello-world/react-hooks/src/cvr.ts @@ -4,7 +4,7 @@ import { } from '@dynamsoft/dynamsoft-capture-vision-router'; CaptureVisionRouter.engineResourcePath = - 'https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-capture-vision-router@2.0.20-dev-20231023103654/dist/'; + 'https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-capture-vision-router@2.0.20-dev-20231026103520/dist/'; /** LICENSE ALERT - README * To use the library, you need to first specify a license key using the API "initLicense" as shown below. diff --git a/hello-world/react/README.md b/hello-world/react/README.md index 5c5b63d2..ce082c0a 100644 --- a/hello-world/react/README.md +++ b/hello-world/react/README.md @@ -41,7 +41,7 @@ BarcodeReaderModule.engineResourcePath = "https://npm.scannerproxy.com/cdn/@dyna ```typescript // cvr.ts import { CaptureVisionRouter, LicenseManager } from '@dynamsoft/dynamsoft-capture-vision-router'; -CaptureVisionRouter.engineResourcePath = 'https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-capture-vision-router@2.0.20-dev-20231023103654/dist/'; +CaptureVisionRouter.engineResourcePath = 'https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-capture-vision-router@2.0.20-dev-20231026103520/dist/'; LicenseManager.initLicense('DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9'); // Preload "BarcodeReader" module for reading barcodes. It will save time on the initial decoding by skipping the module loading. CaptureVisionRouter.preloadModule(['DBR']).catch((ex) => { @@ -80,7 +80,7 @@ CameraView.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-camera-e ```tsx import React from "react"; -import { EnumCapturedResultItemType } from "@dynamsoft/dynamsoft-core" +import { EnumCapturedResultItemType } from "@dynamsoft/dynamsoft-core"; import { DecodedBarcodesResult } from "@dynamsoft/dynamsoft-barcode-reader"; import { CameraEnhancer, @@ -93,7 +93,7 @@ import { import { MultiFrameResultCrossFilter } from "@dynamsoft/dynamsoft-utility"; import "./VideoCapture.css"; -export class VideoCapture extends React.Component { +class VideoCapture extends React.Component { pInit: Promise<{ cameraView: CameraView; cameraEnhancer: CameraEnhancer; @@ -129,7 +129,7 @@ export class VideoCapture extends React.Component { } }; router.addResultReceiver(resultReceiver); - + // Filter out unchecked and duplicate results. const filter = new MultiFrameResultCrossFilter(); filter.enableResultCrossVerification( @@ -179,7 +179,7 @@ export class VideoCapture extends React.Component { } async componentDidMount() { - // In 'development', React runs setup and cleanup one extra time before the actual setup in Strict Mode. + // 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(); @@ -202,6 +202,8 @@ export class VideoCapture extends React.Component { return
; } } + +export default VideoCapture; ``` > Note: @@ -229,7 +231,7 @@ import { BarcodeResultItem } from "@dynamsoft/dynamsoft-barcode-reader"; import { CaptureVisionRouter } from "@dynamsoft/dynamsoft-capture-vision-router"; import "./ImageCapture.css"; -export class ImageCapture extends React.Component { +class ImageCapture extends React.Component { pInit: Promise | null = null; pDestroy: Promise | null = null; @@ -301,6 +303,8 @@ export class ImageCapture extends React.Component { ); } } + +export default ImageCapture; ``` * Define the style of the element in `ImageCapture.css` @@ -326,11 +330,11 @@ import React from "react"; import "../../dbr"; // import side effects. The license, engineResourcePath, so on. import "../../cvr"; // import side effects. The license, engineResourcePath, so on. import "../../dce"; // import side effects. The license, engineResourcePath, so on. -import { VideoCapture } from "../VideoCapture/VideoCapture"; -import { ImageCapture } from "../ImageCapture/ImageCapture"; +import VideoCapture from "../VideoCapture/VideoCapture"; +import ImageCapture from "../ImageCapture/ImageCapture"; import "./HelloWorld.css"; -export class HelloWorld extends React.Component { +class HelloWorld extends React.Component { state = { bShowVideoCapture: true, bShowImageCapture: false, @@ -385,6 +389,8 @@ export class HelloWorld extends React.Component { ); } } + +export default HelloWorld; ``` * Define the style of the element in `HelloWorld.css` @@ -425,7 +431,7 @@ button { Edit the file `App.tsx` to be like this ```jsx -import { HelloWorld } from './components/HelloWorld/HelloWorld'; +import HelloWorld from './components/HelloWorld/HelloWorld'; import './App.css'; function App() { diff --git a/hello-world/react/package.json b/hello-world/react/package.json index f006d014..8956026c 100644 --- a/hello-world/react/package.json +++ b/hello-world/react/package.json @@ -5,7 +5,7 @@ "homepage": "./", "dependencies": { "@dynamsoft/dynamsoft-camera-enhancer": "^4.0.1-dev-20231023131759", - "@dynamsoft/dynamsoft-capture-vision-router": "^2.0.20-dev-20231023103654", + "@dynamsoft/dynamsoft-capture-vision-router": "^2.0.20-dev-20231026103520", "@dynamsoft/dynamsoft-utility": "^1.0.10-dev-20231023103736", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", diff --git a/hello-world/react/src/App.tsx b/hello-world/react/src/App.tsx index 4de457cf..4b4a9922 100644 --- a/hello-world/react/src/App.tsx +++ b/hello-world/react/src/App.tsx @@ -1,4 +1,4 @@ -import { HelloWorld } from './components/HelloWorld/HelloWorld'; +import HelloWorld from './components/HelloWorld/HelloWorld'; import './App.css'; function App() { diff --git a/hello-world/react/src/components/HelloWorld/HelloWorld.tsx b/hello-world/react/src/components/HelloWorld/HelloWorld.tsx index 92b66cb9..d4e11bcf 100644 --- a/hello-world/react/src/components/HelloWorld/HelloWorld.tsx +++ b/hello-world/react/src/components/HelloWorld/HelloWorld.tsx @@ -2,11 +2,11 @@ import React from "react"; import "../../dbr"; // import side effects. The license, engineResourcePath, so on. import "../../cvr"; // import side effects. The license, engineResourcePath, so on. import "../../dce"; // import side effects. The license, engineResourcePath, so on. -import { VideoCapture } from "../VideoCapture/VideoCapture"; -import { ImageCapture } from "../ImageCapture/ImageCapture"; +import VideoCapture from "../VideoCapture/VideoCapture"; +import ImageCapture from "../ImageCapture/ImageCapture"; import "./HelloWorld.css"; -export class HelloWorld extends React.Component { +class HelloWorld extends React.Component { state = { bShowVideoCapture: true, bShowImageCapture: false, @@ -61,3 +61,5 @@ export class HelloWorld extends React.Component { ); } } + +export default HelloWorld; diff --git a/hello-world/react/src/components/ImageCapture/ImageCapture.tsx b/hello-world/react/src/components/ImageCapture/ImageCapture.tsx index af7e1f5f..c3347098 100644 --- a/hello-world/react/src/components/ImageCapture/ImageCapture.tsx +++ b/hello-world/react/src/components/ImageCapture/ImageCapture.tsx @@ -3,7 +3,7 @@ import { BarcodeResultItem } from "@dynamsoft/dynamsoft-barcode-reader"; import { CaptureVisionRouter } from "@dynamsoft/dynamsoft-capture-vision-router"; import "./ImageCapture.css"; -export class ImageCapture extends React.Component { +class ImageCapture extends React.Component { pInit: Promise | null = null; pDestroy: Promise | null = null; @@ -75,3 +75,5 @@ export class ImageCapture extends React.Component { ); } } + +export default ImageCapture; diff --git a/hello-world/react/src/components/VideoCapture/VideoCapture.tsx b/hello-world/react/src/components/VideoCapture/VideoCapture.tsx index 905433ff..8506fac7 100644 --- a/hello-world/react/src/components/VideoCapture/VideoCapture.tsx +++ b/hello-world/react/src/components/VideoCapture/VideoCapture.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { EnumCapturedResultItemType } from "@dynamsoft/dynamsoft-core" +import { EnumCapturedResultItemType } from "@dynamsoft/dynamsoft-core"; import { DecodedBarcodesResult } from "@dynamsoft/dynamsoft-barcode-reader"; import { CameraEnhancer, @@ -12,7 +12,7 @@ import { import { MultiFrameResultCrossFilter } from "@dynamsoft/dynamsoft-utility"; import "./VideoCapture.css"; -export class VideoCapture extends React.Component { +class VideoCapture extends React.Component { pInit: Promise<{ cameraView: CameraView; cameraEnhancer: CameraEnhancer; @@ -48,7 +48,7 @@ export class VideoCapture extends React.Component { } }; router.addResultReceiver(resultReceiver); - + // Filter out unchecked and duplicate results. const filter = new MultiFrameResultCrossFilter(); filter.enableResultCrossVerification( @@ -98,7 +98,7 @@ export class VideoCapture extends React.Component { } async componentDidMount() { - // In 'development', React runs setup and cleanup one extra time before the actual setup in Strict Mode. + // 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(); @@ -121,3 +121,5 @@ export class VideoCapture extends React.Component { return
; } } + +export default VideoCapture; diff --git a/hello-world/react/src/cvr.ts b/hello-world/react/src/cvr.ts index 1344f36c..bdb2316d 100644 --- a/hello-world/react/src/cvr.ts +++ b/hello-world/react/src/cvr.ts @@ -4,7 +4,7 @@ import { } from '@dynamsoft/dynamsoft-capture-vision-router'; CaptureVisionRouter.engineResourcePath = - 'https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-capture-vision-router@2.0.20-dev-20231023103654/dist/'; + 'https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-capture-vision-router@2.0.20-dev-20231026103520/dist/'; /** LICENSE ALERT - README * To use the library, you need to first specify a license key using the API "initLicense" as shown below. diff --git a/hello-world/read-an-image.html b/hello-world/read-an-image.html index 5c0b10f6..de0970b0 100644 --- a/hello-world/read-an-image.html +++ b/hello-world/read-an-image.html @@ -15,7 +15,7 @@ Dynamsoft Barcode Reader Sample - Hello World (Read an Image) - + diff --git a/hello-world/requirejs.html b/hello-world/requirejs.html index a450584f..32abc455 100644 --- a/hello-world/requirejs.html +++ b/hello-world/requirejs.html @@ -43,7 +43,7 @@

Hello World for RequireJS (Decode via Camera)

"@dynamsoft/dynamsoft-document-normalizer": "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-document-normalizer@2.0.12-dev-20231019180133/dist/ddn", "@dynamsoft/dynamsoft-capture-vision-router": - "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-capture-vision-router@2.0.20-dev-20231023103654/dist/cvr", + "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-capture-vision-router@2.0.20-dev-20231026103520/dist/cvr", "dynamsoft-capture-vision-router": "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.0.11/dist/cvr", "@dynamsoft/dynamsoft-camera-enhancer": diff --git a/hello-world/vue3/README.md b/hello-world/vue3/README.md index 2c318301..560f2182 100644 --- a/hello-world/vue3/README.md +++ b/hello-world/vue3/README.md @@ -42,7 +42,7 @@ BarcodeReaderModule.engineResourcePath = "https://npm.scannerproxy.com/cdn/@dyna ```typescript // cvr.ts import { CaptureVisionRouter, LicenseManager } from '@dynamsoft/dynamsoft-capture-vision-router'; -CaptureVisionRouter.engineResourcePath = 'https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-capture-vision-router@2.0.20-dev-20231023103654/dist/'; +CaptureVisionRouter.engineResourcePath = 'https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-capture-vision-router@2.0.20-dev-20231026103520/dist/'; LicenseManager.initLicense('DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9'); // Preload "BarcodeReader" module for reading barcodes. It will save time on the initial decoding by skipping the module loading. CaptureVisionRouter.preloadModule(['DBR']).catch((ex) => { diff --git a/hello-world/vue3/package.json b/hello-world/vue3/package.json index 0d21f9de..55ff7e9b 100644 --- a/hello-world/vue3/package.json +++ b/hello-world/vue3/package.json @@ -11,7 +11,7 @@ }, "dependencies": { "@dynamsoft/dynamsoft-camera-enhancer": "^4.0.1-dev-20231023131759", - "@dynamsoft/dynamsoft-capture-vision-router": "^2.0.20-dev-20231023103654", + "@dynamsoft/dynamsoft-capture-vision-router": "^2.0.20-dev-20231026103520", "@dynamsoft/dynamsoft-utility": "^1.0.10-dev-20231023103736", "vue": "^3.3.4" }, diff --git a/hello-world/vue3/src/cvr.ts b/hello-world/vue3/src/cvr.ts index 1344f36c..bdb2316d 100644 --- a/hello-world/vue3/src/cvr.ts +++ b/hello-world/vue3/src/cvr.ts @@ -4,7 +4,7 @@ import { } from '@dynamsoft/dynamsoft-capture-vision-router'; CaptureVisionRouter.engineResourcePath = - 'https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-capture-vision-router@2.0.20-dev-20231023103654/dist/'; + 'https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-capture-vision-router@2.0.20-dev-20231026103520/dist/'; /** LICENSE ALERT - README * To use the library, you need to first specify a license key using the API "initLicense" as shown below. diff --git a/hello-world/webview/android/app/src/main/assets/decodeBarcodeInVideo.html b/hello-world/webview/android/app/src/main/assets/decodeBarcodeInVideo.html index 7cf01855..bb1607c2 100644 --- a/hello-world/webview/android/app/src/main/assets/decodeBarcodeInVideo.html +++ b/hello-world/webview/android/app/src/main/assets/decodeBarcodeInVideo.html @@ -17,7 +17,7 @@

Hello World (Decode via Camera)

- + - +