How to Implement Camera Access from Web Browsers in 5 Minutes

The MediaDevices.getUserMedia() API is the standard method for accessing cameras from web browsers. While it is straightforward, creating a complete web camera viewer involves considerable effort. Until recently, there was no ready-to-use JavaScript camera widget. However, with the release of the Dynamsoft Camera Enhancer library, this task has become much simpler. This article outlines the steps to implement a web camera viewer using Dynamsoft's free JavaScript camera library.

Install JavaScript Camera SDK

The JavaScript camera SDK is available on npmjs.com. You can install it by adding the following line to 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, download the npm package:

npm i dynamsoft-camera-enhancer@2.1.0

Implementation of Opening Cameras from Web Browsers

With the Dynamsoft Camera Enhancer JavaScript edition, creating a web camera viewer is very straightforward. There are only two steps:

1. Create an HTML div element as the container:
   

   <div id="enhancerUIContainer" style="height: 100vh;"></div>
   

   Set the height to 100vh to make the camera viewer full screen.

2. 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);
   })();
   

Your simple web camera viewer is now ready. The viewer includes a camera source list, camera resolution list, and camera preview, which are essential components for most web developers.

If you want to process camera frames, you can use the getFrame() method. For detailed information, refer to the online API documentation.

Here is an example of how to add a button to capture a frame and display it 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 not a JavaScript blob or buffer object. It is a type defined by Dynamsoft, and the actual camera frame data is stored in a built-in canvas object.

If you need to perform continuous image processing, such as barcode scanning, object detection, or face recognition, you can create a timer to call getFrame() at regular intervals.

Deployment and Usage

To deploy the project, ensure that web camera access is via HTTPS. You can either use ngrok to forward your local web server to HTTPS or host your project on GitHub Pages.

The code works perfectly on iOS, Android, and desktop web browsers. Multiple back camera selection is only supported on Android. The screenshot below is from an iPad Pro.

Source Code

https://github.com/yushulx/javascript-barcode-qr-code-scanner/tree/main/examples/9.x/camera_only