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

Terraform: How to Ace Your Terraform Associate Certification Exam

Taking a fresh look at metrics for Classification Tasks at GumGum — Introduction

Photo of books on a shelf, organized by color.

Release find-broken-link

How to Write a Strategy Pattern using Functional Programming Principles?

Certified Kubernetes Administrator Exam (CKA) Exam Preparation CheatSheet

How To Delete Game Pigeon On Iphone 2019

A Peek at EMQX 5: The Most Scalable MQTT Broker is Almost There

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

What is the document object model (DOM)

Flatiron First Project Assignment

Bootstrap for beginners — Part 1

Bootstrap logo

INTRODUCTION TO HTML