Browserstack camera frame injection with Kotlin

Photo by Jan Kopřiva

Having to write some Appium tests for a feature that I am currently implementing that uses the Android Camera, I needed to find a way to fake the camera frames being sent from the actual camera in order to test the whole feature and to end.

The browserstack documentation clearly states that you can fake the camera frames being sent to the camera if you first declare the capabilities for camera image injection set to true and then execute a script that will take the frame that you have previously uploaded and use it for all your camera preview interactions.

Here is the official browserstack documentation on how to do it.

Following this documentation worked for the most part that when trying to execute the script I was getting this error:

javascript error: Unexpected token ':'

The solution is provided below in Step 2 but i will guide you again through the whole process.

Step 1 — Upload the desired mock frame to Browserstack

First of all you need to upload the desired image to browserstack. You can do this by using a CURL command. After uploading you will get the ID after the media has been uploaded to browserstack.

curl -u "USER_NAME: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 user name and access key can be obtained from your Browserstack Dashboard after you log in.

Make sure save this ID because you will use it later when specifying the execution script for browserstack in Step 2.

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

Step 2 — Execute the script

In your Appium test define all your interactions that you need. Before using your camera you need to execute the script as shown below. Make sure you have the correct import:

import org.openqa.selenium.JavascriptExecutor

@Test
   fun `test if camera is working correctly`() {
        navigateToCameraScreen()
        shouldBeVisible(CAMERA_PREVIEW)
        val js: JavascriptExecutor = driver

        // This will not work!
        // driver.executeScript("{\"browserstack_executor\"\: {\"action\"\: \"cameraImageInjection\",\"arguments\"\: {\"imageUrl\"\: \"media://96a6dcb240cea34bee5b342d81cde8de9b6abae1\"}}}")

        // Use this instead
        js.executeScript("browserstack_executor: {\"action\":\"cameraImageInjection\", \"arguments\": {\"imageUrl\" : \"media://96a6dcb240dea34bee5b342d91cde8de9b6abae1\"}}")
    }

I hope this helped you solve the problem. Let me know how it went in the comment section below.

Before you go…

If you found this article helpful, click the ❤️ or 👏 button below or share the article on Facebook so your friends can benefit from it too.