Skip to main content
Transform your testing process with: Real Device Features, Company-wide Licences, & Accessibility Testing
No Result Found

Upload images, QR codes, or barcodes to BrowserStack real devices

Applications such as banking and payment apps, lifestyle apps, and social media apps use the mobile device camera to capture images and scan QR codes or barcodes.

App Live enables you to test image capture and QR code/barcode scanning for your apps on BrowserStack real devices. You can upload an image, QR code, or barcode to the BrowserStack real device by using the Image Injection feature. The uploaded image/QR code/barcode is used as input to the real device camera to simulate the action of capturing an image or scanning a code.

By using Image Injection on App Live, you can test your app for scenarios such as:

  • Capturing images of checks, receipts, and other images.
  • Scanning QR code.
  • Scanning barcode.
Note: You can enable the Image Injection, Biometric Authentication, and Device Passcode settings together in the same test session on App Live.

In this guide, you learn about:

Supported devices, apps, and images/QR codes/barcodes

Android Devices running Android OS 6 and higher.
iOS Devices running iOS 13 and higher.

The devices that do not support Image Injection appear grayed out in the device listing on the App Live dashboard. Unsupported devices grayed out

App Live supports testing of the following types of apps using Image Injection:

  • Images or QR codes/barcodes in the .jpg, .jpeg, and .png formats.
  • Images/QR codes/barcodes with maximum height and width dimensions of 288 pixels.
  • Maximum size of an image/QR code/barcode not exceeding 10 MB .

Enable Image Injection setting for your app

Important: App Live does not support apps that use code obfuscation tools like Proguard, to be tested using Image Injection. Ensure that you disable obfuscation before uploading your app on App Live.
  1. Log in to the App Live dashboard.
  2. Upload your app from the Select Source panel.
  3. After your app is uploaded, click the configuration icon next to the file name of your app. Configuration icon
  4. Under App Configurations, enable Image Injection. Enable toggle button
  5. Select your Android device from the list of available devices in the device listing, to launch your test session.
Important: To test your app using Image Injection, ensure that you disable the iOS Entitlements setting under App Configurations. App Live does not support testing of iOS apps with both the iOS Entitlements and Image Injection settings enabled.
  1. Log in to the App Live dashboard.
  2. Upload your app from the Select Source panel.
  3. After your app is uploaded, click the configuration icon next to the file name of your app. Configuration icon
  4. Under App Configurations, enable Image Injection. Enable toggle button
  5. Select your iOS device from the list of available devices in the device listing, to launch your test session.

Your setup session takes approximately 60 seconds.

Add padding for images/QR codes/barcodes

Many mobile apps that use the device camera to scan QR codes, barcodes, documents, etc. have a viewfinder or frame inside the camera output area to scan the image or code. If the image/QR code spans out of the viewfinder frame, the app fails to recognize and scan the image/code.

Padding for an image/QR code refers to the extra space between the image and the viewfinder frame. Adding padding enables most apps and devices to recognize and scan the image/code. The margin to be added for padding an image/QR code depends on the viewfinder area of an app.

Ensure that you add sufficient padding to the image/QR code before uploading it to BrowserStack real devices, if your app uses a viewfinder to scan images or QR codes.

If your uploaded image has insufficient padding because of which it is not recognized by your app, use the steps in the following example to add sufficient padding.

Add padding to images using sample scanner app

Note: The sample app in this procedure is an Android app. You can use the same steps to add sufficient padding to your image/QR code by using an iOS app.
  1. Log in to the App Live dashboard.
  2. From the Select Source panel, upload a sample QR code scanner app. Upload sample app
  3. Enable Image Injection setting for the sample app.
  4. Select a device from the device listing to launch your test session.
  5. In the sample app, trigger the QR code/barcode scan workflow.
  6. On the App Live vertical toolbar, click Capture Screenshot to take a screenshot of the device screen.
    The screenshot is saved in the Downloads folder of your system.
  7. Crop the screenshot image to remove the navigation bar, so that only the camera section of the image is visible. Crop screenshot
  8. In your browser, open a sample image overlay website.
  9. Click Upload Image, and select the cropped screenshot from your system.
  10. Click Add Overlay Image, select the QR code you want to upload from your system, and fit the QR code inside the viewfinder area of the screenshot using any image editor.
    Padding is added to your QR code. Overlay image added
  11. Click Preview Image > Download Image to download the QR code with padding to your system. Download padded image
  12. Upload the QR code with padding to the BrowserStack real device.

Upload and inject image or QR code/barcode

Prerequisites:

You can upload up to five images to the image gallery on a BrowserStack real device. Upload one image at a time, for a maximum of five images, to test your app.

Note: On BrowserStack real iOS devices, the image/QR/barcode you upload to a device is automatically resized, to ensure that your app can successfully scan the image/code.

To upload an image/QR code/barcode:

  1. On the App Live vertical toolbar, click Files & Media.
  2. On the Files & Media prompt, click the Image injection tab.
    A sample image is available on the device and injected in your app. You can use the sample image or upload your own images to inject in your app.
  3. To upload an image, click Upload asset, select the image/QR code/barcode that you want to upload from your system, and click Open.
    The Files & Media prompt displays the following:
    • The progress bar while the image/QR code/barcode is being uploaded. Click Cancel if you want to cancel the current upload and upload another image/QR code/barcode.
    • A preview of the image/QR code/barcode after the upload is complete.
    • Image gallery that displays the uploaded images.
      You see a message on the dashboard that the asset is uploaded and injected in your app. Image upload complete

The latest uploaded image/QR code/barcode is injected in your app by default. However, you can select another image from the gallery to be injected in your app, and click Inject this asset. Inject asset You see a message on the dashboard that the selected image is injected in your app.

Replace or delete an image/QR code/barcode

Prerequisite:
Upload and inject image or QR code/barcode.

To replace an image when the image gallery is full:

  1. Click Upload asset.
  2. On the Your gallery is full prompt, click Remove and Upload.
    The oldest uploaded image is removed and is replaced by the latest uploaded image. Replace image/QR/barcode

To delete an image from the image gallery:

  1. Click the image you want to delete.
  2. Click the delete icon on the image.
    You see a message on the dashboard that the image was deleted successfully. Delete an image

Test your app using uploaded images/QR codes/barcodes

Prerequisites:

To test your app using an uploaded image/QR code/barcode:

  1. In your app, trigger the image capture or QR code/barcode scanning workflow.
  2. Give your app the permission to access the device camera.
    A blank screen in displayed.
  3. Click the camera shutter button.
  4. Click Use Photo.
    The image or QR code/barcode that you selected to be injected in your app is displayed.

Troubleshooting

The troubleshooting page lists some common errors that you may see while testing your app using Image Injection on App Live.

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked





Thank you for your valuable feedback

Is this page helping you?

Yes
No

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked





Thank you for your valuable feedback!

Talk to an Expert
Download Copy Check Circle