Dev Center
Table of contents

Thanks for Downloading Dynamic Web TWAIN 30-Day Trial!

Your download will start shortly. If your download does not begin, click here to retry.

{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() closeVideo() scanDocument() turnOnTorch()
turnOffTorch() getCapabilities()    

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 Android Service
not supported v16.1+ v16.1+ v16.1+ v16.1+ v16.1+ v18.0+

Example

DWTObject.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 Android Service
not supported v16.1+ v16.1+ v16.1+ v16.1+ v16.1+ v18.0+

getCurrentSource

Syntax

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

Availability

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

closeSource

Syntax

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

Availability

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

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 Android Service
not supported v16.1+ v16.1+ v16.1+ v16.1+ v16.1+ v18.0+

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 Android Service
not supported v16.1+ v16.1+ v16.1+ v16.1+ v16.1+ v18.0+

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 Android Service
not supported v16.1+ v16.1+ v16.1+ v16.1+ v16.1+ v18.0+

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 Android Service
not supported v16.1+ v16.1+ v16.1+ v16.1+ v16.1+ v18.0+

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 Android Service
not supported v16.1+ v16.1+ v16.1+ v16.1+ v16.1+ v18.0+

resume

Syntax

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

Availability

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

stop

Syntax

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

Availability

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

getStatus

Syntax

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

Availability

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

Usage notes

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


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 Android Service
not supported v16.1+ v16.1+ v16.1+ v16.1+ v16.1+ v18.0+

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 Android Service
not supported v16.1+ v16.1+ v16.1+ v16.1+ v16.1+ v18.0+

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 Android Service
not supported v16.2+ v16.2+ v16.2+ v16.2+ v16.2+ v18.0+

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 Android Service
not supported v16.2+ v16.2+ v16.2+ v16.2+ v16.2+ v18.0+

scanDocument

Syntax

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

interface DocumentConfiguration {
  scannerViewer?: ScannerViewer;
  documentEditorSettings?: DocumentEditorSettings
}

interface ScannerViewer {
  element?: HTMLDivElement | string; //Bind the element or element id. 
                            //After binding, display the video in the specified element, otherwise, display the video in full screen.
  deviceId?: string;
  maxDocuments?: number;       //The maximum number of documents for current scan
  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".
  };
  headerStyle?:{
    background?: string;  //default: "#000000". Only supports #16 hexadecimal.
    color?: string;  //The color of the icons. Default : "#ffffff". Only supports #16 hexadecimal.
    selectedColor?: string  //The color of the selected icon. Default: "#fe8e14". Only supports #16 hexadecimal.
  };
  bodyStyle?:{
    background?: string;  //default: "#ffffff". Only supports #16 hexadecimal.
    loaderBarSource?: string //The image source of the loader bar: url (e.g. "https://xxx.png") or base64
  };
  footerStyle?:{
    background?: string;  //default: "#000000". Only supports #16 hexadecimal.
    color?: string;  //The color of the icons. Default : "#ffffff". Only supports #16 hexadecimal.
    selectedColor?: string //The color of the selected icon. Default : "#fe8e14". Only supports #16 hexadecimal.
  };
  scanButtonStyle?:{
    background?: string;  //default: "#fe8e14". Only supports #16 hexadecimal.
    color?: string  //Default : "#ffffff". Only supports #16 hexadecimal.
  };    
  resolution?:{
    visibility?: string; //Whether to display the resolution icon in the upper left corner. Values: "visible""hidden". Default; "visible".
    
    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?: string;     //Whether to display the automatic scan icon. Values: "visible""hidden". Default: "visible".
      enableAutoScan?: boolean; //Whether to enable automatic scan. The default value is false.
  };
  autoDetect?:{  //Only applicable to video scanning.                  
      visibility?: string;         //Whether to display the automatic border detection icon. Values: "visible""hidden". Default: "visible".
      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?: boolean; //Whether to enable continuous scan. The default value is true.
  switchCamera?:{  //The default camera is the rear camera.
      visibility?: string   //Whether to display the switch camera icon. Values: "visible""hidden". Default: "visible".
  };
  loadLocalFile?:{  
      visibility?: string   //Whether to display the load local file icon. Values: "visible""hidden". Default: "visible".
  };
  torch?:{
      visibility?: string;   //Whether to display the torch icon if torch is supported. Values: "visible""hidden". Default: "visible".
      enableTorch?: boolean //Whether to enable torch by default. Default:false.
  },
  funcConfirmExit?: (bExistImage: boolean) => Promise<boolean>;
    //funcConfirmExit is the callback funtion,
    //Return Promise.resolve(true): End this capture without saving the image data.
    //Return Promise.resolve(false): Stay on the original viewer
  funcConfirmExitAfterSave?: (firedByDocumentEdit: boolean) => void
    //funcConfirmExitAfterSave is the callback funtion
},

interface DocumentEditorSettings {
  visibility?: string; //Values: "visible""hidden". Default: "visible".
  element?: HTMLDivElement | string; //Bind the element or element id. 
  //After binding, display the video in the specified element, otherwise, display the video in full screen.  
  defaultViewerName?: string;  //value: "cropViewer", "mainViewer". default: "cropViewer" for scanDocument, "mainViewer" for createDocumentEditor
  headerStyle?:{
    background?: string;  //default: "#000000". Only supports #16 hexadecimal.
    color?: string;  //The color of the icons. Default: "#ffffff". Only supports #16 hexadecimal.
    selectedColor?: string;  //The color of the selected icon. Default: "#fe8e14". Only supports #16 hexadecimal.
    disableColor?: string;  //default: "#808080"
  };
  bodyStyle?:{
    background?: string;  //default: "#ffffff". Only supports #16 hexadecimal.
    loaderBarSource?: string; //The image source of the loader bar: url (e.g. "https://xxx.png") or base64
  };
  footerStyle?:{
    background?: string;  //default: "#000000". Only supports #16 hexadecimal.
    color?: string;  //The color of the icons. Default : "#ffffff". Only supports #16 hexadecimal.
    selectedColor?: string;  //The color of the selected icon. Default: "#fe8e14". Only supports #16 hexadecimal.
  };
  insert?: {  //Insert an image  
    visibility?: string;  //Whether to display the insert icon. Values: "visible""hidden". Default: "visible".
    position?: string;   //Set whether to insert the image "before" or "after" the current image. The default value is "before".
  };
  remove?: { //Remove an image
    visibility?: string;   //Whether to display the remove icon. Values: "visible""hidden". Default: "visible".
    funcConfirmRemove?: () => Promise<boolean>; 
      //funcConfirmRemove is the callback funtion
  };
  rotateLeft?: { 
    visibility?: string;   //Whether to display the rotate left icon. Values: "visible""hidden". Default: "visible".
  };
  filter?: {
    visibility?: string;   //Whether to display the filter icon. Values: "visible""hidden". Default: "visible".
    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.
    applyToAll?: {
      visibility?: string; //"visible": hidden". Default: "visible"
      enableApplyToAll?: boolean; //Default:false
      label?: string; //Default: "Apply to all"
    }
  };
  crop?: {
    visibility?: string;  //"visible": hidden". Default: "visible"
  };
  cropViewer?: CropViewer;
  funcConfirmExit?: (bChanged: boolean, previousViewerName: string) => Promise<Number>;
    //funcConfirmExit is the callback funtion.
    //Return Promise.resolve(EnumDWT_ConfirmExitType.Exit): Exit original viewer without saving the image data. 
    //Return Promise.resolve(EnumDWT_ConfirmExitType.SaveAndExit): Exit original viewer with saving the image data. 
    //Return Promise.resolve(EnumDWT_ConfirmExitType.Cancel): Stay on the original viewer
  funcConfirmExitAfterSave?: (firedByDocumentEdit: boolean) => void
    //funcConfirmExitAfterSave is the callback funtion
},

interface CropViewer {
  visibility?: string;   //Whether to display the crop viewer. Values: "visible""hidden". Default: "visible".
  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?: string;   //Whether to display the rotate left icon. Values: "visible""hidden". Default: "visible".
  };
  rotateRight?: {   
    visibility?: string;   //Whether to display the rotate right icon. Values: "visible""hidden". Default: "visible".
  };
  autoDetectBorder?: {   
    visibility?: string;   //Whether to display the automatic border detection icon. Values: "visible""hidden". Default: "visible".
  };
  funcConfirmExit?: (bChanged: boolean, previousViewerName: string) => Promise<Number>
    //funcConfirmExit is the callback funtion.
    //Return Promise.resolve(EnumDWT_ConfirmExitType.Exit): Exit original viewer without saving the image data. 
    //Return Promise.resolve(EnumDWT_ConfirmExitType.SaveAndExit): Exit original viewer with saving the image data. 
    //Return Promise.resolve(EnumDWT_ConfirmExitType.Cancel): Stay on the original viewer
 }

Availability

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

turnOnTorch

Turn on the torch/flashlight.

Syntax

turnOnTorch(): Promise<void>;

Availability

ActiveX H5(Windows) H5(macOS/TWAIN) H5(macOS/ICA) H5(Linux) WASM Android Service
not supported v18.0+ v18.0+ v18.0+ v18.0+ v18.0+ v18.0+

Usage notes

This method should be called when the camera is turned on. It only works with Chromium-based browsers such as Edge and Chrome on Windows or Android. Other browsers such as Firefox or Safari are not supported. All browsers on iOS (including Chrome) use WebKit as the rendering engine and are not supported. You can check if this capability is supported by the camera using API getCapabilities.


turnOffTorch

Turn off the torch/flashlight.

Syntax

turnOffTorch(): Promise<void>;

Availability

ActiveX H5(Windows) H5(macOS/TWAIN) H5(macOS/ICA) H5(Linux) WASM Android Service
not supported v18.0+ v18.0+ v18.0+ v18.0+ v18.0+ v18.0+

Usage notes

This method should be called when the camera is turned on. It only works with Chromium-based browsers such as Edge and Chrome on Windows or Android. Other browsers such as Firefox or Safari are not supported. All browsers on iOS (including Chrome) use WebKit as the rendering engine and are not supported. You can check if this capability is supported by the camera using API getCapabilities.


getCapabilities

Syntax

/**
 * Get the camera capabilities.
 */
getCapabilities(): MediaTrackCapabilities

Availability

ActiveX H5(Windows) H5(macOS/TWAIN) H5(macOS/ICA) H5(Linux) WASM Android Service
not supported v18.0+ v18.0+ v18.0+ v18.0+ v18.0+ v18.0+

Usage notes

This method should be called when the camera is turned on. It only works with Chromium-based browsers such as Edge and Chrome on Windows or Android. Other browsers such as Firefox or Safari are not supported. All browsers on iOS (including Chrome) use WebKit as the rendering engine and are not supported.

Is this page helpful?

YesYes NoNo

In this article:

latest version

    • Latest Version (18.5)
    • Version 18.4
    • Version 18.3
    • Version 18.1
    • Version 18.0
    • Version 17.3
    • Version 17.2.1
    • Version 17.1.1
    • Version 17.0
    • Version 16.2
    • Version 16.1.1
    Change +