Capture Images from Scanner and Webcam in JavaScript

Access Webcam and Scanner in JavaScript

 

It’s a common requirement for document/records management applications to capture images from both web cameras and scanners via web browsers. For instance, an electronic medical record application will have a patient’s photograph taken at the check-in desk, then stored with the patient’s scanned medical documents in the database.

You can easily implement web-based document scanning and webcam capture using Dynamic Web TWAIN and Dynamsoft Camera SDK which provide JavaScript APIs for accessing both scanners and UVC camera for document/image capture on the client side.

  • Capture documents/images from client-side scanners/cameras in JavaScript
  • HTTP post methods enabling you to save captured images to a web server, database, or document library
  • Supports ASP.NET (C#/VB.NET), PHP, JSP, or any other server-side programming languages you desire

Try an online demo >

In this article, we will show you how to control scanners and webcams in JavaScript easily by using Dynamsoft’s web-based imaging SDKs.

Access Scanners in JavaScript

Dynamic Web TWAIN provides APIs which enable you to access TWAIN scanners easily with several lines of code in JS.

function AcquireImage() {
    var DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');
    if (DWObject) {
        DWObject.SelectSource(); 
        DWObject.OpenSource();
        DWObject.IfDisableSourceAfterAcquire = true;
        DWObject.AcquireImage();
    }
}  

Webcam Capture in JavaScript

You can use Dynamsoft Camera SDK to control UVC webcams in JS. You can use the two libraries together seamlessly. With the webcam library, you can display live streams and capture snapshot from webcams in a web page.

//Initiate dcsObject and imageViewer
<script type="text/javascript"> 
    var dcsObject, imageViewer;
    function onInitSuccess(videoViewerId, imageViewerId) {
        dcsObject = dynamsoft.dcsEnv.getObject(videoViewerId);
        imageViewer = dcsObject.getImageViewer(imageViewerId); 
 
        var cameraList = dcsObject.camera.getCameraList();
        if (cameraList.length > 0) {
            dcsObject.camera.takeCameraOwnership(cameraList[0]);
            dcsObject.camera.playVideo();
        } else {
            alert('No camera is connected.');
        }
    }
 
    function onInitFailure(errorCode, errorString) {
        alert('Init failed: ' + errorString);
    }
 
    dynamsoft.dcsEnv.init('dcsVideoContainer', 'dcsImageContainer', onInitSuccess, onInitFailure);
</script>

//Add a Grab button and the minimum scripts to grab

<input type="button" value="Grab" onclick="GrabImage();" />
<script type="text/javascript"> 
    function GrabImage(){
        if (!dcsObject) return;
 
        dcsObject.camera.captureImage('dcsImageContainer');
    }
</script>

Get Samples & Free Trial

Download sample code

To embed document scanning and webcam capture into your own web application, you can install the 30-day free trials.

Let us know if you have any questions on embedding TWAIN scanning and webcam capture in web applications in the comments section below.

Subscribe Newsletter

Subscribe to our mailing list to get the monthly update.

Subscribename@email.com