Forget about the browser types

Besides document scanning, editing and uploading, supporting all mainstream browsers is another nice feature of Dynamic Web TWAIN. In this article, I’ll share with you on how to solve the browser compatibility issue using the image scanning SDK.

Browser Market Share

It’s always a pain for web application developers to learn the browser usage of end users. Whenever creating a web application, developers need to consider the browser compatibilities, and consequently need to find out the browsers that are being used by their customers.

I googled the browser market share online, and found the following figure from chitika’s website. If you’d like to learn more about the information, you can visit chitika’s website.

Complicated!!!??? It’s just complicated and time consuming to learn all these basic information from the customers. It would be ideal if there is a solution that lets us focus on the main functions regardless of the browser types. 

Browser Market Share

Make your Web Scanning App Support Different Browsers

Dynamic Web TWAIN, a TWAIN scanning SDK, provides 3 different editions to support different browsers and OSes.

ActiveX Edition: Supports 32-bit & 64-bit IE on Windows

Plug-in Edition: Supports Firefox, Chrome, Safari and Opera on Windows

Mac Edition: Supports Firefox, Chrome, Safari and Opera on Mac OS

Try it online

You can play with the online demo to get a rough idea of how it works. The demo supports images scanning from browsers including IE (both 32-bit & 64-bit), Firefox, Chrome, Safari and Opera.

Dynamic Web TWAIN Online Demo

You can customize the functions and the layout based on the online demo (or even developing from scratch) according to your needs.

Download Dynamic Web TWAIN 30-day Free Trial and Build Your Own Web Scanning App

How does it work with different OSes/browsers?

Code snippet: The sample code below shows you how to detect the browser being used and call the corresponding edition to implement the image acquisition.

//In HTML, you need to define the place holders for Dynamic Web TWAIN: 

<div id="dwtcontrol">
<div id="maindivPlugin" >
<div style="display: none;" id="mainControlNotInstalled">
<!-- Display a link for the .msi when the Plug-in is not installed-->
<table id="maintblcontrolnotinstalled" class="divcontrol">
    <tr>
    <td style="text-align: center; vertical-align: middle;">
        <a href="DynamicWebTWAIN/DynamicWebTWAINPlugIn.msi"><strong>Download and install the Plug-in Here</strong></a><br />
        After the installation, please restart your browser.
    </td>
    </tr>
</table>
</div> 

<div style="display: none;" id="MACmainControlNotInstalled">
<!-- Display a link for the .pkg when the Mac edition is not installed-->
<table id="MACtblmainControlNotInstalled" class="divcontrol">
    <tr>
    <td style="text-align: center; vertical-align: middle;">
        <a href="DynamicWebTWAIN/DynamicWebTWAINMacEditionTrial.pkg"><strong>Download and install the Plug-in Here</strong>
</a><br />
        After the installation, please quit and restart your browser. <br />
        If you are using Safari 5.0, you need to run the browser in 32-bit Mode</a>.<br />
    </td>
    </tr>
</table>
</div>

<div id="mainControlInstalled">
<!-- Place holder for the Plug-in -->
</div>
</div> 

<div id="maindivIE">
<!-- Place holder for the ActiveX, the below object for the LPK (License) is necessary-->
<object classid="clsid:5220cb21-c88d-11cf-b347-00aa00a28331" style="display:none;">
    <param name="LPKPath" value="DynamicWebTWAIN/DynamicWebTwain.lpk" />
</object>

<div id="maindivIEx86" >                                   
</div>
<div id="maindivIEx64" >                                  
</div>
</div>
</div>

//In JavaScript: 

var WebTWAIN;
var OSType;
// WebTWAIN is the parameter name which represents Dynamic Web TWAIN of all three editions. This way you can use the same code for all browsers.

//Detect whether the browser is IE.

function ExplorerType() {
    ua = (navigator.userAgent.toLowerCase());
    if (ua.indexOf("msie") != -1) {
        return "IE";
    }
    else {
        return "notIE";
    }
}

function Pageonload(){//Detect the browser when the page first loads
    OSType = "windows";
    if (navigator.userAgent.indexOf("Macintosh") != -1) {
        OSType = "mac";
    }
    var strObjectFF = "";
    strObjectFF = " <embed style='display: inline' id='mainDynamicWebTWAINnotIE'
    type='Application/DynamicWebTwain-Plugin'";
    if (OSType == "mac") {
        strObjectFF += "pluginspage='DynamicWebTWAIN/DynamicWebTWAINMacEditionTrial.pkg'></embed>";
        //For browsers on Mac, use the PKG
    }
    else {
        strObjectFF += "pluginspage='DynamicWebTWAIN/DynamicWebTWAINPlugIn.msi'></embed>";
        //For non-IE browsers on PC, use the MSI
    }
    var strObject = "";
    strObject += "   </object>";
    if (ExplorerType() == "IE" && navigator.userAgent.indexOf("Win64") != -1 && navigator.userAgent.indexOf("x64") != -1) {
        //For 64-bit IE, use the x64 CAB
        strObject = "<object id='mainDynamicWebTwainIE' codebase='DynamicWebTWAIN/DynamicWebTWAINx64.cab#version=8,0'" +
        "classid='clsid:FFC6F181-A5CF-4ec4-A441-093D7134FBF2'> " + strObject;
        //Display the right Plug-in and hide others

        var objDivx64 = document.getElementById("maindivIEx64");
        objDivx64.style.display = "inline";
        objDivx64.innerHTML = strObject;
        var obj = document.getElementById("maindivPlugin");
        obj.style.display = "none";
        WebTWAIN = document.getElementById("mainDynamicWebTwainIE");
    }
    else if (ExplorerType() == "IE" && (navigator.userAgent.indexOf("Win64") == -1 || navigator.userAgent.indexOf("x64") == -1)) {
        //For 32-bit IE, use the normal CAB
        strObject = "<object id='mainDynamicWebTwainIE' codebase='DynamicWebTWAIN/DynamicWebTWAIN.cab#version=8,0'" +
        "classid='clsid:FFC6F181-A5CF-4ec4-A441-093D7134FBF2'> " + strObject;

        //Display the right Plug-in and hide others        
        var objDivx86 = document.getElementById("maindivIEx86");
        objDivx86.innerHTML = strObject;
        objDivx86.style.display = "inline";
        var obj = document.getElementById("maindivPlugin");
        obj.style.display = "none";
        WebTWAIN = document.getElementById("mainDynamicWebTwainIE");
    }
    else {
        //Display the right Plug-in and hide others
        var objDivFF = document.getElementById("mainControlInstalled");
        objDivFF.style.display = "none";
        objDivFF.innerHTML = strObjectFF;
        var obj = document.getElementById("maindivIE");
        obj.style.display = "none";
        var obj = document.getElementById("maindivPlugin");
        obj.style.display = "inline";
        objDivFF.style.display = "inline";
        WebTWAIN = document.getElementById("mainDynamicWebTWAINnotIE");
    }

    //Detect Dynamic Web TWAIN when it is loaded (after 0.5 sec)

    seed = setInterval(ControlDetect, 500);
}

function ControlDetect() {
    if (WebTWAIN.ErrorCode == 0) {//Dynamic Web TWAIN is installed and ready to use
        clearInterval(seed);
    }
    else {
        if (OSType == "mac") {

            //Dynamic Web TWAIN Mac edition is not installed, display the download link for the pkg.

            document.getElementById("MACmainControlNotInstalled").style.display = "inline";
            document.getElementById("mainControlInstalled").style.display = "none";
        }
        else if (ua.match(/chrome\/([\d.]+)/) || ua.match(/opera.([\d.]+)/) || ua.match(/version\/([\d.]+).*safari/)) {

            //Dynamic Web TWAIN Plug-in edition is not installed, display the download link for the msi.
            //Please NOTE that Firefox doesn't need to display this link because it will prompt for the installation

            document.getElementById("mainControlNotInstalled").style.display = "inline";
            document.getElementById("mainControlInstalled").style.display = "none";
        }
    }
}

Deployment

Assuming you are using the sample code provided in this article, you can copy the following files to the DynamicWebTWAIN folder on your web server.

DynamicWebTWAIN.cab

DynamicWebTWAINx64.cab

DynamicWebTWAINPlugIn.exe

DynamicWebTWAINMacEditionTrial.pkg

All these files can be found in the installation folder of Dynamic Web TWAIN.

For the ActiveX edition, you also need to generate a LPK file and copy it to the same folder (DynamicWebTWAIN)

How to generate a LPK file

If you have any tips to share with us, please feel free to add your comments below.