Build the “Hello World” Document Capture Page

NOTE: Before you start, please make sure you’ve downloaded and installed the latest version of Dynamsoft Camera SDK. If you haven’t done so, you can get the 30-day free trial here.

The following 3 steps will show you how to create your first web-based application in just 5 minutes!

Step 1: Start a Web Application

1.1 Copy the Dynamsoft's DCSResources folder to your project

The DCSResources folder can normally be copied from C:\Program Files (x86)\Dynamsoft\Dynamsoft Camera SDK {Version Number} {Trial}\

ResourcesFolder6.0

1.2 Create an empty HTML page

Please put the empty html page together with the DCSResources folder, as shown below:
ResourcesAndHTML

Step 2: Add Dynamsoft Camera SDK to the HTML Page

2.1 Include the two Dynamsoft JS files in the head tag

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

Note: Please note that the dynamsoft.camera.config.js file must be included before the dynamsoft.camera.initiate.js file.

2.2 Add Dynamsoft Camera SDK container to the body tag

	<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>

Note: “video-container” and “image-container“ are the default ids for the divs.

Step 3: Use Dynamsoft Camera SDK to Capture Documents

3.1 Initiate dcsObject and imageViewer, and set the capture mode to document mode

	<script type='text/javascript'>
	       var dcsObject, imageViewer;

	       function onInitSuccess(videoViewerId, imageViewerId){
               dcsObject = dynamsoft.dcsEnv.getObject(videoViewerId);
               imageViewer = dcsObject.getImageViewer(imageViewerId);
               // Set the capture mode to document mode
               dcsObject.videoviewer.setMode(dcsObject.videoviewer.EnumMode.Document);
               // Allow to capture a document even if it is not detected.
               dcsObject.videoviewer.setAllowCaptureUndetectedDocument(true);

               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('video-container', 'image-container', onInitSuccess, onInitFailure);
  </script>

3.2 Add a Capture button and the minimum scripts to capture documents

<input type='button' value='Capture' onclick='acquireDocument();' />
    <script type='text/javascript'>

			function acquireDocument() {
               if (dcsObject) {
                   dcsObject.camera.captureDocument('image-container'); 
               }
           }
    </script>

3.3 Release resources occupied by Dynamsoft Camera Object

		<script type='text/javascript'>

         window.onbeforeunload = function() {
               if (dcsObject) dcsObject.destroy();
           };

		</script>

Note: Please remember to call dcsObject.destroy() to release resources occupied by Dynamsoft Camera object when the page is closed.

3.4 Review the completed code

<html><head><title>Hello World</title>
   <script type='text/javascript' src='DCSResources/dynamsoft.camera.config.js'> </script>
   <script type='text/javascript' src='DCSResources/dynamsoft.camera.initiate.js'> </script>
	</head>
	<body>
	<input type='button' value='Capture' onclick='acquireDocument();' /><br />
	<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>

	<script type='text/javascript'>
	var dcsObject, imageViewer;

	    function onInitSuccess(videoViewerId, imageViewerId){
               dcsObject = dynamsoft.dcsEnv.getObject(videoViewerId);
               imageViewer = dcsObject.getImageViewer(imageViewerId);
               // Set the capture mode to document mode
               dcsObject.videoviewer.setMode(dcsObject.videoviewer.EnumMode.Document);
               // Allow to capture a document even if it is not detected.
               dcsObject.videoviewer.setAllowCaptureUndetectedDocument(true);
               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);
           }

			function acquireDocument() {
               if (dcsObject) {
                   dcsObject.camera.captureDocument('image-container'); 
               }
           }
           dynamsoft.dcsEnv.init('video-container', 'image-container', onInitSuccess, onInitFailure);
           
           window.onbeforeunload = function() {
               if (dcsObject) dcsObject.destroy();
           };
	</script>
	</body></html>

3.5 See the page in action

If you open the Hello World page in your project, it should look like this:

6.0 detect in video

Once the Capture button is clicked, the detected document(s) will show up in the built-in Dynamsoft camera image viewer:

Capture document

NOTE:

  1.  Only UVC compatible devices are supported.

If you have installed the 30-day trial version of Dynamsoft Camera SDK, you can normally find the complete application at C:\Program Files (x86)\Dynamsoft\Dynamsoft Camera SDK {Version Number} {Trial}\Samples\LiveDocumentDetectionandCapture\.

6.0-installation sample

As you can see, there are many other sample applications (source code provided) available for you to explore some of the many features of the Dynamsoft Camera SDK. Enjoy!

Is this page helpful?

Leave a Reply

Your email address will not be published.