Camera SDK | Turn a Web Camera into a Scanner

With Dynamsoft Camera SDK, developers can build a web application that enables a user to capture scanner-quality images with a webcam. The SDK does this by automatically detecting the border and then cropping the background. Users can also enhance the images by adjusting the brightness, contrast and other properties. After processing, images can be uploaded to a server for storage or further use.

This product is helpful for taking pictures of all kinds of files, such as whiteboards, printed documents, written notes, and name cards.

If you are interested in extracting the text from the captured images, please take a look at the OCR RESTful API Reference.

Demo

This sample demonstrates how to edit document captured from a camera, including boundary editing, rotating, brightness and contrast adjusting, image type converting, etc.

Try the Online Demo >

Download the Sample Code

Step by Step Guide

1. We need to include the two Dynamsoft’s JavaScript files in the <head> tag.

<script type="text/javascript" src="DCSResources/dynamsoft.camera.config.js"> </script> 
<script type="text/javascript" src="DCSResources/dynamsoft.camera.initiate.js"> </script> 

2. Add two div containers to the <body> tag. One for the video stream, and one for the images.

<div id="video-container" class="main-container inline-block"></div>
<div id="image-container" class="main-container inline-block"></div>

3. Initiate dcsObject and imageViewer, and set the capture mode to document mode. With the document mode, captured images will be processed and enhanced with border detection and background removal.

function onInitSuccess(videoViewerId, imageViewerId) {
    dcsObject = dynamsoft.dcsEnv.getObject(videoViewerId); //Get the Dynamsoft Camera SDK object
    imageViewer = dcsObject.getImageViewer(imageViewerId); //Get a specific image viewer
    dcsObject.videoviewer.setMode(dcsObject.videoviewer.EnumMode.Document);
    dcsObject.videoviewer.setAllowCaptureUndetectedDocument(true);

    var cameraList = dcsObject.camera.getCameraList(); //Get a list of available cameras
    if (cameraList.length > 0) {
        //Call this method to take the ownership back, 
        //in case the first camera in the list is occupied by another Dynamsoft Camera process.
        dcsObject.camera.takeCameraOwnership(cameraList[0]);
        dcsObject.camera.playVideo();
    } else {
        alert('No camera is connected.');
    }
    showLoadingLayer(false);
}

4. Capture the document

function onBtnGrabClick() {
    if (!dcsObject) return;

    dcsObject.camera.captureDocument('image-container');
	
    if (dcsObject.getErrorCode() !== EnumDCS_ErrorCode.OK) {
        alert('Capture error: ' + dcsObject.getErrorString());
    };
	
    if(imageViewer.image.getCount()!=0){
        document.getElementById("btn-showDocumentEditor").classList.add('active');
    };
};

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Subscribe Newsletter

Subscribe to our mailing list to get the monthly update.

Subscribename@email.com