How to Access Browser Camera in JavaScript Using getUserMedia

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.

What you’ll build: A fully functional browser-based camera viewer with camera source selection, resolution switching, live preview, and frame capture — using the Dynamsoft Camera Enhancer JavaScript SDK.

Key Takeaways

  • The getUserMedia() API provides low-level camera access but requires significant boilerplate; Dynamsoft Camera Enhancer wraps it into a ready-to-use camera widget.
  • A complete web camera viewer with source selector, resolution picker, and frame capture can be built in under 10 lines of JavaScript.
  • Browser camera access requires HTTPS (Secure Contexts); local development can use localhost or an HTTPS tunnel like ngrok.
  • The SDK works across iOS Safari, Android Chrome, and all major desktop browsers without platform-specific code.

Common Developer Questions

  • How do I access the camera from a web browser using JavaScript getUserMedia?
  • Why does my browser camera access fail with NotAllowedError or NotFoundError?
  • How do I capture a video frame as an image from a browser camera stream?

Prerequisites

Before getting started, make sure you have:

  • A modern web browser (Chrome, Firefox, Safari, or Edge)
  • A page served over HTTPS or localhost (required for camera access)

Step 1: 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

Step 2: Open the Camera Stream in the Browser

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.

Step 3: Capture a Frame from the Camera Stream

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.

Deploy Over HTTPS and Test Across Browsers

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

Common Issues and Edge Cases

  • NotAllowedError when requesting camera access: The user denied the camera permission prompt, or the page is not served over HTTPS. Ensure your page uses HTTPS (or localhost for development). On iOS Safari, users must explicitly grant permission each time unless the site is added to the home screen.
  • NotFoundError or no cameras listed: The device has no camera, or another application is exclusively holding the camera. Close other apps using the camera and retry. On desktop, check that the camera driver is installed.
  • Camera feed appears black on Android: Some Android devices return a black stream if the requested resolution exceeds hardware capabilities. Avoid requesting exact constraints; prefer ideal values or let the SDK handle resolution negotiation automatically.

Source Code

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