Take a Photo from a Desktop Webcam and Upload in a Web Browser

Control web cameras or the built-in laptop webcams inside IE, Firefox and Chrome with JavaScript

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 only. 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.
    First, you’ll need to initialize and attach the camera
  • HTML5 – The biggest hurdle is only a few browser versions support HTML 5. Details >>
  • 3-rd party browser plugin – Internet Explorer can interact with an imaging peripheral through an ActiveX control. Firefox and Chrome can do the same through a plugin of Netscape Plugin Application Programming Interface (NPAPI).

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

Introduction to the Webcam API

Dynamic Webcam SDK 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).

Two editions are provided for different browsers: ActiveX Edition for IE and Plugin Edition for other browsers on Windows OS.

Client Side Server Side
JavaScript, VBScript, HTML ASP.NET, PHP, JSP, ASP, VB.NET, etc.
ActiveX Edition – x86 x64
Plugin Edition – on Windows
IIS, Tomcat, Apache and more 

 

Here you can see a working application:
http://www.dynamsoft.com/demo/dws/online_demo_webcam.aspx

Key Features >>

Sample Code

Client-side JavaScript

1. Initialize Dynamic Webcam SDK

ActiveX Edition

Firstly, copy DynamicWebcam.cab to the web server. There are 32-bit and 64-bit CAB files. Choose the proper one according to the needs. The trial and full versions of Dynamic Webcam use different class-ids.

DynamicWebcam.cab can be found in the installation folder of Dynamic Webcam SDK.

For the TRIAL version of Dynamic Webcam, insert the following code in your JS code:

<object classid="clsid:A65BC1E1-B2CE-4251-A0CB-721AC7E02B52" id="DynamicWebcam1" width="143" height="156"
CodeBase = "DynamicWebcam.cab#version=8,0">
</object>

Plug-in Edition

Plug-in edition can be used in Gecko-based browsers including Firefox, Chrome, Safari & Opera on PC. Please copy DynamicWebcam.msi to the web server.

Read more

Using webcam with C# web applications

Control web cameras from browsers with Dynamic Webcam API

Introduction to the Webcam Library

Dynamic Webcam SDK 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. With the webcam API, software developers can integrate image capture, processing and webcam control into browsers.

The plugin works with all webcams that are compatible with Windows Image Acquisition (WIA) and USB video device class (UVC).

It can be developed as a browser-based webcam plug-in or with ActiveX®. Two editions are provided for different browsers: ActiveX Edition for IE and Plugin Edition for other browsers on Windows OS.

 Key Features

  • Capture images & live video streams from UVC compatible webcams.
  • Edit scanned images: rotate, crop, zoom, and etc.
  • Support both GUI and non-GUI image editing.
  • Supports basic image editing features including Rotate, Crop, Mirror, Flip and Erase, etc.
  • Supports Zoom In/Zoom Out.
  • Built-in JPEG, PNG, PDF and TIFF encoders enable you to compress the acquired images.
  • Save/Upload images to your local folders, FTP Sites, Web Servers, databases etc.
  • Image format supported: BMP, JPEG, PNG, (Multi-page) TIFF and (Multi-page) PDF files.
  • Download/Upload image(s) through HTTP/HTTPS or FTP/FTPS.
  • Support SSL for FTP/HTTP uploading/downloading.

Read more

Webcam and Annotation With HTML5

Nowadays, Webcam is widely used for both personal and business. It is simple, cheap, and yet powerful for image acquisition.

Some developers prefer to create their own webcam libraries. In this case, you need to learn technologies like TWAIN, WIA and/or DirectShow.

Note: the WIA and DirectShow APIs are recommended to develop a webcam SDK. TWAIN, however, is a good option for scanners.

However, due to the complexity of learning the APIs, as well as the technologies such as COM interfaces, it’s not an easy task for developers to create and embed Webcam SDK into their web applications. There are two options to simplify the whole process:

  • Use a third-party plug-in/add-on to access and control the webcams, such as Dynamic Webcam SDK, Flash, Silverlight, etc.
  • Adopt the new technology – HTML5.

I will talk more about the second option in this article.

Webcam devices will be supported by the new video element and the getUserMedia API in HTML5. This means we can capture video streams and images from Webcam devices with just a few lines of JavaScript & HTML code, and the end users do not need to install anything for the browsers.

Information you need to know:

  • HTML5 is not released yet. So this article is for early experimentations and it is not recommended to use the code snippet in the article for actual implementations.
  • Currently only the following browsers support getUserMedia and WebGL:
    • Google Chrome (Version 21 and above) – Recommended for testing.
    • Firefox (Nightly Build, version 17 and above)
    • Opera (Version 12 and above, need to enable WebGL in opera:config)

Access the Webcam

Thanks to Wes Bos. He posted a wonderful article on how to access the Webcam. If you are new to HTML5, I suggest you read this article first (you can skip the content for ccv and scripts.js).

Basically, there are 2 steps:

1. Getting the Webcam stream

We use the getUserMedia API to get the stream

navigator.getUserMedia_ = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; //Get the API according to the browser.navigator.getUserMedia_({ video: true, audio: false }, success, error);

Unfortunately, different browsers have different names for the getUserMedia API. So we have to check and pick the correct one in the first step.

When we call the API, video:true indicates that we want video access and audio:false indicates that we don’t want audio. Error function will be called when the stream is not accessible.

Success is the function to receive the stream:

function success(stream) {
var domURL = window.URL || window.webkitURL;
//start streaming via the video element
document.getElementById(‘myVideo’).src =
domURL ? domURL.createObjectURL(stream) : stream;
}

When you access the page, the browser will ask for the permission to use your webcam. If you click Deny, the web application cannot access the Webcam and it will trigger the error function.

html5webcam

2. Output to canvas

We have the video stream for the Webcam and now we can output the images to canvas element.

var video = document.getElementById(‘myVideo’);
var canvas = document.getElementById(‘myCanvas’);
var ctx = canvas.getContext(‘2d’);
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

In the above code, we only capture an image from the video and draw on the canvas. So the question will be: how can we output the video? Well, you can set an interval and draw the image every few milliseconds, or, you can use the requestAnimationFrame API to perform an animation from the browser level. (You will find the sample in the attached source code).

Annotation

Annotation is always important for image processing. We can use it to mark or highlight some important information, add some notes, hide certain area, etc… If you have checked the face detection demo from Wes Bos, you will find it also useful for entertainment J

Since we have the canvas object, we can actually use the context of the canvas object to draw lines, arc, text or image on the canvas. It is pretty much just a simple annotation design (we won’t discuss the advanced annotation functions in this article).

For example, let’s draw a text on the video:

var canvas = document.getElementById(‘myCanvas’);
var ctx = canvas.getContext(‘2d’);
ctx.font = “10px sans-serif”;
ctx.strokeText(“Hello World”, 0, 0); //output the text to (0,0)

Note: this code should be added into the repaint loop. Otherwise the text will be lost in the next repaint operation.

You can find a complete annotation sample in the source code .

Capture and save image from Webcam

Canvas object offers a method to save the current display to an image element. This allows us to capture and save both the image and the annotations.

var img = canvas.toDataURL(“image/png”);
window.open(img, “_blank”);

You can open a new window to display and save the captured image, or you can use the img element to hold the image.

A complete sample for Webcam and annotation with HTML5

Please test the web page as a web application (place the page in IIS/Apache/Tomcat/etc… and access the page via HTTP address). If you just double click the HTML file and run it from local file system, the browser will not be able to access the webcam resources.

Google Chrome Version 21 and above is recommended for the testing.

Download sample (source code included)

Conclusion:

HTML5 provides a simple way for developers to create a webcam SDK. As you can see from the sample, we can easily enable our applications to interact with the webcams. However, this method also brings up some questions:

  1. Compatibility with the browsers.
  2. Security (since the app will access device directly)

Please let me know if you have the same concerns. Any comments are welcome.