Capture Images from Webcam and Upload in a JSP Application

Control a stand-alone web camera or built-in laptop webcam with JavaScript and integrate it into your JSP, ASP.NET, or PHP App

In some scenarios, such as a Visitor Monitoring module for a government department or a 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 in a  JSP Web application? Read more below to find out.

How can I interact with webcams through my browser?

It’s not possible to access a webcam using JavaScript directly. However, it’s possible through the following options:

  • Flash – The web application requests permission to use the camera and the user will be presented with a dialog indicating the site wishes to use the camera. After the user accepts, the application will be able to grab images from the camera. You’ll need to initialize and attach the camera first.
  • HTML5 – Old browser versions don’t support HMTL5. Also, HTML5 only provides basic camera control APIs. Details >>
  • 3rd-Party Web-Based Camera Library

In this article, we are going to take a look at the 3rd option – Dynamsoft Camera SDK. Unlike the first 2 options where a developer needs to deal with camera initialization, image capturing, editing and uploading separately, everything is encapsulated in Dynamsoft Camera SDK.

Introduction to the Webcam API

Dynamsoft Camera SDK is a browser-based camera library which enables users to capture images from a webcam, edit and then upload/save them to a web server or database. Also, it can capture a live video stream into a container and grab a snapshot to be exported to a file/binary. The library works with all cameras that are compatible with USB video device class (UVC).

The camera library works with all major browsers (Internet Explorer, Chrome, Firefox etc.) on Windows.

Client Side Server Side
JavaScript, HTML, HTML5 ASP.NET, PHP, JSP, ASP, etc.

Try an online webcam demo >

Code Snippet

Client-Side Code – JavaScript

  1. Add reference, video and image containers and initialize Dynamsoft Camera SDK.
     <head>
     <script type="text/javascript" src="DCSResources/dynamsoft.camera.config.js">
     <script type="text/javascript" src="DCSResources/dynamsoft.camera.initiate.js"> 
     </head>
    
     <div id="video-container" style="width: 500px; height: 400px; display: inline-block; border: solid 1px gray"> </div>  
     <div id="image-container" style="width: 500px; height: 400px; display: inline-block; border: solid 1px gray"> </div>
    
     <script type="text/javascript">
     dynamsoft.dcsEnv.init('video-container', 'image-container', onInitSuccess, onInitFailure);
     function onInitSuccess(videoViewerId, imageViewerId) {
     dcsObject = dynamsoft.dcsEnv.getObject(videoViewerId);
     dcsObject.camera.playVideo(); 
     }
     </script>
    
  2. Take a photo
     <script type="text/javascript">
     //capture an image
     function acquireImage() {
     if (dcsObject) {
     dcsObject.camera.captureImage('image-container');
     }
     }
     </script>
    
  3. Edit the image.
    Dynamsoft Camera SDK 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.
  4. Upload images to server side
     <script type="text/javascript">
     function onBtnUploadClick() {   
     var imageViewer = dcsObject.getImageViewer('image-container');
         var counter,
             url = getCurPagePath() + 'ActionPage.jsp',
             fileName = “test.jpg”,
             imageType = imageViewer.io.EnumImageType.JPEG;
             imageIndexArray = [0];
    
         imageViewer.io.setHTTPFormFields({ "fileName": fileName });
         imageViewer.io.httpUploadAsync(url, imageIndexArray, imageType, onUploadSuccess, onUploadFailure);
    
     } 
     </script>
    

Server-Side Code – JSP

Dynamsoft Camera SDK supports ASP.NET, PHP, JSP, ASP etc. to call functions on the server side. Captured images can be uploaded to a remote server or database. Later they can be downloaded to the client side for viewing, editing and so on.

Here is a sample of uploading captured images to a server in JSP.

<%@page import="java.util.*,java.io.File,java.io.FileOutputStream,org.apache.commons.fileupload.FileUpload,org.apache.commons.fileupload.FileItem,org.apache.commons.fileupload.disk.DiskFileItemFactory,org.apache.commons.fileupload.servlet.ServletFileUpload,sun.misc.BASE64Decoder"%>
<%@page contentType="application/json; charset=utf-8" %>
<%@page language="java" %>
<%
    String strJson = "{\"success\":false}";

    try{

        // get more info from: http://commons.apache.org/proper/commons-fileupload/

        DiskFileItemFactory factory = new DiskFileItemFactory();

        ServletContext servletContext = this.getServletConfig().getServletContext();
        File repository = (File) servletContext.getAttribute("javax.servlet.context.tempdir");
        factory.setRepository(repository);

        ServletFileUpload upload = new ServletFileUpload(factory);

        List<FileItem> items = upload.parseRequest(request);
        Iterator<FileItem> iter = items.iterator();

        String fileName = null;
        String tempFileName = null;
        String contentType = null;
        FileItem fileItem = null;

        while (iter.hasNext()) {
            FileItem item = iter.next();
            String fieldName = item.getFieldName();

            if(fieldName.equals("fileName")){
                fileName = item.getString();
            }else if(fieldName.equals("RemoteFile")){
                tempFileName = item.getName();
                contentType = item.getContentType();
                fileItem = item;
            }
        }

        if(fileName == null || fileName.isEmpty()){
            fileName = tempFileName;
        }
        String path = application.getRealPath(request.getServletPath());
        String dir = new java.io.File(path).getParent();
        String filePath = dir + "/UploadedImages/" + fileName;

        File file = new File(filePath);

        if(!file.getParentFile().exists()){
            file.getParentFile().mkdir();
        }
        if(!file.exists()){
            file.createNewFile();
        }
        if(!contentType.contains("text/plain")){
            fileItem.write(file);
        }else{
            String base64Str = fileItem.getString();
            byte[] b = null;
            b = (new BASE64Decoder()).decodeBuffer(base64Str);
            FileOutputStream fileOutStream = new FileOutputStream(file);
            fileOutStream.write(b);
            fileOutStream.flush();
            fileOutStream.close();
        }

        strJson = "{\"success\":true, \"fileName\":\"" + fileName + "\"}";
    }
    catch(Exception ex){
        strJson = "{\"success\":false, \"error\": \"" + ex.getMessage().replace("\\", "\\\\") + "\"}";
    }

    out.clear();
    out.write(strJson);
    out.close();
%>

Try for free

To try out Dynamsoft Camera SDK, you can download a 30-day free trial. You can get sample code from the code gallery.

If you are developing a .NET desktop application, you may check out Dynamic .NET TWAIN, a .NET component for webcams and scanners.

If you are developing a document scanning web application, you may check out Dynamic Web TWAIN, a browser-based scanner programming library.

Subscribe Newsletter

Subscribe to our mailing list to get the monthly update.

Subscribename@email.com