update samples to adapt to DBR JS 9.0.0;

Cube-J · Cube-J · commit e76740bfcd05 · 2022-03-18T17:48:56.000+08:00
diff --git a/1.hello-world/1.minimum-code.html b/1.hello-world/1.minimum-code.html
@@ -12,7 +12,8 @@
 <body>
     <h1 style="font-size: 1.5em;">Read Barcodes from a Camera</h1>
     <button id="btn-show-scanner">Show Barcode Scanner</button>
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.8.7/dist/dbr.js"></script>
+    <!-- <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.8.7/dist/dbr.js"></script> -->
+    <script src="https://cdn.jsdelivr.net/npm/keillion-dynamsoft-javascript-barcode@0.20220317102136.0/dist/dbr.js"></script>
     <script>
         /** LICENSE ALERT - README
          *
@@ -43,11 +44,11 @@ <h1 style="font-size: 1.5em;">Read Barcodes from a Camera</h1>
                     }
                 };
                 /*
-                 * onUnduplicatdRead is triggered only when a 'new' barcode is found.
+                 * 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.onUnduplicatedRead = (txt, result) => {
+                scanner.onUniqueRead = (txt, result) => {
                     alert(txt);
                     console.log("Unique Code Found: ", result);
                 }
diff --git a/1.hello-world/2.read-an-image.html b/1.hello-world/2.read-an-image.html
@@ -24,7 +24,8 @@ <h1 style="font-size: 1.5em;">Read Barcode from Images</h1>
         .sp-resultText { color: #cE5E04 }
         #div-cvs-container canvas { border: solid 1px gray; }
     </style>
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.8.7/dist/dbr.js"></script>
+    <!-- <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.8.7/dist/dbr.js"></script> -->
+    <script src="https://cdn.jsdelivr.net/npm/keillion-dynamsoft-javascript-barcode@0.20220317102136.0/dist/dbr.js"></script>
     <script>
         /** LICENSE ALERT - README
          *
diff --git a/1.hello-world/3.read-video-angular/package.json b/1.hello-world/3.read-video-angular/package.json
@@ -20,6 +20,7 @@
         "@angular/platform-browser-dynamic": "~11.2.5",
         "@angular/router": "~11.2.5",
         "dynamsoft-javascript-barcode": "8.8.7",
+        "keillion-dynamsoft-javascript-barcode": "0.20220318155126.0",
         "rxjs": "~6.6.0",
         "tslib": "^2.0.0",
         "zone.js": "~0.11.3"
@@ -43,4 +44,4 @@
         "tslint": "~6.1.0",
         "typescript": "~4.1.5"
     }
-}
+}
diff --git a/1.hello-world/3.read-video-angular/src/app/barcode-scanner/barcode-scanner.component.css b/1.hello-world/3.read-video-angular/src/app/barcode-scanner/barcode-scanner.component.css
@@ -1,13 +1,13 @@
 .component-barcode-scanner{width:100%;height:100%;min-width:640px;min-height:480px;background:#eee;position:relative;resize:both;}
-.dbrScanner-bg-loading{animation:1s linear infinite dbrScanner-rotate;width:40%;height:40%;position:absolute;margin:auto;left:0;top:0;right:0;bottom:0;fill:#aaa;}
-.dbrScanner-bg-camera{width:40%;height:40%;position:absolute;margin:auto;left:0;top:0;right:0;bottom:0;fill:#aaa;}
-.dbrScanner-video{width:100%;height:100%;position:absolute;left:0;top:0;}
-.dbrScanner-cvs-drawarea{width:100%;height:100%;position:absolute;left:0;top:0;}
-.dbrScanner-cvs-scanarea{width:100%;height:100%;position:absolute;left:0;top:0;}
-.dbrScanner-scanlight{width:100%;height:3%;position:absolute;animation:3s infinite dbrScanner-scanlight;border-radius:50%;box-shadow:0px 0px 2vw 1px #00e5ff;background:#fff;}
-.dbrScanner-sel-camera{margin:0 auto;position:absolute;left:0;top:0;}
-.dbrScanner-sel-resolution{position:absolute;left:0;top:20px;}
-.dbrScanner-msg-poweredby{position:absolute;left:50%;bottom:10%;transform:translateX(-50%);}
-.dbrScanner-msg-poweredby svg {height:max(3vmin,17px);fill:#FFFFFF;}
-@keyframes dbrScanner-rotate{from{transform:rotate(0turn);}to{transform:rotate(1turn);}}
-@keyframes dbrScanner-scanlight{from{top:0;}to{top:97%;}}
+.dce-bg-loading{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{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{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%;}}
diff --git a/1.hello-world/3.read-video-angular/src/app/barcode-scanner/barcode-scanner.component.html b/1.hello-world/3.read-video-angular/src/app/barcode-scanner/barcode-scanner.component.html
diff --git a/1.hello-world/3.read-video-angular/src/app/barcode-scanner/barcode-scanner.component.ts b/1.hello-world/3.read-video-angular/src/app/barcode-scanner/barcode-scanner.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { BarcodeScanner } from 'dynamsoft-javascript-barcode'
+import { BarcodeScanner } from 'keillion-dynamsoft-javascript-barcode'
 @Component({
   selector: 'app-video-decode',
   templateUrl: './barcode-scanner.component.html',
@@ -17,7 +17,7 @@ export class VideoDecodeComponent implements OnInit {
           console.log(result.barcodeText);
         }
       };
-      scanner.onUnduplicatedRead = (txt, result) => {
+      scanner.onUniqueRead = (txt, result) => {
         alert(txt);
       };
       await scanner.open();
diff --git a/1.hello-world/3.read-video-angular/src/app/dbr.ts b/1.hello-world/3.read-video-angular/src/app/dbr.ts
@@ -1,4 +1,4 @@
-import { BarcodeReader } from 'dynamsoft-javascript-barcode';
+import { BarcodeReader } from 'keillion-dynamsoft-javascript-barcode';
 
 /** LICENSE ALERT - README
  * 
@@ -14,4 +14,4 @@ import { BarcodeReader } from 'dynamsoft-javascript-barcode';
 
 /** LICENSE ALERT - THE END */
 
-BarcodeReader.engineResourcePath = 'https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.8.7/dist/';
+BarcodeReader.engineResourcePath = 'https://cdn.jsdelivr.net/npm/keillion-dynamsoft-javascript-barcode@0.20220318155126.0/dist/';
diff --git a/1.hello-world/3.read-video-angular/src/app/hello-world/hello-world.component.css b/1.hello-world/3.read-video-angular/src/app/hello-world/hello-world.component.css
@@ -30,7 +30,7 @@
       margin: 2vmin auto;
       text-align: center;
       font-size: medium;
-      height: 40vh;
+      /* height: 40vh; */
       width: 80vw;
     }
 
diff --git a/1.hello-world/3.read-video-angular/src/app/hello-world/hello-world.component.ts b/1.hello-world/3.read-video-angular/src/app/hello-world/hello-world.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import '../dbr'; // import side effects. The license, engineResourcePath, so on.
-import { BarcodeScanner } from 'dynamsoft-javascript-barcode';
+import { BarcodeScanner } from 'keillion-dynamsoft-javascript-barcode';
 
 @Component({
   selector: 'app-hello-world',
diff --git a/1.hello-world/4.read-video-react/package.json b/1.hello-world/4.read-video-react/package.json
@@ -8,6 +8,7 @@
         "@testing-library/react": "^11.1.0",
         "@testing-library/user-event": "^12.1.10",
         "dynamsoft-javascript-barcode": "8.8.7",
+        "keillion-dynamsoft-javascript-barcode": "0.20220318155126.0",
         "react": "^17.0.1",
         "react-dom": "^17.0.1",
         "react-scripts": "4.0.3",
@@ -37,4 +38,4 @@
             "last 1 safari version"
         ]
     }
-}
+}
diff --git a/1.hello-world/4.read-video-react/src/components/HelloWorld/HelloWorld.css b/1.hello-world/4.read-video-react/src/components/HelloWorld/HelloWorld.css
@@ -76,6 +76,6 @@ span {
     margin: 2vmin auto;
     text-align: center;
     font-size: medium;
-    height: 40vh;
+    /* height: 40vh; */
     width: 80vw;
 }
diff --git a/1.hello-world/4.read-video-react/src/components/HelloWorld/HelloWorld.js b/1.hello-world/4.read-video-react/src/components/HelloWorld/HelloWorld.js
@@ -1,7 +1,7 @@
 import './HelloWorld.css';
 import reactLogo from '../../logo.svg';
 import "../../dbr"; // import side effects. The license, engineResourcePath, so on.
-import { BarcodeReader } from "dynamsoft-javascript-barcode";
+import { BarcodeReader } from "keillion-dynamsoft-javascript-barcode";
 import React from 'react';
 import VideoDecode from '../VideoDecode/VideoDecode';
 import ImgDecode from '../ImgDecode/ImgDecode';
diff --git a/1.hello-world/4.read-video-react/src/components/ImgDecode/ImgDecode.js b/1.hello-world/4.read-video-react/src/components/ImgDecode/ImgDecode.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { BarcodeReader } from "dynamsoft-javascript-barcode";
+import { BarcodeReader } from "keillion-dynamsoft-javascript-barcode";
 import './ImgDecode.css'
 
 export default class ImgDecode extends Component {
diff --git a/1.hello-world/4.read-video-react/src/components/VideoDecode/VideoDecode.css b/1.hello-world/4.read-video-react/src/components/VideoDecode/VideoDecode.css
@@ -1,13 +1,13 @@
 .component-barcode-scanner{width:100%;height:100%;min-width:640px;min-height:480px;background:#eee;position:relative;resize:both;}
-.dbrScanner-bg-loading{animation:1s linear infinite dbrScanner-rotate;width:40%;height:40%;position:absolute;margin:auto;left:0;top:0;right:0;bottom:0;fill:#aaa;}
-.dbrScanner-bg-camera{width:40%;height:40%;position:absolute;margin:auto;left:0;top:0;right:0;bottom:0;fill:#aaa;}
-.dbrScanner-video{width:100%;height:100%;position:absolute;left:0;top:0;}
-.dbrScanner-cvs-drawarea{width:100%;height:100%;position:absolute;left:0;top:0;}
-.dbrScanner-cvs-scanarea{width:100%;height:100%;position:absolute;left:0;top:0;}
-.dbrScanner-scanlight{width:100%;height:3%;position:absolute;animation:3s infinite dbrScanner-scanlight;border-radius:50%;box-shadow:0px 0px 2vw 1px #00e5ff;background:#fff;}
-.dbrScanner-sel-camera{margin:0 auto;position:absolute;left:0;top:0;}
-.dbrScanner-sel-resolution{position:absolute;left:0;top:20px;}
-.dbrScanner-msg-poweredby{position:absolute;left:50%;bottom:10%;transform:translateX(-50%);}
-.dbrScanner-msg-poweredby svg {height:max(3vmin,17px);fill:#FFFFFF;}
-@keyframes dbrScanner-rotate{from{transform:rotate(0turn);}to{transform:rotate(1turn);}}
-@keyframes dbrScanner-scanlight{from{top:0;}to{top:97%;}}
+.dce-bg-loading{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{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{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%;}}
diff --git a/1.hello-world/4.read-video-react/src/components/VideoDecode/VideoDecode.js b/1.hello-world/4.read-video-react/src/components/VideoDecode/VideoDecode.js
diff --git a/1.hello-world/4.read-video-react/src/dbr.js b/1.hello-world/4.read-video-react/src/dbr.js

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { BarcodeReader } from 'dynamsoft-javascript-barcode';`
	`1`	`+import { BarcodeReader } from 'keillion-dynamsoft-javascript-barcode';`
`2`	`2`
`3`	`3`	`/** LICENSE ALERT - README`
`4`	`4`	`*`
`@@ -14,4 +14,4 @@ import { BarcodeReader } from 'dynamsoft-javascript-barcode';`
`14`	`14`
`15`	`15`	`/** LICENSE ALERT - THE END */`
`16`	`16`
`17`		`-BarcodeReader.engineResourcePath = 'https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.8.7/dist/';`
	`17`	`+BarcodeReader.engineResourcePath = 'https://cdn.jsdelivr.net/npm/keillion-dynamsoft-javascript-barcode@0.20220318155126.0/dist/';`
Original file line number	Diff line number	Diff line change
`@@ -30,7 +30,7 @@`
`30`	`30`	`margin: 2vmin auto;`
`31`	`31`	`text-align: center;`
`32`	`32`	`font-size: medium;`
`33`		`- height: 40vh;`
	`33`	`+ /* height: 40vh; */`
`34`	`34`	`width: 80vw;`
`35`	`35`	`}`
`36`	`36`
Original file line number	Diff line number	Diff line change
`@@ -8,6 +8,7 @@`
`8`	`8`	`"@testing-library/react": "^11.1.0",`
`9`	`9`	`"@testing-library/user-event": "^12.1.10",`
`10`	`10`	`"dynamsoft-javascript-barcode": "8.8.7",`
	`11`	`+ "keillion-dynamsoft-javascript-barcode": "0.20220318155126.0",`
`11`	`12`	`"react": "^17.0.1",`
`12`	`13`	`"react-dom": "^17.0.1",`
`13`	`14`	`"react-scripts": "4.0.3",`
`@@ -37,4 +38,4 @@`
`37`	`38`	`"last 1 safari version"`
`38`	`39`	`]`
`39`	`40`	`}`
`40`		`-}`
	`41`	`+}`