How to Implement Camera Access from Web Browsers in 5 Minutes

Install JavaScript Camera SDK

<script src="https://unpkg.com/dynamsoft-camera-enhancer@2.1.0/dist/dce.js"></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();
document.getElementById("enhancerUIContainer").appendChild(enhancer.getUIElement());
await enhancer.open(true);
})();
<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>

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

HOW TO BUILD A REST API WITH KOA.JS