In
some scenarios, such as Visitor Monitoring module for a government department
or Patient Tracking module for a hospital, we may need to take a snap of human
faces, patient charts, user IDs and so on and then upload them to a central
server. How do we implement this for a web application?
How to interact with webcams connected to a computer in
browsers?
It's
not possible to access a webcam using JavaScript directly. However, it's possible
through the following options:
In
this article, we are going to take a look at the 3rd option –
ImageCapture Suite. Unlike in the first 2 options where developer needs to deal
with camera initialization, image capturing, editing encoding and uploading
separately, everything is encapsulated in ImageCapture Suite.
Introduction to the Webcam Library
Dynamsoft’s
ImageCapture Suite is a browser plugin which enables users
to acquire images from a webcam, edit and then upload/save them to a database,
web server or local disk. Also, it can capture a live video stream into a
container and grab a snapshot to be exported to a file/binary. The plugin works with all webcams that are compatible with Windows Image
Acquisition (WIA) and USB video device class (UVC).
Three
editions are provided for different browsers: ActiveX Edition for IE and Plugin and Mac Edition for Firefox, Chrome, Safari on Windows and Mac OS X.
Client Side
|
Server Side
|
JavaScript, VBScript, HTML
|
ASP.NET, PHP, JSP, ASP, VB.NET, etc.
|
ActiveX Edition - x86 x64
Plugin Edition - on Windows Mac Edition - on Mac OS X
|
IIS, Tomcat, Apache and more
|
Here
you can see a working application: http://www.dynamsoft.com/Demo/Webcam/online_demo_scan.aspx
Key Features >>
Sample Code
Client-side JavaScript
1. Initialize ImageCapture Suite
You can find the related ImageCapture Suite files for deployment under the Resources folder in the installation folder.
- ImageCaptureSuite.cab
- ImageCaptureSuitex64.cab
- ImageCaptureSuitePlugIn.msi
- ImageCaptureSuiteMacEditionTrial.pkg
ActiveX
Edition
There are 32-bit and 64-bit CAB files for corresponding version of IE. Choose the proper one according to the needs. The trial and full versions of ImageCapture Suite use different class-ids.
objString = "<object id='" + DW_ObjectName + "' style='width:" + DW_Width + "px;height:" + DW_Height + "px'";
if (DW_InWindowsX86)
objString += "codebase='" + DW_CABX86Path + "#version=" + DW_VersionCode + "' "; else
objString += "codebase='" + DW_CABX64Path + "#version=" + DW_VersionCode + "' ";
var temp = DW_IsTrial ? DW_TRAILCLASSID : DW_FULLCLASSID;
objString += " classid='clsid:" + temp + "' viewastext>";
objString += " <param name='Manufacturer' value='DynamSoft Corporation' />";
Plug-in & Mac Edition
objString = " <embed id='" + DW_ObjectName + "'style='display: inline; width:" + DW_Width + "px;height:" + DW_Height + "px' id='" + DW_ObjectName + "' type='" + DW_MIMETYPE + "'";
objString += " OnPostTransfer='Dynamsoft_OnPostTransfer' OnPostAllTransfers='Dynamsoft_OnPostAllTransfers'";
objString += " OnMouseClick='Dynamsoft_OnMouseClick' OnPostLoad='Dynamsoft_OnPostLoadfunction'";
objString += " OnImageAreaSelected = 'Dynamsoft_OnImageAreaSelected'";
objString += " OnImageAreaDeSelected = 'Dynamsoft_OnImageAreaDeselected'";
objString += " OnMouseDoubleClick = 'Dynamsoft_OnMouseDoubleClick'";
objString += " OnMouseRightClick = 'Dynamsoft_OnMouseRightClick'";
objString += " OnTopImageInTheViewChanged = 'Dynamsoft_OnTopImageInTheViewChanged'";
objString += " OnGetFilePath='Dynamsoft_OnGetFilePath'";
if (DW_InWindows)
objString += " pluginspage='" + DW_MSIPath + "'></embed>";
else
objString += " pluginspage='" + DW_PKGPath + "'></embed>";
2. Video preview
DWObject.IfShowUI = document.getElementById("ShowUIForWebcam").checked;
3. Take a photo
if (DW_InWindows) {
DWObject.SelectMediaTypeByIndex(document.getElementById("MediaType").selectedIndex);
DWObject.SelectResolutionForCamByIndex(document.getElementById("ResolutionWebcam").selectedIndex);
DWObject.IfDisableSourceAfterAcquire = true;
DWObject.AcquireImage();
4. Edit
ImageCapture Suite supports basic image
editing features including Rotate, Crop, Mirror, Flip, Erase and
ChangeImageSize. It also supports multiple images selection, switching images,
zoom in/zoom out.
5. Upload
DWObject.HTTPUploadThroughPostEx(
strHTTPServer,
DWObject.CurrentImageIndexInBuffer,
strActionPage,
uploadfilename,
strImageType
) ;
Server side code
ImageCapture Suite supports ASP.NET, PHP, JSP, ASP, VB.NET, etc. to call functions on the
server side. The followings are some examples for C# ASP.NET.
Captured
pictures can be uploaded to file system or a database of a remote server. Later
they can be downloaded to the client side for viewing, editing and so on.
1. Save to
database
This is
a sample for saving images to database using C#:
<%@ Page Language="C#" %>
<%
try
{
String strImageName;
int iFileLength;
HttpFileCollection files = HttpContext.Current.Request.Files;
HttpPostedFile uploadfile = files["RemoteFile"];
strImageName = uploadfile.FileName;
iFileLength = uploadfile.ContentLength;
Byte[] inputBuffer = new Byte[iFileLength];
System.IO.Stream inputStream;
inputStream = uploadfile.InputStream;
inputStream.Read(inputBuffer,0,iFileLength);
String strConnString;
strConnString = "Data Source=localhost\\sqlexpress;Initial Catalog=DemoWebcam;User ID=id;Pwd=pwd;";
System.Data.SqlClient.SqlConnection sqlConnection = new System.Data.SqlClient.SqlConnection(strConnString);
String SqlCmdText = "INSERT INTO tblWebcam (strImageName,imgImageData) VALUES (@ImageName,@Image)";
System.Data.SqlClient.SqlCommand sqlCmdObj = new System.Data.SqlClient.SqlCommand(SqlCmdText, sqlConnection);
sqlCmdObj.Parameters.Add("@Image",System.Data.SqlDbType.Binary,iFileLength).Value = inputBuffer;
sqlCmdObj.Parameters.Add("@ImageName",System.Data.SqlDbType.VarChar,255).Value = strImageName;
sqlConnection.Open();
sqlCmdObj.ExecuteNonQuery();
sqlConnection.Close();
}
catch
{
}
%>
Name
this file as SavetoDB.aspx, you can use it the same way as SavetoFile.aspx.
There are many other functions for saving files, like HTTPUploadThroughPostAsMultiPageTIFF
,
HTTPUploadAllThroughPostAsPDF
, HTTPUploadThroughPostAsMultiPagePDF
, etc.
2. Download files from the server
Code
bellow is a sample of downloading image files from your server to the
client-side. You need to pass the filename, extent name and image index to the
program.
<%@ Page Language="C#"%>
<%
System.Web.HttpRequest request = System.Web.HttpContext.Current.Request;
String strImageName;
String strImageExtName;
String strImageID;
strImageName = request["ImageName"];
strImageExtName = request["ImageExtName"];
strImageID = request["iImageIndex"];
String strConnString;
strConnString = "Data Source=localhost\\sqlexpress;Initial Catalog=DemoWebcam;User ID=id;Pwd=pwd;";
System.Data.SqlClient.SqlConnection sqlConnection = new System.Data.SqlClient.SqlConnection(strConnString);
System.Data.SqlClient.SqlCommand sqlCmdObj = new System.Data.SqlClient.SqlCommand("SELECT imgImageData FROM tblWebcam WHERE iImageID= " + strImageID, sqlConnection);
sqlConnection.Open();
System.Data.SqlClient.SqlDataReader sdrRecordset = sqlCmdObj.ExecuteReader();
sdrRecordset.Read();
long iByteLength;
iByteLength = sdrRecordset.GetBytes(0, 0, null, 0, int.MaxValue);
byte[] byFileData = new byte[iByteLength];
sdrRecordset.GetBytes(0, 0, byFileData, 0, Convert.ToInt32(iByteLength));
sdrRecordset.Close();
sqlConnection.Close();
sdrRecordset = null;
sqlConnection = null;
Response.Clear();
Response.Buffer = true;
if(strImageExtName == "bmp"){
Response.ContentType = "image/bmp";
}else if(strImageExtName == "jpg"){
Response.ContentType = "image/jpg";
}else if(strImageExtName == "tif"){
Response.ContentType = "image/tiff";
}else if(strImageExtName == "png"){
Response.ContentType = "image/png";
}else if(strImageExtName == "pdf"){
Response.ContentType = "application/pdf";
}
try{
String fileNameEncode;
fileNameEncode = HttpUtility.UrlEncode(strImageName, System.Text.Encoding.UTF8);
fileNameEncode = fileNameEncode.Replace("+", "%20");
String appendedheader = "attachment;filename=" + fileNameEncode;
Response.AppendHeader("Content-Disposition", appendedheader);
Response.OutputStream.Write(byFileData, 0, byFileData.Length);
}
catch(Exception){
Response.Flush();
Response.Close();
}
%>
Get Samples
To try
out the above mentioned features by yourself, you can download the 30-day
free trial of ImageCapture Suite. The samples can be found in
the installation folder of the SDK.
If you
have any questions, you can contact our support team at support@dynamsoft.com.