Using JavaScript Camera SDK to Capture and Upload Images

Dynamsoft Camera SDK allows developers to build web camera apps with pure HTML, CSS, and JavaScript. In most cases, front-end programming skill is enough. Occasionally, you may want to add some server-side functionalities, such as file uploading and processing. In this article, let’s see how to upload captured images from within web browsers to the server using JavaScript camera APIs and Node.js.

Read more

Node.js Barcode Scanner with UVC Camera for Raspberry Pi

Raspberry Pi has been widely used in industrial environments. For instance, you can make a barcode scanner with Raspberry Pi and camera. This article will be useful for developers who want to create Node.js barcode reader applications for IoT devices. I will share how to use Dynamsoft barcode SDK for ARM, build Node.js C++ addon, as well as create a simple barcode application in JavaScript.

Read more

C# Camera API for Getting Video Frame

If you have a USB camera, how can you build a simple C# camera application on Windows 10? There are three options:  WIA (Windows Imaging Acquisition), DirectShow and MediaCapture. After trying some sample code that downloaded from CodeProject and GitHub, I got the conclusion: 1. WIA is not good because it does not support my webcam.  2. DirectShow can work well, but there is no C# API provided by Microsoft. You need to create a wrapper for C++ API. 3. MediaCapture class that designed for UWP apps provides C# APIs which provide low-level control over the capture pipeline and enable advanced capture scenarios. In this article, I want to share how to create a simple C# webcam app in which I can handle every preview frame myself.

Read more

Mobile 1D/2D Barcode Reader Using HTML5 and ASP.NET

On mobile platforms, HTML5 is not only supported by web browsers, such as Safari, Firefox, Opera, Chrome, but also web view UI component that used for building native apps. The benefit is apparent that any developer who is familiar with web programming could easily create excellent mobile apps for Android and iOS. Dynamsoft Barcode Reader SDK provides .NET APIs for Windows. You can implement a barcode reading module on server-side (IIS), and detect barcode images that captured from any mobile devices using HTML5. The article will illustrate how to make a mobile barcode reader based on B/S (Browser/Server) architecture.

Read more

How to Make HTML5 Barcode Reader with Desktop and Mobile Cameras

Recently, I noticed someone asked whether Dynamsoft Barcode Reader SDK can work for mobile devices. Because Dynamsoft Barcode Reader SDK does not support ARM yet, we can’t use it to develop native mobile apps. However, don’t be frustrated. Inspired by the article – Face detection using HTML5, javascript, webrtc, websockets, Jetty and OpenCV, I figured out the alternative solution. You can transmit the real-time camera stream to a remote server using HTML5 in Web browsers and decode the barcode image with Dynamsoft Barcode Reader SDK on the server that running on Windows, Linux or Mac. In this article, I will illustrate how to implement an HTML5 Barcode Reader with Cameras for PC and mobile devices step by step.

Read more

Making Android Smart Phone a Remote IP Camera

When you are going to purchase a new smartphone like iPhone 6 or Galaxy S5, don’t just throw your old devices away. Via socket connection, we can build a remote monitoring system with obsolete mobile devices instead of purchasing expensive Webcams or wireless cameras. In this article, I’d like to share how to connect an Android camera app to a remote server by socket, as well as how to display the camera preview frames of my mobile device on the server Window.

Read more

Take a Photo and Upload it on Mobile Phones with HTML5

In my daily life, I enjoy taking photos with my smartphone and uploading them to various websites. So I started thinking, “Is it possible to implement these functions in a web browser?” Although Dynamsoft ImageCapture Suite allows us to capture images from a webcam, it is designed for a desktop App development on windows and Mac, not for mobile platforms. Fortunately, the new HTML5 SDK is capable of uploading local images or captured images to web servers. Everything becomes easier if we have a mobile web browser, like Chrome, which is fully compatible with HTML5.

Read more

How to implement a simple barcode scan application on Android

Barcode scanning, especially QR code scans, are now widely used in various applications. This includes advertisements, newspapers, social networks, signage, and so on. The growth of QR codes is in large part due to the smartphone market’s booming growth. As a result, scanning technology tends to be more and more useful and important to businesses and consumers. In this article, we will take a glimpse on how to implement a simple barcode scan application on the Android platform.

Read more

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