Recently, projects involving device interactions, such as with cameras and audio, have become popular. I just
completed a project using a device's camera, and encountered some challenges that required significant effort to
overcome. To assist with your current or future projects that utilize a device's camera, I decided to write this
blog. It discusses some common issues encountered when working with cameras, and provides solutions to these
problems. I hope this will promptly resolve your current issues and prevent similar problems in your future
projects.
Please note that these issues are based on my personal experiences when working with a device camera; use this as a
reference only.
These are some dependencies that I used:
"react-scripts": "5.0.1",
"react-webcam": "^7.2.0",
"typescript": "^4.9.5"
Before starting, ensure that your code includes the following, as it will make it easier to identify and find
solutions for any issues.
const getMedia = async (constraints) => {
try {
const stream = await navigator.mediaDevices.getUserMedia(constraints)
/* use the stream */
} catch (err) {
/* handle the error */
console.log(err)
}
}
1. Camera Issues
1.1. The browser requires permission to access the camera.
To enable the browser to use the device's camera, you need to grant permissions for browsers to access the camera.
Please take note that on iOS devices, if you grant "Allow" permission for a browser, the permission will be revoked
immediately upon reloading the page. This is different from Android devices, where the "Allow" permission will not
be revoked when the page is reloaded.
In order to circumvent the issue of permissions being revoked on iOS devices, one effective strategy is to adjust the
permission settings. Instead of opting for the "Ask" setting, you can choose the "Always" option. This ensures that
the device maintains the necessary permissions, thus providing a smoother and more seamless user experience.
1.2. The camera requires time to start up.
When a browser opens the camera, it takes time for the camera to start. This startup speed depends on the device's
processing power. Devices with stronger processors will have significantly faster startup times compared to those
with weaker processors.
Ensure the camera is fully initialized before performing any camera-related tasks. This will prevent some unnecessary
errors when working with the device's camera.
Below is a code snippet that demonstrates waiting for the camera to fully boot up before executing further tasks:
navigator.mediaDevices
.enumerateDevices()
.then((devices) => {
/* handle the further tasks */
})
.catch((err) => {
/* handle the error */
console.log(err)
})
1.3. Safari saves the captured images its cache.
In the Safari browser, captured images are stored in the Graphics tab of the Dev Tools.
When the total image storage capacity surpasses the maximum capacity of the Safari browser, the application will
crash, preventing any further operations. In this situation, reloading the page to clear the cache is the only
solution to restore the application's functionality.
Thus, after capturing images or recording video, it's important to release these files to free up space for the next
capture or recording.
To release captured images or recorded videos, follow the code snippet below:
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d')!;
ctx.restore();
canvas.remove();
1.4. The camera requires time to switch from the front to the back camera, and vice versa.
When switching from the front to back camera and vice versa, the camera need time to rework.
Currently, if you take a picture using the front camera and then immediately switch to the back camera, the screen
will display the back camera. However, the captured image will still be from the front camera. This will seriously
affect the user experience, furthermore, your handling of the captured image will be incorrect.
In this case, you need to disable the capture button and display a blank screen when switching the camera. Also, make
sure that any processing is stopped before restarting the camera.
2. Conclusion
In summary, working with device cameras in web applications can present several challenges, ranging from permission
issues to handling camera startup times and managing captured image data.
By sharing my experiences and the solutions I have developed, I hope to help you navigate these common issues more
effectively. Ensuring proper permissions, handling camera initialization, managing image storage, and carefully
controlling camera switching are key to creating a smooth user experience.
Use this guide as a reference to quickly resolve current problems and prevent similar issues in your future projects.
Remember, each project may have unique challenges, so adapt these solutions to fit your specific needs.
3. References
[1]. MDN contributors. (2023, 12 28). MediaDevices: getUserMedia() method. Retrieved from https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
[2]. Marcus Urbenz. (2020, 08 27). Black round device in close up photography. Retrieved from https://unsplash.com/photos/black-round-device-in-close-up-photography-ueucI7YmG6g