TWAIN ActiveX/Plug-in HTTP Control/SDK

How to use Dynamic Web TWAIN Plug-in

When Dynamic Web TWAIN Plug-in is not registered in the HTML, Gecko-based browsers invoke the default plug-in to help users find and install the right plug-in for that MIME type. The blue puzzle piece that appears in the HTML page's plug-in window when the default plug-in loads is meant to signify that the browser is missing a piece that it needs to display or play the requested media.

How the plug-in HTML tag was coded determines what action is taken when the user clicks the plug-in piece. If the browser cannot handle the given MIME type, then the default plug-in checks to see if there is a plug-in referenced in the EMBED tag that defines the media. If there is, then the default plug-in prompts the user to download that plug-in from the specified location.

For Firefox, you can use the HTML EMBED as the following sample to invoke Dynamic Web TWAIN Plug-in.

<html>
	<head>
		<title>Image Scanner Application</title>
	</head>

	<body>
		<p>This is a simple test page for the DynamicWebTWAIN plug-in.</p>
		<EMBED
			TYPE="Application/DynamicWebTwain-Plugin"
			OnPreTransfer="OnPreTransferCallback"
			OnPostTransfer="OnPostTransferCallback"
			OnPreAllTransfers="OnPreAllTransfersCallback"
			OnPostAllTransfers="OnPostAllTransfersCallback"
			OnTransferCancelled="OnTransferCancelledCallback"
			OnTransferError="OnTransferErrorCallback"
			OnMouseClick="OnMouseClickCallback"
			OnMouseMove="OnMouseMoveCallback"
			OnMouseRightClick="OnMouseRightClickCallback"
			OnMouseDoubleClick="OnMouseDoubleClickCallback"
			OnTopImageInTheViewChanged="OnTopImageInTheViewChangedCallback"
			OnImageAreaSelected="OnImageAreaSelectedCallback"
			OnImageAreaDeSelected="OnImageAreaDeSelectedCallback"
			
			WIDTH="100"
			HEIGHT="100"
			PLUGINSPAGE="DynamicWebTwain.xpi">
		</EMBED>

		<input type="button" onclick="AcquireImage()" value="AcquireImage" >
		<script>
		function OnPreTransferCallback(){
			// Add your code here
		}
		function OnPostTransferCallback(){
			// Add your code here
		}
		function OnPreAllTransfersCallback(){
			// Add your code here
		}
		function OnPostAllTransfersCallback(){
			// Add your code here
		}
		function OnTransferCancelledCallback(){
			// Add your code here
		}
		function OnTransferErrorCallback(){
			// Add your code here
		}
		function OnMouseClickCallback(sImageIndex){
			// Add your code here
		}
		function OnMouseMoveCallback(sImageIndex){
			// Add your code here
		}
		function OnMouseRightClickCallback(sImageIndex){
			// Add your code here
		}
		function OnMouseDoubleClickCallback(sImageIndex){
			// Add your code here
		}
		function OnTopImageInTheViewChangedCallback(sImageIndex){
			// Add your code here
		}
		function OnImageAreaSelectedCallback(sImageIndex, left, top, right, bottom){
			// Add your code here
		}
		function OnImageAreaDeSelectedCallback(sImageIndex){
			// Add your code here
		}
		function AcquireImage(){
			// scan image
			var plugin = document.embeds[0];
			plugin.AcquireImage();
		}
		</script>
	</body>
</html>

Note:

The PLUGINSPAGE is the URL of DynamicWebTwain.xpi for download.
You must include the TYPE attribute in an EMBED tag. If you do not, then there is no way of determining the media type, and so no plug-in loads. Use TYPE to specify MIME type necessary to display the plug-in.
The MIME type that is specified by TYPE attribute must be added to the MIME types list on the Web Server where DynamicWebTwain.xpi can be downloaded. About how to add a MIME type to MIME types list on IIS, you can refer to Microsoft IIS Deployment Guide. If you are using Apache, please add the following line to your httpd.conf file.
"AddType application/x-xpinstall .xpi"
After DynamicWebTWAIN.xpi is downloaded, you need to open it in the browser to install the plug-in.
About OnPreTransfer, OnPostTransfer, OnPreAllTransfers, OnPostAllTransfers, OnTransferCancelled and OnTransferError events in the above sample code, please refer to 'Dynamic Web TWAIN ActiveX' section of this documentation.

For Chrome, Opera, Safari, etc. You can use the HTML EMBED as the following sample to invoke Dynamic Web TWAIN Plug-in.

<html>
	<head>
		<title>Image Scanner Application</title>
	</head>

	<body>
		<p>This is a simple test page for the DynamicWebTWAIN plug-in.</p>
		<EMBED
			TYPE="Application/DynamicWebTwain-Plugin"
			OnPreTransfer="OnPreTransferCallback"
			OnPostTransfer="OnPostTransferCallback"
			OnPreAllTransfers="OnPreAllTransfersCallback"
			OnPostAllTransfers="OnPostAllTransfersCallback"
			OnTransferCancelled="OnTransferCancelledCallback"
			OnTransferError="OnTransferErrorCallback"
			OnMouseClick="OnMouseClickCallback"
			OnMouseMove="OnMouseMoveCallback"
			OnMouseRightClick="OnMouseRightClickCallback"
			OnMouseDoubleClick="OnMouseDoubleClickCallback"
			OnTopImageInTheViewChanged="OnTopImageInTheViewChangedCallback"
			OnImageAreaSelected="OnImageAreaSelectedCallback"
			OnImageAreaDeSelected="OnImageAreaDeSelectedCallback"
			
			WIDTH="100"
			HEIGHT="100"
			PLUGINSPAGE="http://localhost/twain/DynamicWebTWAINPlugIn.exe">
		</EMBED>

		<input type="button" onclick="AcquireImage()" value="AcquireImage" >
		<script>
		function OnPreTransferCallback(){
			// Add your code here
		}
		function OnPostTransferCallback(){
			// Add your code here
		}
		function OnPreAllTransfersCallback(){
			// Add your code here
		}
		function OnPostAllTransfersCallback(){
			// Add your code here
		}
		function OnTransferCancelledCallback(){
			// Add your code here
		}
		function OnTransferErrorCallback(){
			// Add your code here
		}
		function OnMouseClickCallback(sImageIndex){
			// Add your code here
		}
		function OnMouseMoveCallback(sImageIndex){
			// Add your code here
		}
		function OnMouseRightClickCallback(sImageIndex){
			// Add your code here
		}
		function OnMouseDoubleClickCallback(sImageIndex){
			// Add your code here
		}
		function OnTopImageInTheViewChangedCallback(sImageIndex){
			// Add your code here
		}
		function OnImageAreaSelectedCallback(sImageIndex, left, top, right, bottom){
			// Add your code here
		}
		function OnImageAreaDeSelectedCallback(sImageIndex){
			// Add your code here
		}
		function AcquireImage(){
			// scan image
			var plugin = document.embeds[0];
			plugin.AcquireImage();
		}
		</script>
	</body>
</html>

Note:

The PLUGINSPAGE is the absolute URL of DynamicWebTWAINPlugIn.exe for download.
You must include the TYPE attribute in an EMBED tag. If you do not, then there is no way of determining the media type, and so no plug-in loads. Use TYPE to specify MIME type necessary to display the plug-in.
After DynamicWebTWAINPlugIn.exe is downloaded, you need to open it to install the plug-in.
About OnPreTransfer, OnPostTransfer, OnPreAllTransfers, OnPostAllTransfers, OnTransferCancelled and OnTransferError events in the above sample code, please refer to 'Dynamic Web TWAIN ActiveX' section of this documentation.