11<!DOCTYPE html>
22< html lang ="en ">
3- < head >
4- < meta charset ="utf-8 " />
5- < meta name ="viewport " content ="width=device-width,initial-scale=1.0 " />
6- < meta
7- name ="description "
8- content ="Quickly read barcodes with Dynamsoft Barcode Reader from a live camera stream. "
9- />
10- < meta name ="keywords " content ="barcode, camera, es6 " />
11- < link
12- rel ="canonical "
13- href ="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/es6.html "
14- />
15- < title >
16- Dynamsoft Barcode Reader Sample - Hello World for ES6 (Decode via Camera)
17- </ title >
18- </ head >
193
20- < body >
21- < h1 > Hello World for ES6 (Decode via Camera)</ h1 >
22- < div id ="div-ui-container " style ="width: 100%; height: 80vh "> </ div >
23- Results:
24- < br >
25- < div id ="div-results-container " style ="width: 100%; height: 10vh; overflow: auto; "> </ div >
26- < script >
27- if ( location . protocol === "file:" ) {
28- const message = `The page is opened via file:// and our SDKs may not work properly. Please open the page via https:// or host it on "http://localhost/".` ;
29- console . warn ( message ) ;
30- alert ( message ) ;
31- }
32- </ script >
33- < script type ="importmap ">
4+ < head >
5+ < meta charset ="utf-8 " />
6+ < meta name ="viewport " content ="width=device-width,initial-scale=1.0 " />
7+ < meta name ="description " content ="Quickly read barcodes with Dynamsoft Barcode Reader from a live camera stream. " />
8+ < meta name ="keywords " content ="barcode, camera, es6 " />
9+ < link rel ="canonical " href ="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/es6.html " />
10+ < title >
11+ Dynamsoft Barcode Reader Sample - Hello World for ES6 (Decode via Camera)
12+ </ title >
13+ </ head >
14+
15+ < body >
16+ < h1 > Hello World for ES6 (Decode via Camera)</ h1 >
17+ < div id ="div-ui-container " style ="width: 100%; height: 80vh "> </ div >
18+ Results:
19+ < br >
20+ < div id ="div-results-container " style ="width: 100%; height: 10vh; overflow: auto; "> </ div >
21+ < script >
22+ if ( location . protocol === "file:" ) {
23+ const message = `The page is opened via file:// and our SDKs may not work properly. Please open the page via https:// or host it on "http://localhost/".` ;
24+ console . warn ( message ) ;
25+ alert ( message ) ;
26+ }
27+ </ script >
28+ < script type ="importmap ">
3429 {
3530 "imports" : {
3631 "dynamsoft-core" : "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.2.10/dist/core.mjs" ,
@@ -42,103 +37,95 @@ <h1>Hello World for ES6 (Decode via Camera)</h1>
4237 }
4338 }
4439 </ script >
45- < script type ="module ">
46- import { CoreModule , EnumCapturedResultItemType } from "dynamsoft-core" ;
47- import { LicenseManager } from "dynamsoft-license" ;
48- import { MultiFrameResultCrossFilter } from "dynamsoft-utility" ;
49- import { BarcodeReaderModule } from "dynamsoft-barcode-reader" ;
50- import {
51- CaptureVisionRouter ,
52- CapturedResultReceiver ,
53- } from "dynamsoft-capture-vision-router" ;
54- import {
55- CameraView ,
56- CameraEnhancer ,
57- } from "dynamsoft-camera-enhancer" ;
40+ < script type ="module ">
41+ import { CoreModule , EnumCapturedResultItemType } from "dynamsoft-core" ;
42+ import { LicenseManager } from "dynamsoft-license" ;
43+ import { MultiFrameResultCrossFilter } from "dynamsoft-utility" ;
44+ import { BarcodeReaderModule } from "dynamsoft-barcode-reader" ;
45+ import {
46+ CaptureVisionRouter ,
47+ CapturedResultReceiver ,
48+ } from "dynamsoft-capture-vision-router" ;
49+ import {
50+ CameraView ,
51+ CameraEnhancer ,
52+ } from "dynamsoft-camera-enhancer" ;
5853
59- /** LICENSE ALERT - README
60- * To use the library, you need to first specify a license key using the API "initLicense()" as shown below.
61- */
54+ /** LICENSE ALERT - README
55+ * To use the library, you need to first specify a license key using the API "initLicense()" as shown below.
56+ */
6257
63- LicenseManager . initLicense (
64- "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9"
65- ) ;
58+ LicenseManager . initLicense (
59+ "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9"
60+ ) ;
6661
67- /**
68- * 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.
69- * 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.
70- * For more information, see https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=10.2.10&utm_source=github#specify-the-license or contact support@dynamsoft.com.
71- * LICENSE ALERT - THE END
72- */
62+ /**
63+ * 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.
64+ * 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.
65+ * For more information, see https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=10.2.10&utm_source=github#specify-the-license or contact support@dynamsoft.com.
66+ * LICENSE ALERT - THE END
67+ */
7368
74- CoreModule . engineResourcePaths = {
75- std : "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.2.0/dist/" ,
76- dip : "https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.2.10/dist/" ,
77- core : "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.2.10/dist/" ,
78- license : "https://cdn.jsdelivr.net/npm/dynamsoft-license@3.2.10/dist/" ,
79- cvr : "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.2.10/dist/" ,
80- dbr : "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.2.10/dist/" ,
81- dce : "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.2/dist/"
82- } ;
83- ( async function ( ) {
84- try {
85- // Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control.
86- const cameraView = await CameraView . createInstance ( ) ;
87- const cameraEnhancer = await CameraEnhancer . createInstance (
88- cameraView
89- ) ;
90- document
91- . querySelector ( "#div-ui-container" )
92- . append ( cameraView . getUIElement ( ) ) ; // Get default UI and append it to DOM.
69+ CoreModule . engineResourcePaths = {
70+ std : "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.2.0/dist/" ,
71+ dip : "https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.2.10/dist/" ,
72+ core : "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.2.10/dist/" ,
73+ license : "https://cdn.jsdelivr.net/npm/dynamsoft-license@3.2.10/dist/" ,
74+ cvr : "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.2.10/dist/" ,
75+ dbr : "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.2.10/dist/" ,
76+ dce : "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.2/dist/"
77+ } ;
78+ ( async function ( ) {
79+ try {
80+ // Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control.
81+ const cameraView = await CameraView . createInstance ( ) ;
82+ const cameraEnhancer = await CameraEnhancer . createInstance (
83+ cameraView
84+ ) ;
85+ document
86+ . querySelector ( "#div-ui-container" )
87+ . append ( cameraView . getUIElement ( ) ) ; // Get default UI and append it to DOM.
9388
94- // Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source.
95- const router = await CaptureVisionRouter . createInstance ( ) ;
96- router . setInput ( cameraEnhancer ) ;
89+ // Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source.
90+ const router = await CaptureVisionRouter . createInstance ( ) ;
91+ router . setInput ( cameraEnhancer ) ;
9792
98- // Define a callback for results.
99- const resultReceiver = new CapturedResultReceiver ( ) ;
100- resultReceiver . onDecodedBarcodesReceived = ( result ) => {
101- if ( ! result . barcodeResultItems . length ) return ;
93+ // Define a callback for results.
94+ const resultReceiver = new CapturedResultReceiver ( ) ;
95+ resultReceiver . onDecodedBarcodesReceived = ( result ) => {
96+ if ( ! result . barcodeResultItems . length ) return ;
10297
103- const resultsContainer = document . querySelector ( "#div-results-container" ) ;
104- resultsContainer . textContent = '' ;
105- console . log ( result ) ;
106- for ( let item of result . barcodeResultItems ) {
107- resultsContainer . append (
108- `${ item . formatString } : ${ item . text } ` ,
109- document . createElement ( 'br' ) ,
110- document . createElement ( 'hr' ) ,
111- ) ;
112- }
113- } ;
114- router . addResultReceiver ( resultReceiver ) ;
98+ const resultsContainer = document . querySelector ( "#div-results-container" ) ;
99+ resultsContainer . textContent = '' ;
100+ console . log ( result ) ;
101+ for ( let item of result . barcodeResultItems ) {
102+ resultsContainer . append (
103+ `${ item . formatString } : ${ item . text } ` ,
104+ document . createElement ( 'br' ) ,
105+ document . createElement ( 'hr' ) ,
106+ ) ;
107+ }
108+ } ;
109+ router . addResultReceiver ( resultReceiver ) ;
115110
116- // Filter out unchecked and duplicate results.
117- const filter = new MultiFrameResultCrossFilter ( ) ;
118- filter . enableResultCrossVerification (
119- EnumCapturedResultItemType . CRIT_BARCODE ,
120- true
121- ) ; // Filter out unchecked barcodes.
122- // Filter out duplicate barcodes within 3 seconds.
123- filter . enableResultDeduplication (
124- EnumCapturedResultItemType . CRIT_BARCODE ,
125- true
126- ) ;
127- filter . setDuplicateForgetTime (
128- EnumCapturedResultItemType . CRIT_BARCODE ,
129- 3000
130- ) ;
131- await router . addResultFilter ( filter ) ;
111+ // Filter out unchecked and duplicate results.
112+ const filter = new Dynamsoft . Utility . MultiFrameResultCrossFilter ( ) ;
113+ filter . enableResultCrossVerification ( "barcode" , true ) ; // Filter out unchecked barcodes.
114+ // Filter out duplicate barcodes within 3 seconds.
115+ filter . enableResultDeduplication ( "barcode" , true ) ;
116+ filter . setDuplicateForgetTime ( "barcode" , 3000 ) ;
117+ await router . addResultFilter ( filter ) ;
132118
133- // Open camera and start scanning single barcode.
134- await cameraEnhancer . open ( ) ;
135- await router . startCapturing ( "ReadSingleBarcode" ) ;
136- } catch ( ex ) {
137- let errMsg = ex . message || ex ;
138- console . error ( errMsg ) ;
139- alert ( errMsg ) ;
140- }
141- } ) ( ) ;
142- </ script >
143- </ body >
144- </ html >
119+ // Open camera and start scanning single barcode.
120+ await cameraEnhancer . open ( ) ;
121+ await router . startCapturing ( "ReadSingleBarcode" ) ;
122+ } catch ( ex ) {
123+ let errMsg = ex . message || ex ;
124+ console . error ( errMsg ) ;
125+ alert ( errMsg ) ;
126+ }
127+ } ) ( ) ;
128+ </ script >
129+ </ body >
130+
131+ </ html >
0 commit comments