Dev Center
Table of contents

{WebTwainObject}.Addon.Camera

{WebTwainObject} denotes the WebTwain instance.

Dynamic Web TWAIN comes with a Camera add-on for you to capture images or documents using MediaDevices cameras, auto crop and adjust perspective.

To include the Camera add-on, simply add a reference to the corresponding camera JS file:

<script src="Resources/addon/dynamsoft.webtwain.addon.camera.js"></script>

Check out MediaDevices Cameras to learn more on how to use the camera add-on.

Methods

       
getSourceList() selectSource() getCurrentSource() closeSource()
getResolution() setResolution() getCurrentResolution() play()
pause() resume() stop() getStatus()
capture() showVideo() closeVideo() scanDocument()

Events

   
video-closed video-error

getSourceList

Syntax

/**
 * Return a list of all available cameras.
 */
getSourceList(): Promise<DeviceInfo[]>;

interface DeviceInfo{
    deviceId: string;
    label: string;
}

Availability

ActiveX H5(Windows) H5(macOS/TWAIN) H5(macOS/ICA) H5(Linux) WASM
not supported v16.1+ v16.1+ v16.1+ v16.1+ v16.1+

Example

DWObject.Addon.Camera.getSourceList();

selectSource

Syntax

/**
 * Select a camera to use.
 * @param deviceId Specify the camera with its deviceId.
 */
selectSource(deviceId: string): Promise<DeviceInfo>;

Availability

ActiveX H5(Windows) H5(macOS/TWAIN) H5(macOS/ICA) H5(Linux) WASM
not supported v16.1+ v16.1+ v16.1+ v16.1+ v16.1+

getCurrentSource

Syntax

/**
 * Return the info about the current camera.
 */
getCurrentSource():DeviceInfo;

Availability

ActiveX H5(Windows) H5(macOS/TWAIN) H5(macOS/ICA) H5(Linux) WASM
not supported v16.1+ v16.1+ v16.1+ v16.1+ v16.1+

closeSource

Syntax

/**
 * Close the current camera.
 */
closeSource(): Promise<DeviceInfo>;

Availability

ActiveX H5(Windows) H5(macOS/TWAIN) H5(macOS/ICA) H5(Linux) WASM
not supported v16.1+ v16.1+ v16.1+ v16.1+ v16.1+

getResolution

Syntax

/**
 * Return the resolutions supported by the current camera.
 */
getResolution(): Promise<Resolution[]>

interface Resolution{
    width: number;
    height: number;
}

Availability

ActiveX H5(Windows) H5(macOS/TWAIN) H5(macOS/ICA) H5(Linux) WASM
not supported v16.1+ v16.1+ v16.1+ v16.1+ v16.1+

setResolution

Syntax

/**
 * Set the resolution for the current camera.
 * @param resolution Specify the resolution.
 */
setResolution(resolution: Resolution): Promise<Resolution>;

Availability

ActiveX H5(Windows) H5(macOS/TWAIN) H5(macOS/ICA) H5(Linux) WASM
not supported v16.1+ v16.1+ v16.1+ v16.1+ v16.1+

getCurrentResolution

Syntax

/**
 * Return the resolution of the current camera.
 */
getCurrentResolution(): Promise<Resolution>;

Availability

ActiveX H5(Windows) H5(macOS/TWAIN) H5(macOS/ICA) H5(Linux) WASM
not supported v16.1+ v16.1+ v16.1+ v16.1+ v16.1+

Usage notes

If the camera is playing, the actual resolution is returned. If the camera is not playing, the last set resolution or null is returned.


play

Syntax

/**
 * Start streaming video from the current camera.
 * @param element Specify an HTML element to put the video stream in.
 * @param resolution Specify the initial resolution.
 * @param fill Whether to fill the viewer space with the video stream and leave no margin. The default value is `false`.
 */
play(element?: HTMLElement,
    resolution?: Resolution,
    fill?: boolean
): Promise<Resolution>;

Availability

ActiveX H5(Windows) H5(macOS/TWAIN) H5(macOS/ICA) H5(Linux) WASM
not supported v16.1+ v16.1+ v16.1+ v16.1+ v16.1+

Usage notes

If no camera is chosen, the default camera is used.

If the method is called without arguments or null is passed to element , the video will show in the main viewer.


pause

Syntax

/**
 * Pause the video stream.
 */
pause(): void;

Availability

ActiveX H5(Windows) H5(macOS/TWAIN) H5(macOS/ICA) H5(Linux) WASM
not supported v16.1+ v16.1+ v16.1+ v16.1+ v16.1+

resume

Syntax

/**
 * Resume the video stream.
 */
resume(): void;

Availability

ActiveX H5(Windows) H5(macOS/TWAIN) H5(macOS/ICA) H5(Linux) WASM
not supported v16.1+ v16.1+ v16.1+ v16.1+ v16.1+

stop

Syntax

/**
 * Stop the video stream.
 */
stop(): void;

Availability

ActiveX H5(Windows) H5(macOS/TWAIN) H5(macOS/ICA) H5(Linux) WASM
not supported v16.1+ v16.1+ v16.1+ v16.1+ v16.1+

getStatus

Syntax

/**
 * Return the status of the current camera.
 */
getStatus(): string;

Usage notes

The status string is either empty or one of the following: “playing”, “paused”, “stopped”. An empty string means no camera is open.

Availability

ActiveX H5(Windows) H5(macOS/TWAIN) H5(macOS/ICA) H5(Linux) WASM
not supported v16.1+ v16.1+ v16.1+ v16.1+ v16.1+

capture

Syntax

/**
 * Capture a frame from the video stream.
 */
capture(): Promise<Blob>;

Availability

ActiveX H5(Windows) H5(macOS/TWAIN) H5(macOS/ICA) H5(Linux) WASM
not supported v16.1+ v16.1+ v16.1+ v16.1+ v16.1+

showVideo

Syntax

/**
 * Start streaming video from the current camera in the viewer.
 * @param deviceId Specify a camera.
 * @param resolution Specify the initial resolution.
 * @param mode Specify the mode.
 * @param fill Whether to fill the viewer area with the video stream and leave no margin.
 */
showVideo(deviceId?: string,
    resolution?: Resolution,
    mode?: string,
    fill?: boolean
): Promise<Resolution>;

Availability

ActiveX H5(Windows) H5(macOS/TWAIN) H5(macOS/ICA) H5(Linux) WASM
not supported v16.1+ v16.1+ v16.1+ v16.1+ v16.1+

Usage notes

There are two available modes: document and picture .

  • picture: border detection is turned off and supports taking images consecutively. This is the default mode.
  • document: border detection will be on and only supports taking one image at a time.

closeVideo

Syntax

/**
 * Close the camera and hide the video streaming UI.
 */
closeVideo(): void;

Availability

ActiveX H5(Windows) H5(macOS/TWAIN) H5(macOS/ICA) H5(Linux) WASM
not supported v16.1+ v16.1+ v16.1+ v16.1+ v16.1+

video-closed

Syntax

/**
 * This event is triggered when the video is closed.
 */
on("video-closed", callback: () => void): boolean;

Availability

ActiveX H5(Windows) H5(macOS/TWAIN) H5(macOS/ICA) H5(Linux) WASM
not supported v16.2+ v16.2+ v16.2+ v16.2+ v16.2+

video-error

Syntax

/**
 * This event is triggered when the video playing operation. throws out an error.
 * @argument errorCode The error code.
 * @argument errorString The error string.
 */
on("video-error", callback: (errorCode, errorString) => void): boolean;

Availability

ActiveX H5(Windows) H5(macOS/TWAIN) H5(macOS/ICA) H5(Linux) WASM
not supported v16.2+ v16.2+ v16.2+ v16.2+ v16.2+

scanDocument

Syntax

/**
 * Open the camera to capture document(s).
 * @param scanConfiguration Specify the scan configuration.
 */
scanDocument(scanConfiguration?: ScanConfiguration
): Promise<Resolution>;

interface ScanConfiguration{
  element?: HTMLDivElement, //Bind the element or element id. 
                             //After binding, display the video in the specified element, otherwise, display the video in full screen.
  scannerViewer?:{
    deviceId?: string,  
    maxDocuments?: number,       //The maximum documents can be captured/loaded in to the buffer. 
    enableBorderDetection?: boolean,  // Whether to enable border detection. The default value is true.
    fullScreen?: boolean,   //Whether to display the video in full screen. The default value is false.
    polygonStyle?:{      //The sytle of the auto detect border.       
      stroke: string,    //default: "#fe8e14". Only supports #16 hexadecimal.
      strokeWidth: string,  //default: "2px"
      dash: string          //The allowed value are "solid" and "dashed", the default value is "solid".
      },
    resolution?:{
      visibility?: boolean, //Whether to display the resolution icon in the upper left corner. The default value is true.
      valueList?:[ {   
       label: string,    //The resolution value listed in the drop-down list. For example:"1920x1080"
       value: Resolution //The resolution you set. For example: { width:1920, height:1080}
      },{……}]
       defaultValue?: Resolution , //Set the default value according to the value set in the valueList.
      },
    autoScan?:{   //Automatically capture when a clear document is detected. Only applicable to video scanning. 
       visibility?: boolean,     //Whether to display the automatic scan icon. The default value is true.
       enableAutoScan?: boolean, //Whether to enable automatic scan. The default value is false.
       },
    autoDetect?:{  //Only applicable to video scanning.                  
       visibility?: boolean,         //Whether to display the automatic border detection icon. The default value is true.
       enableAutoDetect?: boolean,   //Whether to enable automatic border detection. The default value is false.     
       acceptedPolygonConfidence?: number, //The default value is 80. The higher the setting, the more accurate the automatic border detection.
       fpsLimit?: number,  //The maximum number of frames detected per second. The default value is 3.
       },     
    continuousScan?:{   //Only applicable to video scanning.
       visibility?: boolean,   //Whether to display the continuous scan icon. The default value is true.
       enableContinuousScan?: boolean,  //Whether to enable continuous scan. The default value is true.
       },
    switchCamera?:{  //The default camera is the rear camera.
       visibility?: boolean,   //Whether to display the switch camera icon. The default value is true.
       },
    loadLocalFile?:{  
       visibility?: boolean,   //Whether to display the load local file icon. The default value is true.
       },
    funcConfirmExitContinuousScan?: funcConfirmExitContinuousScan, 
      //funcConfirmExitContinuousScan is the callback funtion
      //Return true:Exit continuous scan mode without saving the captured image data. Return false: Stay on the original viewer
    funcConfirmExit?: funcConfirmExit, 
      //funcConfirmExit is the callback funtion
      //Return true:End this capture without saving the image data. Return false: Stay on the original viewer
    },

  filterViewer?:{
    visibility?: boolean,   //Whether to display filter viewer. The default value is true.
    insert?: {  //Insert an image  
       visibility?: boolean,   //Whether to display the insert icon. The default value is true.
       position?: string   //Set whether to insert the image "before" or "after" the current image. The default value is "before".
       },
    remove?: { //Remove an image
   	  visibility?: boolean,   //Whether to display the remove icon. The default value is true.
       },
    rotateLeft?: { 
      visibility?: boolean,   //Whether to display the rotate left icon. The default value is true.
      },
    filter?: {  
      visibility?: boolean,   //Whether to display the filter icon. The default value is true.
      valueList?:[ {   //If not specified, listing all the filters in the order of original, blackAndWhite, grayscale, clean, brightening, saveToner by default. 
                        //Support adjusting the valueList order to arrange the filter order.
       label: string,   //The label of the filter. For example. The filter "Original" can be modified to any word you want to describe
       value: string,   //The filter value. The value must be set according to our specification below.
			//Allowed values:
                        //original 
		        //blackAndWhite
			//grayscale
			//clean
			//brightening
			//saveToner	
       option?: {
          level: 1 //The filter level. The allowed values are 1(default value), 2, 3.
                      //The higher the level, the better the quality, but the more time it takes.
           }
        },{……}]
	 
       defaultValue?: string,   //Filter selected by default. By default, the original filter is selected.
       },
    exitDocumentScanAfterSave?: false  //The default value is false.
    },

  cropViewer?: { 
    visibility?: boolean,   //Whether to display the crop viewer. The default value is true. 
    polygonStyle?:{    //The polygon style in the crop viewer.       
      stroke: string,       //default : "#fe8e14".  Only supports #16 hexadecimal.
      strokeWidth: string,   //default: "2px"
      dash: string           //The allowed value are "solid" and "dashed", the default value is "solid".
      },
    rotateLeft?:{   
      visibility?: boolean,   //Whether to display the rotate left icon. The default value is true.
     },
    rotateRight?:{   
      visibility?: boolean,   //Whether to display the rotate right icon. The default value is true.
     },
    autoDetectBorder?:{   
      visibility?: boolean,   //Whether to display the automatic border detection icon. The default value is true.
     },
   }
 }

 function funcConfirmExitContinuousScan(){
     return true;  
  }

 function funcConfirmExit(){
     return true;  
  }

Availability

ActiveX H5(Windows) H5(macOS/TWAIN) H5(macOS/ICA) H5(Linux) WASM
not supported not supported not supported not supported not supported v17.2+

Example

<div id="dwtcontrolContainer" style="width:270px;height:350px"></div>
<input type="button" value="scan document" onclick="ScanDocument();" />
<script type="text/javascript">
	function ScanDocument() {
	  var DWObject = Dynamsoft.DWT.GetWebTwain('dwtcontrolContainer');
	     if (DWObject) {
		     if(!DWObject.UseLocalService) {
			DWObject.Addon.Camera.scanDocument({element: document.getElementById("dwtcontrolContainer")}).then(
			function(){
			   console.log("OK");
			}, 
			function(error){
			   console.log(error.message);
			});
		     } 
	     }
	 }
</script>

Is this page helpful?

YesYes NoNo

In this article:

latest version

  • Latest Version
  • Version 17.2.1
  • Version 17.1.1
  • Version 17.0
  • Version 16.2
  • Version 16.1.1
Change +
© 2003–2022 Dynamsoft. All rights reserved.
Privacy Statement / Site Map / Home / Purchase / Support