How to Make a Webcam Program in JavaScript

As a Web developer, you might get a request to implement webcam access in your Web application. How to do that?

You might consider the free option at first. As we know, HTML5 provides a MediaDevices.getUserMedia() method for connecting to a video or audio input device like webcam.

Dynamsoft provides another option – Dynamsoft Camera SDK – for you to control your webcam from your Web page. Why consider a paid option while there is a free one? Check out this blog post on more details about Dynamsoft Camere SDK vs getUserMedia method.

About Dynamsoft Camera SDK

Dynamsoft Camera SDK is a Web-based camera SDK that enables developers quickly create a webcam program in JavaScript. It supports all mainstream browsers on Windows, including Chrome, Internet Explorer (v6 and above), Microsoft Edge, and Firefox. It works with all UVC compatible webcams, cameras, and other devices.

The SDK provides APIs which allows a developer to fully control a camera, e.g., exposure, iris, auto focus, backlight compensation, brightness, saturation, sharpness, gamma, contrast, white balance temperature, gain.

You can view the image and do simple editing like rotate, flip, mirror, crop etc. on the image. You can also upload the captured images to your Web server and database as PDF, TIFF, JPEG files. You can also implement barcode scanning using a camera by using the camera library with our barcode reader SDK.

Learn more about Dynamsoft Camera SDK >

Access Webcam in JavaScript using Dynamsoft Camera SDK

Here we will show you how to easily integrate webcam capture and video preview in an HTML page with the SDK.

  1. In an HTML page, first, add a reference to the JS files of the camera SDK in the head tag.
<head>
<script type="text/javascript" src="DCSResources/dynamsoft.camera.config.js">
<script type="text/javascript" src="DCSResources/dynamsoft.camera.initiate.js"> 
</head>
  1. Add two containers – one to show the video stream and the other to show the captured image.
<div id="video-container" style="width: 500px; height: 400px; display: inline-block; border: solid 1px gray"> </div> 
 
<div id="image-container" style="width: 500px; height: 400px; display: inline-block; border: solid 1px gray"> </div>
  1. Initialize the camera object and play the video.
<script type="text/javascript">
dynamsoft.dwsEnv.init('video-container', 'image-container', onInitSuccess, onInitFailure);
function onInitSuccess(videoViewerId, imageViewerId) {
dwsObject = dynamsoft.dwsEnv.getObject(videoViewerId);
dwsObject.camera.playVideo(); 
}
</script>
  1. Add a Grab button. When it’s clicked, capture an image from the webcam.
<input type="button" value="Grab" onclick="acquireImage();" />
<script type="text/javascript">
//capture an image
function acquireImage() {
 if (dwsObject) {
 dwsObject.camera.captureImage('image-container');
 }
 }
</script>

Try for Free

Try an online demo

Get 30-day free trial

If you have any questions on webcam programming in a Web application, let us know below.

Subscribe Newsletter

Subscribe to our mailing list to get the monthly update.

Subscribename@email.com