Scanner.Action.CAPTURE not firing?

Solved

Scanner.Action.CAPTURE not firing?

dgtlmonk
Shopify Partner
38 3 8

Is there a version compatibility for  Scanner Action subscription? I can't get this to work, while other actions subscription like Cart (i.e. cart.subscribe) is firing as expected.

 

  const app = useAppBridge();
  const scanner = Scanner.create(app);

// THIS IS NOT FIRING?! :-/ scanner.subscribe(Scanner.Action.CAPTURE, payload => { window.alert(JSON.stringify(payload)) }); scanner.dispatch(Scanner.Action.OPEN_CAMERA)

 

 

package.json

"@shopify/app": "3.34.0",
"@shopify/cli": "3.34.0"

 

frontend package.json

"@shopify/app-bridge": "^3.1.0",
"@shopify/app-bridge-react": "^3.1.0",
"@shopify/app-bridge-utils": "^3.1.0",
"@shopify/polaris": "^9.11.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",

Accepted Solution (1)

dgtlmonk
Shopify Partner
38 3 8

This is an accepted solution.

Seems like this is a known Issue. For anyone having the same issue, I get the solution from Github repository.

 

The workaround is to use app.subscribe() instead of scanner.subscribe() like so:

 

import { Features, Group, Scanner } from "@shopify/app-bridge/actions";
 
let subscribed = false;
let available = false;
 
export const scanBarcode = (app, barcodeCallback) => {
  try {
    let scanner = Scanner.create(app);
    let features = Features.create(app);
 
    // Open camera
    scanner.dispatch(Scanner.Action.OPEN_CAMERA);
 
    // Dispatch an action to request access to Camera Scanner
    features.subscribe(Features.Action.REQUEST_UPDATE, function (payload) {
      if (payload.feature[Scanner.Action.OPEN_CAMERA]) {
        available = payload.feature[Scanner.Action.OPEN_CAMERA].Dispatch;
        if (available) {
          scanner.dispatch(Scanner.Action.OPEN_CAMERA);
        }
      }
    });    
 
    // Does nothing on Shopify POS on Android and iOS
    // Works fine on Shopify Mobile
    features.dispatch(Features.Action.REQUEST, {
      feature: Group.Scanner,
      action: Scanner.Action.OPEN_CAMERA,
    });
    if (!subscribed) {
      subscribed = true;
      app.subscribe(Scanner.Action.CAPTURE, (payload) => {
        let barcode = payload.data.data
          ? payload.data.data
          : payload.data.scanData;
        alert("Barcode" + barcode);
        barcodeCallback(barcode); // Process barcode
      });
    }
  } catch (err) {
    console.log("Camera scanner not available.", err);
    alert("Camera scanner not available. " + JSON.stringify(err?.message));
  }
};

 

View solution in original post

Replies 2 (2)

ShopifyDevSup
Shopify Staff
1453 238 501

Hi @dgtlmonk


For issues with App Bridge, the best course of action would be to submit an issue directly here in the public repo.

 

Developer Support @ Shopify
- Was this reply helpful? Click Like to let us know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

dgtlmonk
Shopify Partner
38 3 8

This is an accepted solution.

Seems like this is a known Issue. For anyone having the same issue, I get the solution from Github repository.

 

The workaround is to use app.subscribe() instead of scanner.subscribe() like so:

 

import { Features, Group, Scanner } from "@shopify/app-bridge/actions";
 
let subscribed = false;
let available = false;
 
export const scanBarcode = (app, barcodeCallback) => {
  try {
    let scanner = Scanner.create(app);
    let features = Features.create(app);
 
    // Open camera
    scanner.dispatch(Scanner.Action.OPEN_CAMERA);
 
    // Dispatch an action to request access to Camera Scanner
    features.subscribe(Features.Action.REQUEST_UPDATE, function (payload) {
      if (payload.feature[Scanner.Action.OPEN_CAMERA]) {
        available = payload.feature[Scanner.Action.OPEN_CAMERA].Dispatch;
        if (available) {
          scanner.dispatch(Scanner.Action.OPEN_CAMERA);
        }
      }
    });    
 
    // Does nothing on Shopify POS on Android and iOS
    // Works fine on Shopify Mobile
    features.dispatch(Features.Action.REQUEST, {
      feature: Group.Scanner,
      action: Scanner.Action.OPEN_CAMERA,
    });
    if (!subscribed) {
      subscribed = true;
      app.subscribe(Scanner.Action.CAPTURE, (payload) => {
        let barcode = payload.data.data
          ? payload.data.data
          : payload.data.scanData;
        alert("Barcode" + barcode);
        barcodeCallback(barcode); // Process barcode
      });
    }
  } catch (err) {
    console.log("Camera scanner not available.", err);
    alert("Camera scanner not available. " + JSON.stringify(err?.message));
  }
};