Combining HTML5 Web Applications with OpenCV
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.
Combining HTML5 Web Applications with OpenCV的更多相关文章
- HTML5 Web 客户端五种离线存储方式汇总
最近折腾HTML5游戏需要离线存储功能,便把目前可用的几种HTML5存储方式研究了下,基于HT for Web写了个综合的实例,分别利用了Cookie.WebStorage.IndexedDB以及Fi ...
- 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 ...
- 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 ...
- JavaScript多线程之HTML5 Web Worker
在博主的前些文章Promise的前世今生和妙用技巧和JavaScript单线程和浏览器事件循环简述中都曾提到了HTML5 Web Worker这一个概念.在JavaScript单线程和浏览器事件循环简 ...
- 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 ...
- HTML5 web Form表单验证实例
HTML5 web Form 的开发实例! index.html <!DOCTYPE html> <html> <head> <meta charset=&q ...
- html5 web database
html5 web database <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- HTML5 Web Storage
Web Storage是HTML5 API提供一个新的重要的特性: 最新的Web Storage草案中提到,在web客户端可用html5 API,以Key-Value形式来进行数据持久存储: 目前主要 ...
- 深入HTML5 Web Worker应用实践:多线程编程
HTML5 中工作线程(Web Worker)简介 至 2008 年 W3C 制定出第一个 HTML5 草案开始,HTML5 承载了越来越多崭新的特性和功能.它不但强化了 Web 系统或网页的表现性能 ...
随机推荐
- 【MySQL安装】MySQL5.6在centos6.4上的安装
卸载原来安装的mysql 安装从官网下载的mysql rpm包 发现有依赖,需要先安装libaio包和libnuma包 再装mysql就可以了 安装客户端 安装完成后,启动mysql 但是发现用没有m ...
- nmap保存结果
nmap 192.168.0.2 -oX D:\myscan.xml 参数解释: -oN <filespec> (标准输出) -oX <filespec> (XML输出) -o ...
- python-模块详解
模块: 模块的分类: 第三方模块/扩展模块:没在安装python解释器的时候安装的那些功能 自定义模块:你写的功能如果是一个通用的功能,那你就把它当做一个模块 内置模块:安装python解释器的时候跟 ...
- 学习HTML 第一节.小试牛刀
此贴并非教学,主要是自学笔记,所述内容只是些许个人学习心得的记录和备查积累,难以保证观点正确,也不一定能坚持完成. 如不幸到访,可能耽误您的时间,也难及时回复,贴主先此致歉.如偶有所得,相逢有缘,幸甚 ...
- 【SpringCloud】第十一篇: 断路器监控(Hystrix Dashboard)
前言: 必需学会SpringBoot基础知识 简介: spring cloud 为开发人员提供了快速构建分布式系统的一些工具,包括配置管理.服务发现.断路器.路由.微代理.事件总线.全局锁.决策竞选. ...
- Java EE JavaBean组件
一.简介 JavaBean组件是一些可移植.可重用并可组装到应用程序中的Java类,类必须是具体的和公共的. 符合下列设计规则的任何Java类均是以JavaBean: 1.对数据类型“protype” ...
- TCP/IP 网路基础
一.引子 TCP/IP是"Transmission Control Protocol/Internet Protocol"的简写,翻译成中文为传输控制协议/互联网网 ...
- phpcms v9手机站不支持组图($pictureurls)的修改
phpcms v9自带的手机门户网站,有时候我们需要用到组图功能$pictureurls,我在做的时候发现,如果$pictureurls中只有一张图片会正常显示,但是如果有两张或两张以上的图片的时候, ...
- hbase优化操作与建议
一.服务端调优 1.参数配置 1).hbase.regionserver.handler.count:该设置决定了处理RPC的线程数量,默认值是10,通常可以调大,比如:150,当请求内容很大(上MB ...
- Python3 函数作用域
一 LEGB 什么是LEGB? L:local 函数内部作用域 E:enclosing 函数内部与内嵌函数之间 G:global 全局作用域 B:build-in 内置作用域 顺序是什么? 跟名字一样 ...