How to Implement Camera Access from Web Browsers in 5 Minutes

The MediaDevices.getUserMedia() API is the standard way to access cameras from web browsers. While it’s relatively straightforward, building a complete web camera viewer still requires significant effort. Until recently, there were no ready-to-use JavaScript camera widgets. However, with the release of the Dynamsoft Camera Enhancer library, implementing a browser-based camera viewer has become much easier. This article outlines the steps to create one using Dynamsoft’s free JavaScript camera library.

Install the JavaScript Camera SDK

The SDK is available on npmjs.com. To include it directly in your HTML, add the following script tag:

<script src="https://unpkg.com/dynamsoft-camera-enhancer@2.1.0/dist/dce.js"></script>

To self-host the library, install it via npm:

npm i dynamsoft-camera-enhancer@2.1.0

How to Open Cameras from Web Browsers

Creating a web camera viewer using Dynamsoft Camera Enhancer (JavaScript edition) only requires two steps:

  1. Add a container element to your HTML:

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

    Set the height to 100vh to make the camera viewer fill the entire screen.

  2. Initialize the camera viewer:

     let enhancer = null;
 (async () => {
     enhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance();
     document.getElementById("enhancerUIContainer").appendChild(enhancer.getUIElement());
     await enhancer.open(true);
 })();

At this point, your web camera viewer is ready. It includes a camera source selector, resolution options, and live preview — everything a web developer typically needs.

Capture a Frame from the Camera

If you want to capture a frame, use the getFrame() method.

Here’s an example of capturing a frame and displaying 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 returned frame is not a Blob or buffer object. Instead, it is a custom type defined by Dynamsoft, and the actual image data is stored in an internal canvas element.

For continuous processing tasks like barcode scanning, object detection, or face recognition, you can use a timer to call getFrame() periodically.

Deployment and Browser Compatibility

To deploy the project:

  • Ensure the page is served over HTTPS, as camera access is restricted on insecure origins.
  • You can use ngrok for HTTPS tunneling or host your project on GitHub Pages.

The code works smoothly across iOS, Android, and desktop browsers. Note: multiple rear camera selection is only supported on Android.

Here’s a screenshot from an iPad Pro:

iOS web browser camera access

Source Code

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