DEV Community

Xiao Ling
Xiao Ling

Posted on • Originally published at dynamsoft.com

 

How to Implement Camera Access from Web Browsers in 5 Minutes

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>
Enter fullscreen mode Exit fullscreen mode

To deploy the library to your own web server, you can download the npm package:

npm i dynamsoft-camera-enhancer
Enter fullscreen mode Exit fullscreen mode

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:

  1. 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.

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

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>
Enter fullscreen mode Exit fullscreen mode

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.

iOS web browser camera access

Source Code

https://github.com/yushulx/web-browser-camera-access

Latest comments (0)

Visualizing Promises and Async/Await 🤯

async await

☝️ Check out this all-time classic DEV post