Join our Discord
Inject images, videos, QR codes, or barcodes into the device camera
Test camera capture and code scanning on your websites by replacing the camera feed on BrowserStack real devices with media you upload.
This feature is available only under Team Pro and Enterprise Pro plans. For more details, check out our pricing page.
Capturing or scanning images using the device camera isn’t enabled on BrowserStack real devices. However, using media injection on BrowserStack Live, you can upload images, QR codes, and barcodes to use as inputs to the device camera. The uploaded media simulates capturing or scanning an image while you test your websites. You can also upload videos, which play in place of the camera feed.
You can test scenarios such as:
- Scanning QR codes
- Scanning barcodes
- Capturing images of documents such as checks and receipts
Supported media formats and device-browser combinations
| Supported formats | Size limit |
|---|---|
.jpg |
10 MB |
.png |
10 MB |
.mp4 |
10 MB |
| Operating system | Browser |
|---|---|
| Android v13 and later | Chrome |
| iOS v16 and later (including v26) | Chrome, Safari |
| macOS | Chrome |
| Windows | Chrome |
Limitations and considerations
The following limitations and considerations apply to media injection:
- You can upload only one media asset at a time.
- The gallery holds up to five media assets.
- You can inject only one media asset into your website at a time.
Upload your media
To upload your media to a BrowserStack real device, follow these steps:
- Log in to the Live dashboard.
- Select your device-browser combination to start the test session.
- On the Live toolbar, click Files & Media.
- In the Files & Media prompt, click the Gallery tab.
A sample image is available on the device and injected into your website. You can use the sample image or upload your own media.
- To upload your own media, click Upload asset and select the image, QR code, barcode, or video that you want to upload from your system.
The media is added to the gallery and injected into your website. The Asset injected successfully message appears, and the media preview shows the Injected in website label.
Manage your uploaded media
You can change which media asset is injected or remove an asset from the gallery:
- To switch to a different asset, select the asset from the gallery and click Inject this asset.
- To delete an asset, select the asset and click the delete icon on the media preview.
Test media injection on sample websites
Prerequisites
Complete the following before testing:
- Log in to the Live dashboard.
- Select your device-browser combination to start the test session.
- In the browser, open a website that lets you capture images using your webcam. For example, webcamtests.com.
- On the website, click the option that starts the webcam. On webcamtests.com, this option is Test my cam.
- Click Allow to give the website permission to access the device camera.
The image or video you uploaded appears in place of the camera feed, which confirms that media injection is working.
- Log in to the Live dashboard.
- Select your device-browser combination to start the test session.
- In the browser, open a website that lets you scan QR codes using your webcam. For example, webqr.com.
- If the website doesn’t start the camera automatically, click the option that starts the camera.
- Click Allow to give the website permission to access the device camera.
The QR code you uploaded appears in place of the camera feed and the website scans the code, which confirms that media injection is working.
Troubleshooting
When using media injection on Live, you might see the following errors:
| Issue | Resolution |
|---|---|
| Media upload failed | Ensure that your media is in a supported format and size, then try uploading again. |
| Media not displayed on the website | Refresh your website. |
FAQs
Why am I not able to use the media injection feature on certain devices or desktop?
Media injection works only on certain operating system and browser combinations. Check whether the system and browser you selected are supported. For the supported versions, see Supported media formats and device-browser combinations.
Why can't I upload a file from the website using media injection?
The media injection option on BrowserStack Live supports your website accessing the camera interactively. The camera injects the media you uploaded into your website. Manual file input to your website isn’t supported on Live.
Why isn't the image displayed properly after scanning?
- If you’re testing a QR code or a barcode scanner, ensure that you have sufficient padding.
- Ensure that the QR code is within the scanning frame.
- Color distortion after uploading media is a known issue. For assistance, contact BrowserStack Support.
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
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!