How to Implement Camera Access from Web Browsers in 5 Minutes

Install JavaScript Camera SDK

<script src=""></script>
npm i dynamsoft-camera-enhancer

Implementation of Opening Cameras from Web Browsers

  1. Create an HTML div element as the container:
<div id="enhancerUIContainer" style="height: 100vh;"></div>
let enhancer = null;
(async () => {
enhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance();
<button id="capture">Capture</button>
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 ='', 'popup', 'width=' + popW + ',height=' + popH +
',top=' + top + ',left=' + left + ', scrollbars=yes');


Deployment and Usage

Source Code




Manager of Dynamsoft Open Source Projects | Tech Lover

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Going Cloud-first for the first time?Here’s the catch!

Web Scraping Tutorial with Python: Tips and Tricks

TryHackMe: Anonymous

Death of Docker ?

How to Copy Paste data from one place to another place or one worksheet to another worksheet using…

Bringing One-Click Google Logins to the Avalanche Wallet

Tricks and Tips to Boost Regression Testing Process

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Xiao Ling

Xiao Ling

Manager of Dynamsoft Open Source Projects | Tech Lover

More from Medium

How to Fix the SSL Connection Error on Android?

How to solve the “Process out of memory” error in Node.js

Backups on MongoDB