update nextjs sample to adapt to DBR JS 9.0.0

Author: Cube-J

1.hello-world/7.read-video-nextjs/components/HelloWorld.js

@@ -2,7 +2,7 @@ import React from 'react';
 import VideoDecode from './VideoDecode';
 import ImgDecode from './ImgDecode';
 import "../dbr"; // import side effects. The license, engineResourcePath, so on.
-import { BarcodeScanner } from 'dynamsoft-javascript-barcode';
+import { BarcodeScanner } from 'keillion-dynamsoft-javascript-barcode';
 
 class HelloWorld extends React.Component {
     constructor(props) {

1.hello-world/7.read-video-nextjs/components/ImgDecode.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { BarcodeReader } from 'dynamsoft-javascript-barcode'
+import { BarcodeReader } from 'keillion-dynamsoft-javascript-barcode'
 
 export default class ImgDecode extends Component {
   constructor(props) {

1.hello-world/7.read-video-nextjs/components/VideoDecode.js

@@ -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.20220318174621.0/dist/";

1.hello-world/7.read-video-nextjs/dbr.js

@@ -10,6 +10,7 @@
     },
     "dependencies": {
         "dynamsoft-javascript-barcode": "8.8.7",
+        "keillion-dynamsoft-javascript-barcode": "0.20220318174621.0",
         "next": "11.1.2",
         "react": "17.0.2",
         "react-dom": "17.0.2"
@@ -18,4 +19,4 @@
         "eslint": "7.32.0",
         "eslint-config-next": "11.1.2"
     }
-}
+}

1.hello-world/7.read-video-nextjs/package.json

@@ -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%;}}

1.hello-world/7.read-video-nextjs/styles/BarcodeScanner.css

@@ -124,6 +124,6 @@
   margin: 2vmin auto;
   text-align: center;
   font-size: medium;
-  height: 40vh;
+  /* height: 40vh; */
   width: 80vw;
 }