The MediaDevices.getUserMedia() is the only API used to access cameras from web browsers. Although it is simple, to implement a complete web camera viewer, there are still a lot of work to do. There was no existing JavaScript camera widget available until Dynamsoft released the Camera Enhancer library recently. Now, everything becomes easier. This article shares the steps to implement a web camera viewer with the free JavaScript camera library provided by Dynamsoft.
Install JavaScript Camera SDK
Since the JavaScript camera SDK has been published to npmjs.com, you can simply install it by including the following line in your index.html
file:
<script src="https://unpkg.com/dynamsoft-camera-enhancer@2.1.0/dist/dce.js"></script>
To deploy the library to your own web server, you can download the npm package:
npm i dynamsoft-camera-enhancer
Implementation of Opening Cameras from Web Browsers
With Dynamsoft Camera Enhancer JavaScript edition, implementing a web camera viewer can never be easier. There are only two steps:
-
Create an HTML div element as the container:
<div id="enhancerUIContainer" style="height: 100vh;"></div>
We set height to
100vh
to make the camera viewer full screen. -
Initialize the container with Dynamsoft Camera Enhancer:
let enhancer = null; (async () => { enhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(); document.getElementById("enhancerUIContainer").appendChild(enhancer.getUIElement()); await enhancer.open(true); })();
A simple web camera viewer is done. The viewer consists of three parts: camera source list, camera resolution list, and camera preview, which are the key components required by most of web developers.
You may ask how to get camera frames. If you want to do something with the camera frames, you can call getFrame()
. For detailed information, please refer to the online API documentation.
Here we can add a button to trigger frame capture and display the captured frame in a popup window:
<button id="capture">Capture</button>
<script>
document.getElementById('capture').onclick = () => {
if (enhancer) {
let frame = enhancer.getFrame();
let width = screen.availWidth;
let height = screen.availHeight;
let popW = 640, popH = 640;
let left = (width - popW) / 2;
let top = (height - popH) / 2;
popWindow = window.open('', 'popup', 'width=' + popW + ',height=' + popH +
',top=' + top + ',left=' + left + ', scrollbars=yes');
popWindow.document.body.appendChild(frame.canvas);
}
};
</script>
Note: the frame is neither a JavaScript blob object, nor a JavaScript buffer object. It is a type defined by Dynamsoft. The true camera frame data is stored in the built-in canvas object.
If you want to continuously do some image processing, such as barcode scanning, object detection, face recognition, etc., you can create a timer
to call getFrame()
every few milliseconds.
Deployment and Usage
Finally, let's deploy the project. Since web camera access requires HTTPS, we can either forward the local web server to HTTPS with ngrok, or use GitHub pages.
The code can perfectly work on iOS, Android, and desktop web browsers. Multiple back camera selection is only supported on Android. The screenshot below is from iPad Pro.
Top comments (0)