How to support multi browsers in one scan page for Webcam?

Dynamic Webcam works with all mainstream browsers:

  • ActiveX Edition for Internet Explorer (32-bit & 64-bit) on Windows;
  • Plug-in Edition for Firefox, Chrome, Safari and Opera on Windows;


# Deployment steps

To support all browsers in one scan page, you can detect the browser type and then direct users to the according Dynamic Webcam CAB file (ActiveX edition) and .MSI file (Plug-in Edition)

  1. .For ActiveX Edition, please put .CAB file and .LPK file in your website folder.
  2. For Plugin Edition, please put MSI file (and .XPI if necessary) in your website folder.

    What's the difference between XPI and MSI?

     

    Support Browser (s) 

    Advantage 

    Disadvantage 

     XPI Firefox only Recognize by Firefox;
    End users will be prompted automatically to install the missing plug-in
    Awkward upgrade - end users have to manually remove the old XPI in Firefox, restart Firefox, and then install the new XPI
     MSI Firefox, Chrome, Safari and Opera Support ALL non-IE browsers;
    Easy Upgrade - end users only need to download a newer MSI and install it to finish the ugprade.
    Display a download to prompt end users to manually install missing plug-in

    We recommend you use the MSI file for plugin edition.

  3. Add these two editions on your scan page and call the controls accordingly.

     Where can I find the LPK, CAB and MSI files

# Working Sample

    * Dynamic Webcam online demo

    * Local Demo and Visual Studio Demo (Which can be found in the installation folder of Dynamic Webcam).

# Code snippet

Below is the code snippet for your reference:

//=======================
< script
type="text/javascript">
<!--
function ExplorerType()
{
        var ua = (navigator.userAgent.toLowerCase());     

        if (ua.indexOf("msie") != -1) return "IE";
}
  
var Webcam;
// Webcam is the parameter name which represents the plug-ins of all three editions, so that you can use the same code for all browsers.

var strObjectPlugin = "";
    strObjectPlugin = " <embed style='display:inline' id='mainDynamicWebcamnotIE' type='Application/DynamicWebcam-Plugin'";
       
strObjectPlugin += "
pluginspage='DynamicWebcam.xpi'></embed>";
    
    var strObjectActiveX = "";
   
strObjectActiveX = "   <param name='_cx' value='3784' />";
    strObjectActiveX += "    <param name='_cy' value='4128' />";
    strObjectActiveX += "    <param name='JpgQuality' value='80' />";
    strObjectActiveX += "    <param name='Manufacturer' value='DynamSoft Corporation' />";
   
strObjectActiveX += "    <param name='ProductFamily' value='Dynamic Webcam' />";
    strObjectActiveX += "    <param name='ProductName' value='Dynamic Webcam' />";
    strObjectActiveX += "    <param name='VersionInfo' value='Dynamic Webcam 8.0' />";
   
strObjectActiveX += "    </object>";
   
if (ExplorerType() == "IE" && navigator.userAgent.indexOf("Win64") != -1 && navigator.userAgent.indexOf("x64") != -1)
{
        strObjectActiveX = "<object id='mainDynamicWebcamIE' codebase='DynamicWebcam/DynamicWebcamx64.cab#version=8,0' class='divcontrol' " + "classid='clsid:A65BC1E1-B2CE-4251-A0CB-721AC7E02B52' viewastext> " + strObject;
        var objDivx64 = document.getElementById("maindivIEx64");
       
objDivx64.style.display = "inline";
        objDivx64.innerHTML = strObject;
        var obj = document.getElementById("maindivPlugin");
       
obj.style.display = "none";
       
Webcam = document.getElementById("mainDynamicWebcamIE");
    }//if IE 64 bit, direct users to use DynamicWebcamx64.cab

    else if (ExplorerType() == "IE" && (navigator.userAgent.indexOf("Win64") == -1 || navigator.userAgent.indexOf("x64") == -1))
{
        strObjectActiveX = "<object id='mainDynamicWebcamIE' codebase='DynamicWebcam/DynamicWebcam.cab#version=8,0' class='divcontrol'" + "classid='clsid:A65BC1E1-B2CE-4251-A0CB-721AC7E02B52' viewastext> " + strObject;
        var objDivx86 = document.getElementById("maindivIEx86");
       
objDivx86.style.display = "inline";
        objDivx86.innerHTML = strObject;
        var obj = document.getElementById("maindivPlugin");
       
obj.style.display = "none";
       
Webcam = document.getElementById("mainDynamicWebcamIE");
    }//if IE 32 bit, direct users to use DynamicWebcam.cab

    else
{
        var objDivFF = document.getElementById("mainControlInstalled");
       
objDivFF.innerHTML = strObjectPlugin;
        var obj = document.getElementById("maindivIE");
       
obj.style.display = "none";
        var obj = document.getElementById("maindivPlugin");
       
obj.style.display = "inline";
       
Webcam = document.getElementById("mainDynamicWebcamnotIE");
    }

//If the control is not installed, direct the users to download and install the control.
    if (Webcam.ErrorCode != 0)
{
        if (ua.match(/chrome\/([\d.]+)/) || ua.match(/opera.([\d.]+)/) ||
ua.match(/version\/([\d.]+).*safari/))
{
           
document.getElementById("mainControlNotInstalled").style.display = "inline";
           
document.getElementById("mainControlInstalled").style.display = "none";
        }
   
}
</script>

// HTML
<div id="dwtcontrol">
<div id="maindivPlugin" >

<div style="display:none;" id="mainControlNotInstalled">
<table id="maintblcontrolnotinstalled"
class="divcontrol">
    <tr>
   
<td
style="text-align:center;vertical-align:middle;">
       
<a href="DynamicWebcam/DynamicWebcamPlugInTrial.msi"><strong>Download and install the Plug-in Here</strong></a><br/>
        After the installation, please restart your browser.
   
</td>
   
</tr>
</table>
</div>

<div id="mainControlInstalled">

</div>

</div>

<div id="maindivIE">
<object classid="clsid:5220cb21-c88d-11cf-b347-00aa00a28331" style="display:none;">
    <param name="LPKPath" value="DynamicWebcam/DynamicWebcam.lpk" />
</object>
<div id="maindivIEx86" >                                   

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

</div>
</div>
</div>

//=======================