App-bridge scanner not detecting any barcodes in Android Shopify App

paranthaman
Tourist
4 0 1

I'm in the process of writing an app that scans barcodes using the built-in scanner in the Shopify Android/iOS app. While testing on a Samsung Galaxy S10, the camera starts up with red scanner line in the middle but detects no barcodes, and scanner.subscribe(Scanner.Action.CAPTURE, ...) function is never called.

The Shopify app detects barcodes with the "Products -> Inventory scanner" on the same phone. Are there some options that need to be specified with the built-in scanner to detect certain barcoded (code 39/128 etc.)? My code is listed below. What am I missing? Thanks!

var app = createApp({
  apiKey: API_KEY,
  shopOrigin: Cookies.get("shopOrigin")
});
// Start scanner
var scanner = Scanner.create(app);
var features = Features.create(app);
features.subscribe(Features.Action.REQUEST_UPDATE, function (payload) {
	if (payload.feature[Scanner.Action.OPEN_CAMERA]) {
	  var available = payload.feature[Scanner.Action.OPEN_CAMERA].Dispatch;
	  if (available) {
		scanner.subscribe(Scanner.Action.CAPTURE, payload => {
			alert(JSON.stringify(payload))
		});
		scanner.dispatch(Scanner.Action.OPEN_CAMERA)
	  }
	}
});
// Request camera permission from user
features.dispatch(Features.Action.REQUEST, {
	feature: Group.Scanner,
	action: Scanner.Action.OPEN_CAMERA
});
0 Likes
JamesWoo
Shopify Staff
Shopify Staff
10 3 1

Hi @paranthaman,

Do you mind trying this code?

var app = createApp({  apiKey: API_KEY,  shopOrigin: Cookies.get("shopOrigin")
});
// Start scanner
var scanner = Scanner.create(app);
var features = Features.create(app);
features.subscribe(Features.Action.REQUEST_UPDATE, function(payload) { if (payload.feature[Scanner.Action.OPEN_CAMERA]) {
var available = payload.feature[Scanner.Action.OPEN_CAMERA].Dispatch;
if (available) {
scanner.dispatch(Scanner.Action.OPEN_CAMERA);
}
} });
scanner.subscribe(Scanner.Action.CAPTURE, payload => { alert(JSON.stringify(payload)) });
// Request camera permission from user
features.dispatch(Features.Action.REQUEST, { feature: Group.Scanner, action: Scanner.Action.OPEN_CAMERA });

 

Note that I put  

scanner.subscribe(Scanner.Action.CAPTURE, payload => { alert(JSON.stringify(payload)) });

outside the feature subscription callback. I believe the issue you are having is caused by subscribing within the feature subscription callback. This callback is only called after the user has granted permissions for the feature.

 

Please let me know if you have any more issues.

James

0 Likes
paranthaman
Tourist
4 0 1

Hi James,

Thanks for getting back to me so quickly. I moved the scanner.subscribe(...) code as you suggested but it still doesn't get called. Am I missing some shopify permissions to scan barcodes?

I currently request only read_products permission.

  server.use(
    createShopifyAuth({
      apiKey: SHOPIFY_API_KEY,
      secret: SHOPIFY_API_SECRET_KEY,
      scopes: ['read_products'],
      afterAuth(ctx) {
        const { shop, accessToken } = ctx.session;
        ctx.cookies.set('shopOrigin', shop, {
          httpOnly: false,
          secure: true,
          sameSite: 'none'
        });
        ctx.redirect('/');
      },
    }),
  );
0 Likes
paranthaman
Tourist
4 0 1

Looks like the camera settings with the built-in "Inventory scanner" and the "App-bridge scanner" are different. See images below. The App-bridge version is using a wider angle and is unable to focus even when placed very close to the barcode. Both images are screenshots of the scanner from the same distance to the same barcode label.

Built-in Inventory ScannerBuilt-in Inventory ScannerApp-bridge API ScannerApp-bridge API Scanner