update readme; update vue sample;

Cube-J · Cube-J · commit 0ae7a1d9a98e · 2023-03-14T11:18:59.000+08:00
diff --git a/1.hello-world/13.read-video-react-hook/README.md b/1.hello-world/13.read-video-react-hook/README.md
diff --git a/1.hello-world/13.read-video-react-hook/public/index.html b/1.hello-world/13.read-video-react-hook/public/index.html
@@ -5,10 +5,9 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
+    <meta name="description" content="Read barcode with Dynamsoft Barcode Reader in a React Application.">
+    <meta name="keywords" content="read barcode from camera and images in React">
+    <link rel="canonical" href="https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/13.read-video-react-hook/build/">
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
diff --git a/1.hello-world/4.read-video-react/README.md b/1.hello-world/4.read-video-react/README.md
@@ -420,4 +420,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.
+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/1.hello-world/5.read-video-vue/.gitignore b/1.hello-world/5.read-video-vue/.gitignore
@@ -1,28 +1,27 @@
-.DS_Store
-node_modules
-/package-lock.json
-# /dist (for demoing purpose)
-
-
-# local env files
-.env.local
-.env.*.local
-
-# Log files
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
 
 # Editor directories and files
-.idea
 .vscode
+!.vscode/extensions.json
+.idea
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?
-
-# others
-
-*.lock
diff --git a/1.hello-world/5.read-video-vue/README.md b/1.hello-world/5.read-video-vue/README.md
diff --git a/1.hello-world/5.read-video-vue/babel.config.js b/1.hello-world/5.read-video-vue/babel.config.js
diff --git a/1.hello-world/5.read-video-vue/index.html b/1.hello-world/5.read-video-vue/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Read barcodes from camera with Dynamsoft Barcode Reader in a Vue Application.">
+    <meta name="keywords" content="read barcode from camera in Vue">
+    <link rel="canonical" href="https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/5.read-video-vue/dist/">
+    <title>
+        Hello World for Vue - Dynamsoft Barcode Reader Sample
+    </title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/1.hello-world/5.read-video-vue/package.json b/1.hello-world/5.read-video-vue/package.json
@@ -1,43 +1,19 @@
 {
-    "name": "hello-world",
-    "version": "0.1.0",
-    "private": true,
-    "scripts": {
-        "serve": "vue-cli-service serve",
-        "build": "vue-cli-service build",
-        "lint": "vue-cli-service lint"
-    },
-    "dependencies": {
-        "core-js": "^3.6.5",
-        "dynamsoft-javascript-barcode": "9.6.10",
-        "vue": "^2.7.8"
-    },
-    "devDependencies": {
-        "@vue/cli-plugin-babel": "~4.5.0",
-        "@vue/cli-plugin-eslint": "~4.5.0",
-        "@vue/cli-service": "~4.5.0",
-        "babel-eslint": "^10.1.0",
-        "eslint": "^6.7.2",
-        "eslint-plugin-vue": "^6.2.2",
-        "vue-template-compiler": "^2.6.11"
-    },
-    "eslintConfig": {
-        "root": true,
-        "env": {
-            "node": true
-        },
-        "extends": [
-            "plugin:vue/essential",
-            "eslint:recommended"
-        ],
-        "parserOptions": {
-            "parser": "babel-eslint"
-        },
-        "rules": {}
-    },
-    "browserslist": [
-        "> 1%",
-        "last 2 versions",
-        "not dead"
-    ]
+  "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.11",
+    "vue": "^2.7.7"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-legacy": "^2.0.0",
+    "@vitejs/plugin-vue2": "^1.1.2",
+    "terser": "^5.14.2",
+    "vite": "^3.0.2"
+  }
 }
diff --git a/1.hello-world/5.read-video-vue/public/index.html b/1.hello-world/5.read-video-vue/public/index.html
diff --git a/1.hello-world/5.read-video-vue/src/App.vue b/1.hello-world/5.read-video-vue/src/App.vue
@@ -16,14 +16,4 @@ export default {
 </script>
 
 <style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-.applogo {
-  height: 5vmin;
-}
 </style>
diff --git a/1.hello-world/5.read-video-vue/src/assets/base.css b/1.hello-world/5.read-video-vue/src/assets/base.css
@@ -0,0 +1,74 @@
+/* color palette from <https://github.com/vuejs/theme> */
+:root {
+  --vt-c-white: #ffffff;
+  --vt-c-white-soft: #f8f8f8;
+  --vt-c-white-mute: #f2f2f2;
+
+  --vt-c-black: #181818;
+  --vt-c-black-soft: #222222;
+  --vt-c-black-mute: #282828;
+
+  --vt-c-indigo: #2c3e50;
+
+  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
+  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
+  --vt-c-divider-dadarkrk-1: rgba(84, 84, 84, 0.65);
+  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
+
+  --vt-c-text-light-1: var(--vt-c-indigo);
+  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
+  --vt-c-text-dark-1: var(--vt-c-white);
+  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+}
+
+/* semantic color variables for this project */
+:root {
+  --color-background: var(--vt-c-white);
+  --color-background-soft: var(--vt-c-white-soft);
+  --color-background-mute: var(--vt-c-white-mute);
+
+  --color-border: var(--vt-c-divider-light-2);
+  --color-border-hover: var(--vt-c-divider-light-1);
+
+  --color-heading: var(--vt-c-text-light-1);
+  --color-text: var(--vt-c-text-light-1);
+
+  --section-gap: 160px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: var(--vt-c-black);
+    --color-background-soft: var(--vt-c-black-soft);
+    --color-background-mute: var(--vt-c-black-mute);
+
+    --color-border: var(--vt-c-divider-dark-2);
+    --color-border-hover: var(--vt-c-divider-dark-1);
+
+    --color-heading: var(--vt-c-text-dark-1);
+    --color-text: var(--vt-c-text-dark-2);
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  position: relative;
+  font-weight: normal;
+}
+
+body {
+  min-height: 100vh;
+  color: var(--color-text);
+  background: var(--color-background);
+  transition: color 0.5s, background-color 0.5s;
+  line-height: 1.6;
+  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+    Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  font-size: 15px;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
diff --git a/1.hello-world/5.read-video-vue/src/assets/logo.png b/1.hello-world/5.read-video-vue/src/assets/logo.png
diff --git a/1.hello-world/5.read-video-vue/src/assets/logo.svg b/1.hello-world/5.read-video-vue/src/assets/logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"  xmlns:v="https://vecta.io/nano"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
diff --git a/1.hello-world/5.read-video-vue/src/assets/main.css b/1.hello-world/5.read-video-vue/src/assets/main.css
@@ -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/1.hello-world/5.read-video-vue/src/components/HelloWorld.vue b/1.hello-world/5.read-video-vue/src/components/HelloWorld.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="helloWorld">
-    <h1>Hello World for Vue<img class="applogo" alt="Vue logo" src="../assets/logo.png" /></h1>
+    <h1>Hello World for Vue<img class="applogo" alt="Vue logo" src="../assets/logo.svg" /></h1>
     <div class="btn-group">
       <button :style="{ marginRight: '10px', backgroundColor: bShowScanner ? 'rgb(255,174,55)' : 'white' }"
         @click="showScanner">Video Decode</button>
@@ -17,7 +17,7 @@
 <script>
 import "../dbr"; // import side effects. The license, engineResourcePath, so on.
 import { BarcodeReader } from "dynamsoft-javascript-barcode";
-import VideoDecode from "./VideoDecode";
+import VideoDecode from "./VideoDecode.vue";
 import ImgDecode from './ImgDecode.vue'
 
 export default {
diff --git a/1.hello-world/5.read-video-vue/src/components/VideoDecode.vue b/1.hello-world/5.read-video-vue/src/components/VideoDecode.vue
@@ -216,4 +216,4 @@ export default {
     top: 97%;
   }
 }
-</style>
+</style>
diff --git a/1.hello-world/5.read-video-vue/src/dbr.js b/1.hello-world/5.read-video-vue/src/dbr.js
@@ -9,8 +9,8 @@ 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.10&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=9.6.11&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.10/dist/";
+BarcodeReader.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.11/dist/";
diff --git a/1.hello-world/5.read-video-vue/src/main.js b/1.hello-world/5.read-video-vue/src/main.js
@@ -1,8 +1,8 @@
 import Vue from 'vue'
 import App from './App.vue'
 
-Vue.config.productionTip = false
+import './assets/main.css'
 
 new Vue({
-  render: h => h(App),
+  render: (h) => h(App)
 }).$mount('#app')
diff --git a/1.hello-world/5.read-video-vue/vite.config.js b/1.hello-world/5.read-video-vue/vite.config.js
@@ -0,0 +1,21 @@
+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({
+  plugins: [
+    vue2(),
+    legacy({
+      targets: ['ie >= 11'],
+      additionalLegacyPolyfills: ['regenerator-runtime/runtime']
+    })
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  }
+})
diff --git a/1.hello-world/5.read-video-vue/vue.config.js b/1.hello-world/5.read-video-vue/vue.config.js

Original file line number	Diff line number	Diff line change
`@@ -420,4 +420,4 @@ See the section about [deployment](https://facebook.github.io/create-react-app/d`
`420`	`420`
`421`	`421`	`## Support`
`422`	`422`
`423`		`-If you have any questions, feel free to contact Dynamsoft support via [email](mailto:[email protected]) or [live chat](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) via the "Let's Chat" button.`
	`423`	`+If you have any questions, feel free to contact Dynamsoft support via [email](mailto:[email protected]) or [live chat](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) via the "Let's Chat" button.`