The Web Dev Zone is brought to you by Stormpath—offering a pre-built Identity API for developers. Easily build powerful user management, authentication, and authorization into your web and mobile applications. Download this Forrester report on the new landscape of Customer Identity and Access Management.

OpenCV is a popular library for image processing in C++. It promises very high performance and  even real-time video processing algorithms.  While it is a native library, available for Linux, Windows and OSX, it also features Java bindings that make it available to JVM applications.

Featuring hundreds of optimized computer vision algorithms, OpenCV would be an interesting addition to many HTML5 web applications. However, for web developers, there is still a gap from the web browser to the server. Fortunately, this is the sweet spot for Vaadin.

Vaadin is a server-side Java web framework. And Java we need here. While web is mostly considered as JavaScript-driven, browser-based environment, in this case Java has its benefits - Vaadin nicely fills the gap between HTML5/JavaScript user interfaces and powerful native Java libraries.

Setting up computer vision for the Java server

The first thing to do is to find a server  to run OpenCV. Like mentioned, it is a native C++ library, but fortunately available for many operating systems - and provided with excellent getting started documentation.

I started from compiling the latest 3.0 (beta) for my target platform with Java bindings. The results are essentially a native .so library file and a jar file for JNI wrappers. You can find the build instructions here.

You need to install the  native library into your Java library path. This varies depending on your platform and JDK version, but on my Linux machine it was something like:

 
sudo cp ./lib/libopencv_java300.so \
 
    /usr/lib/jvm/java-7-openjdk-amd64/jre/lib/amd64/
 

If you are like me, using Maven to manage library dependencies in Java development, it makes sense to install the jar into a local repository with the correct version. This way it is easy to integrate the library into your Java applications:

 
mvn install:install-file \
 
-Dfile=./bin/opencv-300.jar \
 
-DgroupId=org.opencv \  
 
-DartifactId=opencv \
 
-Dversion=3.0.0 \
 
-Dpackaging=jar
 

After the build process, you have everything you need to start developing the application itself.

Web application with face recognition

So,  now we are ready to create something. I got my first idea for a ‘computer vision web application’ from a mobile Android application that uses a face recognition algorithm to locate a face in a picture and make some fun of it: The trollator. Yes, this should be fun and easy enough also as a web application. :)

Now, while you can study the full web application source code in GitHub,  let me explain some parts of it.

In Vaadin, all starts with the user interface: the com.vaadin.ui.UI class. You extend this class to create your own user interface, which the user will see when accessing the application using a web browser.

In this application it is actually quite simple and it has only two parts: 1) a webcam component to take a picture and 2) an image component to show the processed result. The image is processed automatically when it has been taken. Better check the structure in the code.

Remember that loading the native OpenCV library has to be done early. Or at least before you use it. I used a static block that is executed when a class is loaded. You can see it in the beginning of the TrollatorUI class:

 
static {
 
    System.loadLibrary(Core.NATIVE_LIBRARY_NAME);
 
 }
 

Now it is available through the Java API and you can call the OpenCV methods in your application.

For the actual face recognition, I used the method based on Haar Cascade Classifiers. It is a very generic method for recognizing objects in pictures, and while you can create your own classifiers and train OpenCV to recognize any objects, OpenCV also conveniently ships with pre-trained classifiers for human faces.

In this faceDetect method the classifier is loaded from the file haarcascade_frontalface_default.xml and it is used to detect faces from the uploaded picture from a webcam. When matches are found, an overlay image is drawn on top of it.

OpenCV uses its own model for images called Mat and to map that to Java world, some conversion routines are needed. You can see that in toBufferedImage. Furthermore, to present the generated in-memory image to the user, I created a simple DynamicImage extension to Vaadin’s Image  component, to load the image data from java.awt.image.BufferedImage instead of normal file. Also note that in order to run the application, the JVM must be set to “headless” mode using -Djava.awt.headless=true system parameter.

Going further

Sorry, that’s it. :) I never got further than this with my computer vision apps, but I learned something, and hopefully this also write-up gives you an idea of how to get started.

It was pretty simple after all. All you need to do is: 1.) build OpenCV Java library and install it to local Maven repository and 2.) clone the sample project  from GitHub. And you have a full setup for the most amazing computer vision web applications of your own.

The Web Dev Zone is brought to you by Stormpath—offering a pre-built, streamlined User Management API for building web and mobile applications. Plan On Building User Management? Buy It Instead.Download Our White Paper To Learn More.

Combining HTML5 Web Applications with OpenCV的更多相关文章

  1. HTML5 Web 客户端五种离线存储方式汇总

    最近折腾HTML5游戏需要离线存储功能,便把目前可用的几种HTML5存储方式研究了下,基于HT for Web写了个综合的实例,分别利用了Cookie.WebStorage.IndexedDB以及Fi ...

  2. Websocket 与代理服务器如何交互? How HTML5 Web Sockets Interact With Proxy Servers

    How HTML5 Web Sockets Interact With Proxy Servers Posted by Peter Lubberson Mar 16, 2010 With the re ...

  3. Where to Store your JWTs – Cookies vs HTML5 Web Storage--转

    原文地址:https://stormpath.com/blog/where-to-store-your-jwts-cookies-vs-html5-web-storage Update 5/12/20 ...

  4. JavaScript多线程之HTML5 Web Worker

    在博主的前些文章Promise的前世今生和妙用技巧和JavaScript单线程和浏览器事件循环简述中都曾提到了HTML5 Web Worker这一个概念.在JavaScript单线程和浏览器事件循环简 ...

  5. Model-View-Controller(MVC) is an architectural pattern that frequently used in web applications. Which of the following statement(s) is(are) correct?

    Model-View-Controller(MVC) is an architectural pattern that frequently used in web applications. Whi ...

  6. HTML5 web Form表单验证实例

    HTML5 web Form 的开发实例! index.html <!DOCTYPE html> <html> <head> <meta charset=&q ...

  7. html5 web database

    html5 web database <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  8. HTML5 Web Storage

    Web Storage是HTML5 API提供一个新的重要的特性: 最新的Web Storage草案中提到,在web客户端可用html5 API,以Key-Value形式来进行数据持久存储: 目前主要 ...

  9. 深入HTML5 Web Worker应用实践:多线程编程

    HTML5 中工作线程(Web Worker)简介 至 2008 年 W3C 制定出第一个 HTML5 草案开始,HTML5 承载了越来越多崭新的特性和功能.它不但强化了 Web 系统或网页的表现性能 ...

随机推荐

  1. Eclipse--Maven--Dynamic Web Module 3.0 requires Java 1.6 错误

    用Eclipse创建Maven webapp项目时报错Dynamic Web Module 3.0 requires Java 1.6 错误 其实这个问题就是两者不匹配的问题Dynamic Web M ...

  2. 【MYSQL用户创建报错】ERROR 1396 (HY000): Operation CREATE USER failed for 'user1'@'%'

    原文参考自:http://blog.csdn.net/u011575570/article/details/51438841 1.创建用户的时候报错ERROR 1396 (HY000): Operat ...

  3. Spring学习(八)-----Spring注入值到集合类型的例子

    下面例子向您展示Spring如何注入值到集合类型(List, Set, Map, and Properties). 支持4个主要的集合类型: List – <list/> Set – &l ...

  4. EOJ3134. 短信激活码(大数幂取模)

    题面 输入只有5位,所以转化为long long类型用快速幂取模 前面补0的写法printf("%05lld\n",ans);如果ans不足5位会在前面补0 #include< ...

  5. Oracle和MySQL在使用上的区别

    1.  Oracle是大型数据库而MySQL是中小型数据库,MySQL是开源的而Oracle的价格非常高. 2.  Oracle支持大并发,大访问量. 3.  安装所用的空间差别也是很大,MySQL安 ...

  6. 【python 3.6】如何将list存入txt后,再读出list

    今天遇到一个需求,就是将一个list文件读取后,存入一个txt配置文件.存入时,发现list文件无法直接存入,必须转为str模式. 但在读取txt时,就无法恢复成list类型来读取了(准确地说,即使强 ...

  7. [CF1137]Museums Tour

    link \(\text{Description:}\) 一个国家有 \(n\) 个城市,\(m\) 条有向道路组成.在这个国家一个星期有 \(d\) 天,每个城市有一个博物馆. 有个旅行团在城市 \ ...

  8. Centos7 Ntp 时间服务器

    Centos7 Ntp 时间服务器 安装环境 [root@m02 ~]# cat /etc/redhat-release CentOS Linux release 7.4.1708 (Core) 安装 ...

  9. 提升Android ListView性能的几个技巧

    ListView如何运作的? ListView是设计应用于对可扩展性和高性能要求的地方.实际上,这就意味着ListView有以下2个要求: 尽可能少的创建View: 只是绘制和布局在屏幕上可见的子Vi ...

  10. 《JavaScript设计模式与开发实践》——第3章 闭包和高阶函数

    闭包 变量的作用域和生存周期密切相关 高阶函数 函数可以作为参数被传递 函数可以作为返回值输出