barcode-reader-javascript-samples/frameworks/requirejs/scan-using-foundational-api/requirejs.html at 099c644315b917b62b223f80e217159ecf43c484 · Dynamsoft/barcode-reader-javascript-samples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <meta name="description" content="Quickly read barcodes with Dynamsoft Barcode Reader from a live camera stream." />
    <meta name="keywords" content="barcode, camera, RequireJS" />
    <link rel="canonical" href="https://demo.dynamsoft.com/Samples/DBR/JS/frameworks/requirejs/scan-using-foundational-api/requirejs.html" />
    <title>Dynamsoft Barcode Reader Sample - Hello World for RequireJS (Decode via Camera)</title>
    <script src="https://cdn.jsdelivr.net/npm/requirejs@2.3.6/require.js"></script>
  </head>

  <body>
    <h1>Hello World for RequireJS (Decode via Camera)</h1>
    <div id="camera-view-container" style="width: 100%; height: 80vh"></div>
    Results:
    <br />
    <div id="results" style="width: 100%; height: 10vh; overflow: auto; white-space: pre-wrap"></div>
    <script>
      requirejs(
        ["https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.2.4000/dist/dbr.bundle.js"],
        ({
          Core: { CoreModule },
          License: { LicenseManager },
          Utility: { MultiFrameResultCrossFilter },
          CVR: { CaptureVisionRouter },
          DCE: { CameraView, CameraEnhancer },
        }) => {
          /** LICENSE ALERT - README
           * To use the library, you need to first specify a license key using the API "initLicense()" as shown below.
           */

          LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");

          /**
           * You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=samples&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/docs/web/programming/javascript/user-guide/index.html?ver=11.2.4000&cVer=true#specify-the-license&utm_source=samples or contact support@dynamsoft.com.
           * LICENSE ALERT - THE END
           */

          CoreModule.engineResourcePaths.rootDirectory = "https://cdn.jsdelivr.net/npm/";

          // Optional. Used to load wasm resources in advance, reducing latency between video playing and barcode decoding.
          CoreModule.loadWasm();

          (async () => {
            try {
              // Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control.
              const cameraView = await CameraView.createInstance();
              const cameraEnhancer = await CameraEnhancer.createInstance(cameraView);
              // Get default UI and append it to DOM.
              document.querySelector("#camera-view-container").append(cameraView.getUIElement());

              // Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source.
              const cvRouter = await CaptureVisionRouter.createInstance();
              cvRouter.setInput(cameraEnhancer);

              // Define a callback for results.
              cvRouter.addResultReceiver({
                onDecodedBarcodesReceived: (result) => {
                  if (!result.barcodeResultItems.length) return;

                  const resultsContainer = document.querySelector("#results");
                  resultsContainer.textContent = "";
                  console.log(result);
                  for (let item of result.barcodeResultItems) {
                    resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
                  }
                },
              });

              // Filter out unchecked and duplicate results.
              const filter = new MultiFrameResultCrossFilter();
              // Filter out unchecked barcodes.
              filter.enableResultCrossVerification("barcode", true);
              // Filter out duplicate barcodes within 3 seconds.
              filter.enableResultDeduplication("barcode", true);
              await cvRouter.addResultFilter(filter);

              // Open camera and start scanning barcode.
              await cameraEnhancer.open();
              cameraView.setScanLaserVisible(true);
              await cvRouter.startCapturing("ReadBarcodes_SpeedFirst");
            } catch (ex) {
              let errMsg = ex.message || ex;
              console.error(ex);
              alert(errMsg);
            }
          })();
        }
      );
    </script>
  </body>
</html>