日期:2014-05-17  浏览次数:20616 次

基于 HTML5 的人脸识别技术
绍一个网站,演示了通过 HTML5 + JavaScript 技术实现的人脸识别,目前仅适用于 Chrome 浏览器,首先需要在地址栏输入 about:flags ,然后找到“启用 MediaStream” 这一项,点击“启用” 后重启 Chrome 浏览器

Face detected

然后打开下面地址:

http://neave.com/webcam/html5/face/

当你摇头晃脑的时候,那副眼镜会跟着移动并帮你戴上眼镜。

你可以查看网页源码来了解具体的实现细节。

———————————–我是分界线———————————————

这是一篇国外的文章,介绍如何通过 WebRTC、OpenCV 和 WebSocket 技术实现在 Web 浏览器上的人脸识别,架构在 Jetty 之上。

实现的效果包括:

Face Detection result

还能识别眼睛

Eye Detection result

人脸识别的核心代码:

页面:

XML/HTML Code复制内容到剪贴板
  1. <div>  
  2. <video id="live" width="320" height="240" autoplay style="display: inline;"></video>  
  3. <canvas width="320" id="canvas" height="240" style="display: inline;"></canvas>  
  4. </div>  
  5.   
  6. <script type="text/javascript">  
  7. var video = $("#live").get()[0];  
  8. var canvas = $("#canvas");  
  9. var ctx = canvas.get()[0].getContext('2d');  
  10.   
  11. navigator.webkitGetUserMedia("video",  
  12. function(stream) {  
  13. video.src = webkitURL.createObjectURL(stream);  
  14. },