change dbrjs import mode

Shen-wb · Shen-wb · commit ae9855c9fd47 · 2022-03-02T14:53:48.000+08:00
diff --git a/1.hello-world/1.minimum-code.html b/1.hello-world/1.minimum-code.html
@@ -7,12 +7,12 @@
     <meta name="description" content="Quickly read barcodes with Dynamsoft Barcode Reader from a live camera stream.">
     <meta name="keywords" content="camera based barcode reading">
     <title>Dynamsoft Barcode Reader Sample - Hello World (Decoding via Camera)</title>
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.8.7/dist/dbr.js"></script>
 </head>
 
 <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>
         /** LICENSE ALERT - README
          *
diff --git a/1.hello-world/2.read-an-image.html b/1.hello-world/2.read-an-image.html
@@ -7,7 +7,6 @@
     <meta name="description" content="Read barcodes from images in no time with Dynamsoft Barcode Reader. With this online demo, you can choose a file to scan the barcodes on them.">
     <meta name="keywords" content="read barcode from still images">
     <title>Dynamsoft Barcode Reader Sample - Read an Image</title>
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.8.7/dist/dbr.js"></script>
 </head>
 
 <body>
@@ -25,6 +24,7 @@ <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>
         /** LICENSE ALERT - README
          *
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 DBR from '../dbr';
+import { BarcodeScanner } from 'dynamsoft-javascript-barcode'
 @Component({
   selector: 'app-video-decode',
   templateUrl: './barcode-scanner.component.html',
@@ -10,7 +10,7 @@ export class VideoDecodeComponent implements OnInit {
 
   async ngOnInit(): Promise<void> {
     try {
-      const scanner = await (this.pScanner = DBR.BarcodeScanner.createInstance());
+      const scanner = await (this.pScanner = BarcodeScanner.createInstance());
       scanner.setUIElement((document.querySelector('.component-barcode-scanner') as any));
       scanner.onFrameRead = (results: any) => {
         for (const result of results) {
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 DBR from "dynamsoft-javascript-barcode";
+import { BarcodeReader } from 'dynamsoft-javascript-barcode';
 
 /** LICENSE ALERT - README
  * 
@@ -14,6 +14,4 @@ import DBR from "dynamsoft-javascript-barcode";
 
 /** LICENSE ALERT - THE END */
 
-DBR.BarcodeReader.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.8.7/dist/";
-
-export default DBR;
+BarcodeReader.engineResourcePath = 'https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.8.7/dist/';
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,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-import DBR from '../dbr';
+import '../dbr'; // import side effects. The license, engineResourcePath, so on.
+import { BarcodeScanner } from 'dynamsoft-javascript-barcode';
 
 @Component({
   selector: 'app-hello-world',
@@ -12,7 +13,7 @@ export class HelloWorldComponent implements OnInit {
   async ngOnInit(): Promise<void> {
     // Load the library on page load to speed things up.
     try {
-      await DBR.BarcodeScanner.loadWasm();
+      await BarcodeScanner.loadWasm();
     } catch (ex) {
       alert(ex.message);
     }
diff --git a/1.hello-world/3.read-video-angular/src/app/img-decode/img-decode.component.ts b/1.hello-world/3.read-video-angular/src/app/img-decode/img-decode.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import DBR from '../dbr';
+import {BarcodeReader} from 'dynamsoft-javascript-barcode'
 
 @Component({
   selector: 'app-img-decode',
@@ -13,7 +13,7 @@ export class ImgDecodeComponent implements OnInit {
 
   decodeImg = async (e: any) => {
     try {
-      const reader = await (this.pReader = DBR.BarcodeReader.createInstance());
+      const reader = await (this.pReader = BarcodeReader.createInstance());
       const results = await reader.decode(e.target.files[0]);
       for (const result of results) {
         alert(result.barcodeText);
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
@@ -13,7 +13,8 @@
 </template>
 
 <script>
-import DBR from "../dbr";
+import "../dbr"; // import side effects. The license, engineResourcePath, so on.
+import { BarcodeReader } from "dynamsoft-javascript-barcode";
 import VideoDecode from "./VideoDecode";
 import ImgDecode from './ImgDecode.vue'
 
@@ -28,7 +29,7 @@ export default {
   async mounted() {
     //Load the library on page load to speed things up.
     try {
-      await DBR.BarcodeScanner.loadWasm();
+      await BarcodeReader.loadWasm();
     } catch (ex) {
       alert(ex.message);
       throw ex;
diff --git a/1.hello-world/5.read-video-vue/src/components/ImgDecode.vue b/1.hello-world/5.read-video-vue/src/components/ImgDecode.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import DBR from "../dbr";
+import { BarcodeReader } from 'dynamsoft-javascript-barcode'
 export default {
   name: 'ImgDecode',
   data() {
@@ -14,7 +14,7 @@ export default {
   methods: {
     async decodeImg(e) {
       try {
-        const reader = await (this.pReader = DBR.BarcodeReader.createInstance());
+        const reader = await (this.pReader = BarcodeReader.createInstance());
         let results = await reader.decode(e.target.files[0]);
         for(let result of results){
           alert(result.barcodeText);
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
@@ -26,7 +26,7 @@
 </template>
 
 <script>
-import DBR from "../dbr";
+import { BarcodeScanner } from 'dynamsoft-javascript-barcode'
 
 export default {
   data() {
@@ -36,7 +36,7 @@ export default {
   },
   async mounted() {
     try {
-      const scanner = await (this.pScanner = DBR.BarcodeScanner.createInstance());
+      const scanner = await (this.pScanner = BarcodeScanner.createInstance());
       await scanner.setUIElement(this.$el);
       scanner.onFrameRead = (results) => {
         for (let result of results) {
diff --git a/1.hello-world/5.read-video-vue/src/dbr.js b/1.hello-world/5.read-video-vue/src/dbr.js
@@ -1,4 +1,4 @@
-import DBR from "dynamsoft-javascript-barcode";
+import { BarcodeReader } from "dynamsoft-javascript-barcode";
 
 /** LICENSE ALERT - README
  * 
@@ -14,6 +14,4 @@ import DBR from "dynamsoft-javascript-barcode";
 
 /** LICENSE ALERT - THE END */
 
-DBR.BarcodeReader.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.8.7/dist/";
-
-export default DBR;
+BarcodeReader.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.8.7/dist/";
diff --git a/1.hello-world/6.read-video-vue3/src/components/HelloWorld.vue b/1.hello-world/6.read-video-vue3/src/components/HelloWorld.vue
@@ -13,7 +13,8 @@
 </template>
 
 <script>
-import DBR from "../dbr";
+import "../dbr"; // import side effects. The license, engineResourcePath, so on.
+import { BarcodeScanner } from 'dynamsoft-javascript-barcode'
 import VideoDecode from "./VideoDecode";
 import ImgDecode from './ImgDecode'
 import { ref, onMounted } from "vue";
@@ -26,7 +27,7 @@ export default {
     onMounted(async () => {
       try {
         //Load the library on page load to speed things up.
-        await DBR.BarcodeScanner.loadWasm();
+        await BarcodeScanner.loadWasm();
       } catch (ex) {
         console.error(ex);
       }
diff --git a/1.hello-world/6.read-video-vue3/src/components/ImgDecode.vue b/1.hello-world/6.read-video-vue3/src/components/ImgDecode.vue
@@ -4,15 +4,15 @@
 
 <script>
 import { onBeforeUnmount, ref } from "vue";
-import DBR from "../dbr";
+import { BarcodeReader } from 'dynamsoft-javascript-barcode'
 
 export default {
   setup() {
     const pReader = ref(null);
 
     const decodeImg = async (e) => {
       try {
-        const reader = await (pReader.value = DBR.BarcodeReader.createInstance());
+        const reader = await (pReader.value = BarcodeReader.createInstance());
         let results = await reader.decode(e.target.files[0]);
         for(let result of results){
           alert(result.barcodeText);
diff --git a/1.hello-world/6.read-video-vue3/src/components/VideoDecode.vue b/1.hello-world/6.read-video-vue3/src/components/VideoDecode.vue
@@ -1,7 +1,6 @@
 <template>
-  <div class="component-barcode-scanner">
+  <div ref="elRefs" class="component-barcode-scanner">
     <svg class="dbrScanner-bg-loading" viewBox="0 0 1792 1792"><path d="M1760 896q0 176-68.5 336t-184 275.5-275.5 184-336 68.5-336-68.5-275.5-184-184-275.5-68.5-336q0-213 97-398.5t265-305.5 374-151v228q-221 45-366.5 221t-145.5 406q0 130 51 248.5t136.5 204 204 136.5 248.5 51 248.5-51 204-136.5 136.5-204 51-248.5q0-230-145.5-406t-366.5-221v-228q206 31 374 151t265 305.5 97 398.5z"></path></svg>
-    <svg class="dbrScanner-bg-camera" style='display:"none"' viewBox="0 0 2048 1792"><path d="M1024 672q119 0 203.5 84.5t84.5 203.5-84.5 203.5-203.5 84.5-203.5-84.5-84.5-203.5 84.5-203.5 203.5-84.5zm704-416q106 0 181 75t75 181v896q0 106-75 181t-181 75h-1408q-106 0-181-75t-75-181v-896q0-106 75-181t181-75h224l51-136q19-49 69.5-84.5t103.5-35.5h512q53 0 103.5 35.5t69.5 84.5l51 136h224zm-704 1152q185 0 316.5-131.5t131.5-316.5-131.5-316.5-316.5-131.5-316.5 131.5-131.5 316.5 131.5 316.5 316.5 131.5z"></path></svg>
     <video class="dbrScanner-video" playsInline={true}></video>
     <canvas class="dbrScanner-cvs-drawarea"></canvas>
     <div class="dbrScanner-cvs-scanarea">
@@ -16,16 +15,18 @@
 </template>
 
 <script>
-import { onBeforeUnmount, onMounted, ref } from "vue";
-import DBR from "../dbr";
+import { onBeforeUnmount, onMounted, ref, getCurrentInstance } from "vue";
+import { BarcodeScanner } from 'dynamsoft-javascript-barcode'
 
 export default {
   setup() {
     const pScanner = ref(null);
+    const elRefs = ref(null);
     onMounted(async () => {
       try {
-        const scanner = await (pScanner.value = DBR.BarcodeScanner.createInstance());
-        scanner.setUIElement(document.querySelector('.component-barcode-scanner'));
+        const internalInstance = getCurrentInstance();
+        const scanner = await (pScanner.value = BarcodeScanner.createInstance());
+        scanner.setUIElement(internalInstance.ctx.elRefs);
         scanner.onFrameRead = (results) => {
           for (let result of results) {
             console.log(result.barcodeText);
@@ -45,6 +46,9 @@ export default {
         console.log('BarcodeScanner Component Unmount');
       }
     });
+    return {
+      elRefs
+    }
   },
 };
 </script>
@@ -53,7 +57,6 @@ export default {
 <style scoped>
 .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;}
diff --git a/1.hello-world/6.read-video-vue3/src/dbr.js b/1.hello-world/6.read-video-vue3/src/dbr.js
@@ -1,4 +1,4 @@
-import DBR from "dynamsoft-javascript-barcode";
+import { BarcodeReader } from "dynamsoft-javascript-barcode";
 
 /** LICENSE ALERT - README
  * 
@@ -14,6 +14,4 @@ import DBR from "dynamsoft-javascript-barcode";
 
 /** LICENSE ALERT - THE END */
 
-DBR.BarcodeReader.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.8.7/dist/";
-
-export default DBR;
+BarcodeReader.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.8.7/dist/";
diff --git a/1.hello-world/7.read-video-nextjs/components/HelloWorld.js b/1.hello-world/7.read-video-nextjs/components/HelloWorld.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import VideoDecode from './VideoDecode';
 import ImgDecode from './ImgDecode';
-import DBR from "../dbr";
+import "../dbr"; // import side effects. The license, engineResourcePath, so on.
+import { BarcodeScanner } from 'dynamsoft-javascript-barcode';
 
 class HelloWorld extends React.Component {
     constructor(props) {
@@ -15,7 +16,7 @@ class HelloWorld extends React.Component {
     async componentDidMount() {
         try {
             //Load the library on page load to speed things up.
-            await DBR.BarcodeScanner.loadWasm();
+            await BarcodeScanner.loadWasm();
         } catch (ex) {
             alert(ex.message);
             throw ex;
diff --git a/1.hello-world/7.read-video-nextjs/components/ImgDecode.js b/1.hello-world/7.read-video-nextjs/components/ImgDecode.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import DBR from "../dbr";
+import { BarcodeReader } from 'dynamsoft-javascript-barcode'
 
 export default class ImgDecode extends Component {
   constructor(props) {
@@ -9,7 +9,7 @@ export default class ImgDecode extends Component {
 
   decodeImg = async (e) => {
     try {
-      const reader = await (this.pReader = DBR.BarcodeReader.createInstance());
+      const reader = await (this.pReader = BarcodeReader.createInstance());
       let results = await reader.decode(e.target.files[0]);
       for(let result of results){
         alert(result.barcodeText);     
diff --git a/1.hello-world/7.read-video-nextjs/components/VideoDecode.js b/1.hello-world/7.read-video-nextjs/components/VideoDecode.js
diff --git a/1.hello-world/7.read-video-nextjs/dbr.js b/1.hello-world/7.read-video-nextjs/dbr.js
@@ -1,4 +1,4 @@
-import DBR from "dynamsoft-javascript-barcode";
+import { BarcodeReader } from "dynamsoft-javascript-barcode";
 
 /** LICENSE ALERT - README
  * 
@@ -14,6 +14,4 @@ import DBR from "dynamsoft-javascript-barcode";
 
 /** LICENSE ALERT - THE END */
 
-DBR.BarcodeReader.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.8.7/dist/";
-
-export default DBR;
+BarcodeReader.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.8.7/dist/";
diff --git a/1.hello-world/8.read-video-nuxtjs/components/HelloWorld.vue b/1.hello-world/8.read-video-nuxtjs/components/HelloWorld.vue
@@ -12,7 +12,8 @@
 </template>
 
 <script>
-import DBR from "../dbr";
+import "../dbr"; // import side effects. The license, engineResourcePath, so on.
+import { BarcodeScanner } from 'dynamsoft-javascript-barcode'
 import VideoDecode from "./VideoDecode";
 import ImgDecode from "./ImgDecode";
 
@@ -30,7 +31,7 @@ export default {
   async mounted() {
     try {
       //Load the library on page load to speed things up.
-      await DBR.BarcodeScanner.loadWasm();
+      await BarcodeScanner.loadWasm();
     } catch (ex) {
       alert(ex.message);
       throw ex;
diff --git a/1.hello-world/8.read-video-nuxtjs/components/ImgDecode.vue b/1.hello-world/8.read-video-nuxtjs/components/ImgDecode.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import DBR from "../dbr";
+import { BarcodeReader } from 'dynamsoft-javascript-barcode'
 export default {
   name: 'ImgDecode',
   data() {
@@ -15,7 +15,7 @@ export default {
   methods: {
     async decodeImg(e) {
       try {
-        const reader = await (this.pReader = DBR.BarcodeReader.createInstance());
+        const reader = await (this.pReader = BarcodeReader.createInstance());
         let results = await reader.decode(e.target.files[0]);
         for(let result of results){
           alert(result.barcodeText);
diff --git a/1.hello-world/8.read-video-nuxtjs/components/VideoDecode.vue b/1.hello-world/8.read-video-nuxtjs/components/VideoDecode.vue
@@ -26,7 +26,7 @@
 </template>
 
 <script>
-import DBR from "../dbr";
+import { BarcodeScanner } from 'dynamsoft-javascript-barcode'
 
 export default {
   data() {
@@ -36,7 +36,7 @@ export default {
   },
   async mounted() {
     try {
-      const scanner = await (this.pScanner = DBR.BarcodeScanner.createInstance());
+      const scanner = await (this.pScanner = BarcodeScanner.createInstance());
       await scanner.setUIElement(this.$el);
       scanner.onFrameRead = (results) => {
         for (let result of results) {
diff --git a/1.hello-world/8.read-video-nuxtjs/dbr.js b/1.hello-world/8.read-video-nuxtjs/dbr.js
