Skip to main content
Check out our new courses about Mobile Testing with BrowserStack App Automate on Test University!

Test Camera image capture and QR/Barcode scanning

Important:
  • On iOS, the Camera Image Injection feature is currently in Beta and may involve changes based on feedback.
  • On Android, currently this feature is in private Beta.

BrowserStack enables you to test image capture and QR/Bar code scanning from BrowserStack’s mobile device camera. If your mobile app has features, such as check scanning, profile image capture, and QR/Bar code scanning, you can use this feature to automate the testing of such a feature in your app.

In this guide, you will learn about :

  1. How BrowserStack enables camera testing
  2. How to test Camera image capture in an AppAutomate session
  3. How to test QR/Barcode scanning in an AppAutomate session
  4. Frequently Asked Questions (FAQs)

1. How BrowserStack enables camera testing

BrowserStack supports an app’s interaction with different mobile sensors, such as a Camera or biometric authentication, using Sensor Instrumentation. Sensor Instrumentation is the process in which, if Camera Image Injection is enabled for the session, we inject BrowserStack’s Camera code module into the app. This code module mocks or overrides iOS SDK or Android SDK Camera APIs used by the app.

Note: Camera/barcode image injection doesn’t support:
  • iOS apps signed with Enterprise certificates. In such cases, thebrowserstack.resignApp capability is set as false, while to use the camera injection feature, this capability is expected to be set to true.
  • Capturing other media types, such as video, from the camera.

2. Test camera image capture in an AppAutomate session

Consider the example of a banking app in the following image that accepts the image capture of the front and back of a physical check. This is a common use case in modern banking applications that lets customers deposit their physical check using pictures of the check. To test such a use case, upload the image to our cloud, set the appium capability, and then inject the image just before the click camera button event occurs in the script.

Camera Image Injection

Testing the camera image capture involves:

2.1 Learn about supported APIs & devices

Camera image injection is supported for the following Camera APIs. Check with your app development team to get more details about the Camera APIs your app uses.

OS Devices Supported APIs    
iOS iOS 13 and higher didFinishPickingMediaWithInfo API of UIImagePickerController iOS SDK class for capturing an image. For details, please check Apple documentation.

AVCapturePhoto iOS SDK class for receiving captured photos from AVCapturePhotoOutput API. For details, please check Apple Documentation.

jpegStillImageNSDataRepresentation of AVCaptureStillImageOutput iOS SDK class. For details, please check Apple documentation.
   

2.2 Upload desired image to Browserstack

Upload your desired image to BrowserStack using the following cURL command. Supported formats for images are JPG, JPEG, PNG, and the max file size allowed is 10 MB.

    curl -u "YOUR_USERNAME:YOUR_ACCESS_KEY" \
    -X POST "https://api-cloud.browserstack.com/app-automate/upload-media" \
    -F "file=@/path/to/media/file/<your_image>.png" \
    -F "custom_id=SampleMedia"

The following image shows the sample response that includes the media ID to be set in the image_url used later in the test script.

{"media_url":"media://02b3466cd0b5b4825d925eb1c69f7d901890b136","custom_id":"SampleMedia","shareable_id”:”<username>/SampleMedia"}

2.3 Enable Camera Image Injection in the Appium session

Enable Camera Image Injection using the Appium capability browserstack.enableCameraImageInjection:"true” in the desired capabilities for the Appium session. This ensures your app undergoes Sensor Instrumentation, a process using which BrowserStack supports an app’s interaction with different mobile sensors, such as Camera or biometric authentication.

DesiredCapabilities desiredCapabilities = new DesiredCapabilities();
desiredCapabilities.setCapability("browserstack.enableCameraImageInjection", "true");
var capabilities = {
    "browserstack.enableCameraImageInjection" : "true"
}
desired_cap = {
	"browserstack.enableCameraImageInjection" : "true"
}
desired_caps = {
    "browserstack.enableCameraImageInjection" => "true"
}
DesiredCapabilities capability = new DesiredCapabilities();
desiredCapabilities.SetCapability("browserstack.enableCameraImageInjection", "true");

2.4 Inject the uploaded image before Camera is triggered in the app

Inject the uploaded image using BrowserStack’s custom executor with the action cameraImageInjection as shown in the following code snippets. Ensure the image is injected before the Camera is triggered in the app as the Camera only captures the last injected image.

driver.executeScript("browserstack_executor: {\"action\":\"cameraImageInjection\", \"arguments\": {
    \"imageUrl\" : \"media://<id>\"
}})
await driver.execute("browserstack_executor: {\"action\":\"cameraImageInjection\", \"arguments\": {
  \"imageUrl\" : \"media://<id>\"
}}”)
driver.execute_script("browserstack_executor: {\"action\":\"cameraImageInjection\", \"arguments\": {
    \"imageUrl\" : \"media://<id>\"
}}”)
@driver.execute_script("browserstack_executor: {\"action\":\"cameraImageInjection\", \"arguments\": {
    \"imageUrl\" : \"media://<id>\"
}}”)
driver.executeScript("browserstack_executor: {\"action\":\"cameraImageInjection\", \"arguments\": {
    \"imageUrl\" : \"media://<id>\"
}})

2.5 Trigger Camera in the app & take a photo

Add the logic to click the Camera button in the mobile app after the logic to inject the uploaded image is added in the script. The image captured from the Camera is the last injected image.

3. Test QR/Barcode scanning in an AppAutomate session

Consider the example of a banking app in the following image that requests you to scan the QR code with an emabedded URL to complete your identity verification. This is a common use case where mobile applications might embed URLs in QR codes, payment applications might embed payee information, or simply a contact information card. To test this use case, upload the image to our cloud, set the appium capability, and then inject the QR code image just before the click camera button event occurs in the script.

QR code scanning

Testing the barcode scanning involves:

3.1 Learn about Supported APIs

QR/barcode image injection is supported for the following APIs. Check with your app development team to get more details about the barcode APIs your app uses.

OS Devices Supported APIs    
iOS iOS 13 and higher AVMetadataMachineReadableCodeObject is a subclass of AVMetadataObject iOS SDK class for scanning QR/Barcodes. For details, please check Apple documentation.    

3.2 Upload desired QR/Barcode image to Browserstack

Upload your desired QR/Barcode to BrowserStack using the following cURL command. Supported formats for images are JPG, JPEG, PNG, and the max file size allowed is 10 MB.

    curl -u "YOUR_USERNAME:YOUR_ACCESS_KEY" \
    -X POST "https://api-cloud.browserstack.com/app-automate/upload-media" \
    -F "file=@/path/to/media/file/<your_image>.png" \
    -F "custom_id=SampleMedia"

The following image shows the sample response that includes the media ID to be set in the image_url used later in the test script.

{"media_url":"media://02b3466cd0b5b4825d925eb1c69f7d901890b136","custom_id":"SampleMedia","shareable_id”:”<username>/SampleMedia"}

For your test to successfully complete, ensure that the QR/barcode image has the appropriate whitespace padding. You can use the following sample barcode or QR code to test the QR/barcode injection feature.

Sample barcode Sample QR code
Sample barcode Sample QR code

3.3 Enable Camera Image Injection in the Appium session

Enable Camera Image Injection using Appium capability browserstack.enableCameraImageInjection:"true” in the desired capabilities for the Appium session. This ensures your app undergoes Sensor Instrumentation, a process using which BrowserStack supports an app’s interaction with different mobile sensors, such as Camera or biometric authentication.

DesiredCapabilities desiredCapabilities = new DesiredCapabilities();
desiredCapabilities.setCapability("browserstack.enableCameraImageInjection", "true");
var capabilities = {
    "browserstack.enableCameraImageInjection" : "true"
}
desired_cap = {
	"browserstack.enableCameraImageInjection" : "true"
}
desired_caps = {
    "browserstack.enableCameraImageInjection" => "true"
}
DesiredCapabilities capability = new DesiredCapabilities();
desiredCapabilities.SetCapability("browserstack.enableCameraImageInjection", "true");

3.4 Inject the uploaded QR/Barcode image before Camera is triggered in the app

Inject the uploaded QR/Barcode using BrowserStack’s custom executor with action cameraImageInjection as shown in the following code snippet. Ensure that the QR/Barcode is injected before the Camera is triggered in the app as the camera only captures the last injected image.

driver.executeScript("browserstack_executor: {\"action\":\"cameraImageInjection\", \"arguments\": {
    \"imageUrl\" : \"media://<id>\"
}})
await driver.execute("browserstack_executor: {\"action\":\"cameraImageInjection\", \"arguments\": {
  \"imageUrl\" : \"media://<id>\"
}}”)
driver.execute_script("browserstack_executor: {\"action\":\"cameraImageInjection\", \"arguments\": {
    \"imageUrl\" : \"media://<id>\"
}}”)
@driver.execute_script("browserstack_executor: {\"action\":\"cameraImageInjection\", \"arguments\": {
    \"imageUrl\" : \"media://<id>\"
}}”)
driver.executeScript("browserstack_executor: {\"action\":\"cameraImageInjection\", \"arguments\": {
    \"imageUrl\" : \"media://<id>\"
}})

3.5 Trigger Camera in the app to start QR/Barcode scanning

Add the logic to click the Camera button in the mobile app after the inject uploaded image logic. The app automatically starts scanning the last injected QR/Barcode.

4. Frequently Asked Questions (FAQs)

1. Do we need to make any changes to the app code?

You do not need to make any changes to the app code.

2. What kind of apps are supported?

We support native & cross-platform iOS apps.

Need some help?

If you have any queries, get in touch with us.

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