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 not supported.

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 to test Camera image capture in an AppAutomate session
  2. How to test QR/Barcode scanning in an AppAutomate session
  3. Frequently Asked Questions (FAQs)

1. How to test Camera image capture in an AppAutomate session

Camera Image Injection

1.1 Upload desired image to Browserstack

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

1.2 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 which is a process using which BrowserStack supports an app’s interaction with different mobile sensors such as Camera.

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");

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

Inject the uploaded image using BrowserStack’s custom executor with action cameraImageInjection as shown below. Please ensure the image is injected before the Camera is triggered in the app as the Camera will only capture 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>\"
}})

1.4 Trigger Camera in the app & tap the Shutter picture to take a photo

Click on the Camera Shutter button in the mobile app. The image captured from the Camera will be the last injected image.

2. How to test QR/Barcode scanning in an AppAutomate session

QR code scanning

2.1 Upload desired QR/Barcode image to Browserstack

Upload your desired QR/Barcode to BrowserStack using this REST API. Supported formats for images are JPG, JPEG, PNG, and the max file size allowed is 10MB. Please ensure that the QR/Barcode image has appropriate whitespace as shown below.

2.2 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 which is a process using which BrowserStack supports an app’s interaction with different mobile sensors such as Camera.

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.3 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 below. Please ensure the QR/Barcode is injected before the Camera is triggered in the app as the Camera will only capture 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.4 Trigger Camera in the app to start QR/Barcode scanning

When the Camera is triggered in the mobile app, it will automatically start scanning the last injected QR/Barcode.

Note:
  • Camera Image Injection feature is supported only on iOS 13 & above devices.
  • iOS apps signed with Enterprise certificates are not supported. Camera Image Injection feature needs browserstack.resignApp to be true.
  • Currently, we don’t support capturing media types such as video from the Camera.

3. Frequently Asked Questions (FAQs)

1. How do Camera Image Injection and QR/Barcode scanning work on BrowserStack mobile devices?

BrowserStack supports an app’s interaction with different mobile sensors such as a Camera 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 which mocks or overrides iOS SDK or Android SDK Camera APIs used by the app.

2. What Camera APIs are supported by BrowserStack Camera Image Injection feature?

Please note that Camera image injection and QR/Barcode scanning feature will work only if the app uses any of the following supported Camera APIs. To get more details about the Camera APIs your app uses please check with your app development team.

On iOS, currently, we support the following Camera APIs :

For capturing images from the Camera :

  • 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

For scanning QR/Barcodes from the Camera :

  • AVMetadataMachineReadableCodeObject is a subclass of AVMetadataObject iOS SDK class for scanning QR/Barcodes. For details, please check Apple documentation.

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

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

4. What kind of apps are supported?

We support native & cross-platform iOS apps such as React Native, Flutter, etc.

4. What kind of QR/Barcode images can I scan?

Any kind of QR/Barcode images can be scanned. Please ensure that the QR/Barcode image has appropriate whitespace as shown below.

Need some help?

If you have any queries, please 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