用HTML5進行人臉識別

作者：html5cn 2012-04-28 14:01:17

其中的一個特性是getUserMedia（ W3C規范）。它是一個JavaScript API，可以讓你訪問（需要權限）用戶的網絡攝像頭和麥克風。

今天發現一篇文章寫的很有趣，叫你如何使用HTML5進行人臉識別。在網頁內進行人臉識別，很好很強大！

“現代Web”不斷發展出不少有趣的API，但你并不會在大多數項目中使用到所有的內容。例如我一直特別關注Canvas特性。它對游戲和繪圖意義重大 – 但是僅此而已。它并不是一個不好的特性，我只是不會經常用到它。每當看到一些開發中酷炫的新功能，我的大腦里都會思考它們可以產生哪些實際用途。顯然對你有價值的內容可能對我來說并不一定，但搞清楚我如何實際使用一個功能是我學習它的一部分。

其中的一個特性是getUserMedia（ W3C規范）。它是一個JavaScript API，可以讓你訪問（需要權限）用戶的網絡攝像頭和麥克風。目前Opera和Chrome（我相信現在的版本18可以支持，但是你可能需要使用Canary。你還需要啟用它。這兒有一個說明。）一旦你啟用了getUserMedia，它使用起來相當簡單。這里有一個快速的訪問請求：

//a video tag  
var video = document.getElementById(‘monitor’);  
//request it  
navigator.webkitGetUserMedia(‘video’, gotStream, noStream);  
function gotStream(stream) {  
video.src = webkitURL.createObjectURL(stream);  
video.onerror = function () {  
stream.stop();  
streamError();  
};  
}  
function noStream() {  
document.getElementById(‘errorMessage’).textContent = ‘No camera available.’;  
}  
function streamError() {  
document.getElementById(‘errorMessage’).textContent = ‘Camera error.’;  
}

getUserMedia的***個參數是類型。根據規范，這應該是一個對象，你可以啟用音頻、視頻，或兩者兼而有之，像這樣：{audio:true, video:true}。然而在我的測試中，傳遞一個字符串“video”也可以正常工作。你將看到的演示基于另一個演示，所以代碼來自于一個較早的Chrome下的版本。第二個和第三個參數是操作成功和失敗的回調函數。

你可以看到操作成功的事件處理函數將視頻流分配給HTML5 Video標簽。最酷的是，一旦運行起來，你就可以使用Canvas API來拍照。對于這個演示，可以看看Greg Miernicki的Demo：http://miernicki.com/cam.html

如果這個Demo無法工作，可以按照下面的說明來開啟getUserMedia支持后再次進行嘗試。（雖然我打算分享一些屏幕截圖，所以如果你只是想繼續閱讀，那也沒關系。）

基于Greg的Demo，我突然想到可以用網絡攝像頭的照片做一些很酷的東西。我記得Face.com有一個非常酷的API來解析臉部的圖片。（我11月曾經在博客里寫了一個ColdFusion的例子。）然后我在想，是否我們能把Greg的Demo與Face.com的API結合起來做一些基本面部識別的Demo。

[[68839]]

這有這幾個重大問題。 *** – Face.com有一個很好的REST API，我們將如何從JavaScript應用程序里面來調用它？其次 – Face.com需要你可以上傳圖片，或給它一個網址。我知道可以把一個Canvas圖片發送給服務器，并通過我的后臺上傳到Face.com，但有沒有辦法繞過服務器來把圖片發送給這個API？

***個實際上并不是問題。Face.com實現了CORS（跨域資源共享）。CORS系統基本上可以讓服務器暴露給其它域上文件的Ajax調用。這是一個偉大的功能，我希望更多的服務能夠使用它。

更復雜的問題則是如何把畫布上的數據發送到Face.com（注：還可以參考我的這篇文章《如何使用HTML5實現拍照上傳應用》）。我如何模擬文件上傳？這里有另一個很酷的新技巧 – Formdata。ColdFusion的研究員Sagar Ganatra關于這個話題有一篇很棒的博客。下面展示了我如何使用它：

function snapshot() {  
$(“#result“).html(“<p><i>Working hard for the money…</i></p>“);  
canvas.width = video.videoWidth;  
canvas.height = video.videoHeight;  
canvas.getContext(’2d’).drawImage(video, 0, 0);  
var data = canvas.toDataURL(‘image/jpeg’, 1.0);  
newblob = dataURItoBlob(data);  
var formdata = new FormData();  
formdata.append(“api_key“, faceKey);  
formdata.append(“api_secret“, faceSecret);  
formdata.append(“filename“,”temp.jpg“);    
formdata.append(“file“,newblob);  
$.ajax({  
    url: ‘http://api.face.com/faces/detect.json?attributes=age_est,gender,mood,smiling,glasses’,  
      data: formdata,  
    cache: false,  
    contentType: false,  
    processData: false,  
    dataType:”json“,  
    type: ‘POST’,  
    success: function (data) {  
        handleResult(data.photos[0]);  
    }  
});      
}