• Home
  • Dev Blog
  • Barcode
  • How to Build a Salesforce Lightning Web Component Barcode Scanner with JavaScript

How to Build a Salesforce Lightning Web Component Barcode Scanner with JavaScript

In this article, we are going to create a lightning web component to scan barcodes in Salesforce, the famous CRM system, so that we can quickly input data. Dynamsoft Barcode Reader is used for barcode scanning.

Because Dynamsoft Barcode Reader uses WASM, which cannot run in Salesforce LWC by default, we need to use iframe to embed a barcode scanning web page and use postMessage to communicate between the page and the component.

Jump to: Full Source Code

Demo video:

Salesforce Lightning Web Component Barcode Scanner

What you’ll build: A Salesforce Lightning Web Component (LWC) that embeds a Dynamsoft Barcode Reader page in an iframe hosted as a Static Resource, enabling real-time QR code and barcode scanning with results returned to the CRM via postMessage.

Key Takeaways

  • Dynamsoft Barcode Reader’s WASM engine cannot run directly inside Salesforce LWC due to Content Security Policy (CSP) restrictions — hosting the scanner as a Static Resource in an iframe is the correct workaround.
  • Communication between the LWC and the iframe is handled entirely via window.postMessage, keeping the integration decoupled from Salesforce internals.
  • Dynamsoft Barcode Reader supports high-accuracy decoding of QR Code, Code 128, PDF417, DataMatrix, and 20+ other barcode formats from a live camera stream.
  • This iframe + postMessage pattern applies to any WASM-based JavaScript SDK that needs to run inside Salesforce LWC.

Common Developer Questions

  • How do I integrate a barcode scanner into a Salesforce Lightning Web Component?
  • Why can’t I run WebAssembly (WASM) directly inside Salesforce LWC, and what is the iframe Static Resource workaround?
  • How do I use postMessage to pass barcode scan results from an iframe to a Salesforce LWC?

Prerequisites

Step 1: Set Up Your Development Environment

  • Install Salesforce CLI.
  • Install Visual Studio Code and extensions for Salesforce DX.

You can find the detailed guide here.

Step 2: Create a New Salesforce DX Project

Open Visual Studio Code, open the Command Palette by pressing Ctrl+Shift+P (Windows) or Cmd+Shift+P (macOS) and input SFDX to select the Create Project operation.

new project

Here, we use the standard option.

Then, run SFDX: Create Lightning Web Component to create a component named barcodeScanner.

Step 3: Build the Barcode Scanning Web Page

Create a new HTML file named barcode-scanner.html with the following content. You can apply for a license here.

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Barcode Scanner</title>
  <style>
  #cameraView {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }
  </style>
  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@10.4.2000/dist/dbr.bundle.js"></script>
</head>
<html>
<body>
  <div id="cameraView"></div>
  <script>
    let cvRouter;
    let cameraEnhancer;
    let scanning = false;
    window.addEventListener(
      "message",
      async (event) => {
        console.log("received message in iframe");
        console.log(event);
        if (event.data === "toggle") {
          toggleScanning();
        }
      },
      false,
    );

    initBarcodeScanner();
    async function initBarcodeScanner(){
      Dynamsoft.License.LicenseManager.initLicense("LICENSE-KEY");
      Dynamsoft.Core.CoreModule.loadWasm(["dbr"]);
      cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
      let cameraView = await Dynamsoft.DCE.CameraView.createInstance();
      cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
      document.querySelector("#cameraView").append(cameraView.getUIElement());
      cvRouter.setInput(cameraEnhancer);

      const resultsContainer = document.querySelector("#results");
      cvRouter.addResultReceiver({ onDecodedBarcodesReceived: (result) => {
        console.log(result);
        window.parent.postMessage(result);
      }});
      window.parent.postMessage({initialized:true});
    }

    async function toggleScanning() {
      if (!cvRouter) {
        alert("Please wait for the initialization...");
        return;
      }
      if (!scanning) {
        await cameraEnhancer.open();
        await cvRouter.startCapturing("ReadBarcodes_Balance");
      }else{
        await cvRouter.stopCapturing();
        await cameraEnhancer.close();
      }
      scanning = !scanning;
    }
  </script>
</body>
</html>

It can open the camera to scan barcodes. It can receive messages to control the scanning status and send the barcode result back to the parent.

Step 4: Add Static Resources to Salesforce

  1. Create a folder under the staticresources folder.
  2. Put the barcode-scanner.html into the folder.

  3. Create a metadata file named foldername.resource-meta.xml in the staticresources folder with the following content to describe the resource.

    <?xml version="1.0" encoding="UTF-8"?>
<StaticResource xmlns="http://soap.sforce.com/2006/04/metadata">
    <cacheControl>Private</cacheControl>
    <contentType>application/zip</contentType>
</StaticResource>

Step 5: Implement the Lightning Web Component

Now, go to the lightning web component we created.

  1. Add elements in the HTML file.

    <template>
  <lightning-card title="Barcode Scanner">
    <lightning-button
              label="Toggle Scanning"
              onclick={toggleScanning}
    ></lightning-button>
    <div>
      <label>
        Barcode:&nbsp;
        <span>{barcodeValue}</span>
      </label>
    </div>
    <div class="viewer" id="viewer" style="height:500px;width:400px;"></div>
  </lightning-card>
</template>

  2. When the component is mounted, append the iframe.

    import dwt from '@salesforce/resourceUrl/dwt'; //import path of the resources folder
export default class BarcodeScanner extends LightningElement {
  initialized = false;
  dbrFrame;
    
  renderedCallback() {
    if (this.initialized) {
        return;
    }
    this.initialized = true;
    this.dbrFrame = document.createElement('iframe');
    this.dbrFrame.src = dwt + "/barcode-scanner.html";
    // div tag in which iframe will be added should have id attribute with value myDIV
    this.template.querySelector("div.viewer").appendChild(this.dbrFrame);
    // provide height and width to it
    this.dbrFrame.setAttribute("style","height:100%;width:100%;");
  }
}

  3. Toggle scanning when the button is clicked by posting the message to the iframe.

    toggleScanning(){
  this.dbrFrame.contentWindow.postMessage("toggle");
}

  4. Receive the barcode result.

    barcodeResult;
window.addEventListener(
  "message",
  (event) => {
    console.log(event);
    if (event.data.barcodeResultItems) {
      this.barcodeResult = event.data.barcodeResultItems[0];
    }
  },
  false,
);

  5. Display the barcode text.

    get barcodeValue() {
  if (this.barcodeResult) {
    return this.barcodeResult.text;
  }else{
    return "";
  }
}

Common Issues & Edge Cases

  • WASM blocked by Salesforce CSP: Dynamsoft Barcode Reader uses WebAssembly, which Salesforce’s Content Security Policy blocks when loaded inline in an LWC. Solve this by hosting the scanner HTML as a Static Resource and loading it in an iframe — WASM runs inside the iframe’s own origin context, bypassing the LWC CSP restriction.
  • Camera permission not granted on mobile: On Salesforce mobile apps, the camera permission prompt may not appear automatically. Ensure your org’s Trusted URLs list includes blob: and data: origins, and have users grant camera permissions in device settings before opening the scanner.
  • postMessage security — validate event origin: The example uses an open window.addEventListener("message", ...) without origin validation. In production, always check event.origin against your expected Salesforce domain (e.g., https://yourorg.lightning.force.com) before processing incoming messages to prevent message injection attacks.

Source Code

Get the source code to have a try:

https://github.com/tony-xlh/Dynamic-Web-TWAIN-samples/tree/main/Salesforce/webTWAIN