Interfacing with the end-user's scanner from a webapp (web/scanner integration)

Question

Consider the following scanning procedure in a typical document handling webapp:

• The user scans a document using a scanner connected to his/her computer
• The scanned image is saved locally on the user's computer as a BMP/JPG/TIF/PNG file
• The user hits a file upload "Browse.." button in the web application
• The user is presented with a file dialog which he/she uses to locate the scanned image
• The user hits "Upload image" and the scanned image is uploaded to the server where it is stored

This process is quite complicated and I'd like to reduce the number of steps in order to make the process more user friendly/fool proof. Under ideal circumstances the above steps would be replaced with only one step in which the procedure initiate document scanning, complete document scanning and upload resulting image is automatically triggered from the webapp when clicking say "Scan and upload". Unfortunely it seems like the state of "web/scanner integration" is quite poor so this might be utopia.

How would you tackle this problem? More specifically, how would you go about reducing the number steps involve in the use-case described?

Avigation

this would largely depend on the scanner(s) in question, no? And why is the current process bad? – Duston

warren: Each user has his/her own scanner. The current process is bad because it involves a lot of steps, some of which are technically redundant. – Avigation

DCU has a Java applet meant to handle this for their "PC Deposit" home check scanning system. It doesn't seem to support my scanner, but it might be something to check out. – Wardlaw

Answer 1

If your target audience is running Windows and IE, and you don't mind spending a few $$, Atalasoft has some components that will do just what you're looking for.

Halona

I am from Atalasoft. We are publishing a CodeProject next week on this exact issue -- would happily send you the doc if you email me: lou -dot- franco -at- atalasoft.com (replace -dot- and -at-). – Isosceles

For cross platform support on Windows and Mac OS X, you may also consider Dynamic Web TWAIN. – Precious

Answer 2

Well, two years have passed, so here's an update on the state of the art for those just joining us.

Both Dynamsoft and Atalasoft have multi-browser web-scanning toolkits which are compatible with any server-side stack. Both require the user to install an ActiveX (in IE) or an NPAPI plugin (Chrome, Firefox, etc.) to get access to the scanner via the TWAIN API.

Obviously if you have the time or a limited budget, you can create your own plugin. I heartily recommend the FireBreath plugin framework, and any TWAIN library rather than writing your own TWAIN code.

Once the ActiveX or plugin is installed, the rest of the work is a combination of javascript & HTML on the client, and some kind of handler on the server to accept and process the incoming image, which can be made to look just like a multipart form submit with an attached file.

I recommend doing the image upload in javascript using AJAX, because it is then part of the same browser 'session' as the web page, and it inherits the browser's proxy settings, session cookies and server-side authentication. I don't know about Dynamsoft's control, the Atalasoft toolkit includes such AJAX uploading. The image(s) are handed from the plugin to the javascript as a base64-encoded string, so no local file is actually created.

Disclaimer: I work on Atalasoft's WingScan web-scanning toolkit.

Dowry

Answer 3

I actually saw someone at the bank do this while setting up my account and I was totally amazed. Bank in question was using Windows and IE, I assume your in an equally controlled environment. I think the bank used a combination of a custom/ predictable scanner driver and an ActiveX control.

A page loaded which said "Open the scanner" the staff member popped the document in and hit Scan on the webpage, then the page changed to say Scanning, then it showed the scanned document on the web page for the staff member to Approve. I can only assume that the scanner driver send the image to a certain location and the active X control was polling for it to appear, once it appeared it showed the image on screen, once the staff member had approved it the active x uploaded it in the background. She opened the next page and carried on with the rest of the process.

God knows how they made all that tech work but it can be done.

Excrescence

Answer 4

Silverlight 4 is coming out soon. It is supposed to have the ability to interact with COM objects on the user's computer (provided they are running Windows). In theory you call WIA methods from your Silverlight web page.

Gapes

Answer 5

We implemented a solution to implement Remote Deposit for a bank. It works only in IE. A winforms dll was created that interfaces with LeadTools TWAIN dll. Leadtools TWAIN dll abstracts all the TWAIN minutae. This approach is slighly better than using an ActiveX control. .NET Framework would be needed on client. The scanned images are posted back to a hidden variable on the page and are processed on the server.

Tailpiece

Answer 6

Hmm, I've always wanted to look at a scanned file before I did anything with it, but I suppose that depends on your scanner and how much quality you need.

If the goal is to "automate the scanning and uploading process" as opposed to "write a web app", I'd write an AutoIt script to control the existing scanner software and a simple ftp program.

Veterinary

I'm afraid requiring the user to install and use AutoIt is probably more complicated than leaving the procedure as it currently is. – Avigation

AutoIt scripts compile into an exe, so there's nothing to install other than copying or downloading the exe to their computer. Using it could be as simple as just clicking on the file (or a shortcut to it). – Veterinary

Answer 7

The option most likely to remove the most steps, would probably be writing a customized scan utility that the user would download and run on their local machine.

SANE or TWAIN would handle getting the scanned image. cURL could than handle uploading the image to your web app. To make things even easier for the end user, I would use something like a Comet connection to update the web page when the file was available.

If that isn't an option, you might look into seeing what options your users will likely have using their scanners software. I believe many programs now support scanning to email or ftp.

The solution I have used for an intranet app, using multifunction scanner/copiers was to scan to an SMB share that the web server had access to. The user just goes to the copier scans to the share and when they get back to their desk, they go to the new scans page which shows a list of all the new unprocessed files.

Overstay

Answer 8

Since your audience is controlled environment, You can write your own browser extension/program based on WIA/TWAIN that does the scanning. If you choose browser extensions such as BHO/ActiveX/XPCOM, etc, you need get the user's permission to install your extension. If you choose to write a program you may need web deployment technologies like ClickOnce or Java Web Start to be launched from web.

Interfacing TWAIN is a pain on Windows. Complexity aside, you have to display some GUI written by different scanner driver developers. It may be the only way to support old scanners or features not exposed via other interfaces like full-speed multipage scans from a document feeder.

Microsoft's WIA makes interfacing with scanner much easier with a scripting object model, however scanner-specific features are not available and some old scanners do not support the interface.

After scanning you can call a web service to notify the server and the web page can refresh periodically to check new images.

Exhaustless

Answer 9

We have done something similar. we used a command-line TWAIN program (http://www.burrotech.com/quickscan.php). $$ $49

1) We developed a small .Net application to run the QuickScan program as a shell command.
2) The command was assigned to the Scan button.
3) Once the user presses on the scan button, a prompt will appear to enter the file name. The user saves the transaction Id as the file name.
4) Another .Net application (or maybe the same mentioned before) will read this file and upload it into database considering that the filename is the transaction ID.

Worked like a warm knife in butter!

You can try displaying the transaction ID into IE, user to select the ID then presses Scan. Your application will read the SELECTED text and save the file using the SELECTED text as the file name. We havne't tried it but it should work.

Brawner

Answer 10

It is only utopia if you think that web applications are limited to web browsers, in fact, web applications can include a lot of different technologies, besides HTML and Javascript.

The cool way of solving that problem -- in fact, I already used that for some usbserial devices -- is to implement your application using SOAP+XMPP. You can do that in Perl by using XML::CompileX::Transport::SOAPXMPP, Catalyst::Engine::XMPP2, Catalyst::Controller::SOAP and Catalyst::Model::SOAP.

The interesting thing about using XMPP is that it simplifies the management of addressing, since you use the JID (Jabber ID) to look for the software agent, not some host+port addressing schema. The second interesting part of using XMPP is to more easily support the server pushing information to the client.

But if you don't want to handle XMPP you still can do the same thing with a lightweight embedded http server -- HTTP::Server::Simple, in Perl -- and somehow register the current scanner address in the server so it can call back.

And a last option, which is not so cute, is to have the software agent polling the server to see when there is a "scan document and upload" order for that specific machine and realize that operation when that is present.

In summary, having a local software agent to interact with the local hardware doesn't make your webapp less "web", as long as you use web standards -- like XML, SOAP and others -- to perform that communication.

Damocles

Daniel, I'm not sure I understand exactly what your suggestion is. Is it that the end-user should install a Perl application on his/her local computer and have it poll the webserver for scan jobs? – Avigation

Yes, I'm suggesting the end-user to install an application (Perl was just an example here) and have it to one of: 1) use XMPP to receive a request from the server 2) keep a small http server open and register itself on the server to receive a callback http call. 3) keep polling the server to see when there's a scan order specific to that scanner. – Damocles

Answer 11

You can put a Java applet in your website. This can access the scanner and send the data via REST to your web server.

Gizela

Please elaborate - which API would the Java applet use? Does an untrusted applet really have access to the scanner? – Avigation

The applet would have to be trusted. There is no way to do this in a browser without the user accepting some kind of trust elevation. – Isosceles