Skip to main content

Image injection in 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

App Live supports testing your app with Image Injection on the following devices:

Devices running Android OS 6 and higher.

Devices running iOS 13 and higher.

The devices that do not support testing with 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:

App Live supports testing of the following types of images or QR codes/barcodes using Image Injection:

  • Images or QR codes/barcodes in the .jpg, .jpeg, and .png formats.
  • Image/QR code/barcode size 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. On the App Live dashboard, upload your app from the left 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 device from the list of available devices in the device listing on the right panel, 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. On the App Live dashboard, upload your app from the left 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 device from the list of available devices in the device listing on the right panel, 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 your image or QR code/barcode

Prerequisites:

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 your image/QR code/barcode:

  1. On the App Live vertical toolbar, click Media Injection.
  2. On the Media Injection prompt, click the Image tab.
    A sample image is available on the device. You can use the sample image or upload your own image/QR code/barcode.
  3. Click Upload new asset to upload your own image/QR code/barcode.
  4. On your system, select the image/QR code/barcode that you want to upload, and click Open.
    The Media Injection -> Image 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/QR/barcode upload complete

Test your app using the uploaded image or QR code/barcode

Prerequisites:

To test your app using the 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 uploaded is displayed.

Additional Information

  • A sample image is available on the BrowserStack real device. When you upload your image/QR code/barcode, the uploaded image replaces the sample image.
  • If you upload a new image/QR code/barcode, the new image replaces the old image.
  • If you do not upload any new image/QR code/barcode to the BrowserStack real device for 30 days, your last uploaded image is removed and is replaced with the sample image.

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
Talk to an Expert