用HTML5進(jìn)行人臉識(shí)別
今天發(fā)現(xiàn)一篇文章寫(xiě)的很有趣，叫你如何使用HTML5進(jìn)行人臉識(shí)別。在網(wǎng)頁(yè)內(nèi)進(jìn)行人臉識(shí)別，很好很強(qiáng)大！
“現(xiàn)代Web”不斷發(fā)展出不少有趣的API，但你并不會(huì)在大多數(shù)項(xiàng)目中使用到所有的內(nèi)容。例如我一直特別關(guān)注Canvas特性。它對(duì)游戲和繪圖意義重大 – 但是僅此而已。它并不是一個(gè)不好的特性，我只是不會(huì)經(jīng)常用到它。每當(dāng)看到一些開(kāi)發(fā)中酷炫的新功能，我的大腦里都會(huì)思考它們可以產(chǎn)生哪些實(shí)際用途。顯然對(duì)你有價(jià)值的內(nèi)容可能對(duì)我來(lái)說(shuō)并不一定，但搞清楚我如何實(shí)際使用一個(gè)功能是我學(xué)習(xí)它的一部分。
其中的一個(gè)特性是getUserMedia（ W3C規(guī)范 ）。它是一個(gè)JavaScript API，可以讓你訪問(wèn)（需要權(quán)限）用戶的網(wǎng)絡(luò)攝像頭和麥克風(fēng)。 目前Opera和Chrome（我相信現(xiàn)在的版本18可以支持，但是你可能需要使用Canary。你還需要啟用它。這兒有一個(gè)說(shuō)明。）一旦你啟用了getUserMedia，它使用起來(lái)相當(dāng)簡(jiǎn)單。這里有一個(gè)快速的訪問(wèn)請(qǐng)求：
- //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的***個(gè)參數(shù)是類型。根據(jù)規(guī)范，這應(yīng)該是一個(gè)對(duì)象，你可以啟用音頻、視頻，或兩者兼而有之，像這樣：{audio:true, video:true}。然而在我的測(cè)試中，傳遞一個(gè)字符串“video”也可以正常工作。你將看到的演示基于另一個(gè)演示，所以代碼來(lái)自于一個(gè)較早的Chrome下的版本。第二個(gè)和第三個(gè)參數(shù)是操作成功和失敗的回調(diào)函數(shù)。
你可以看到操作成功的事件處理函數(shù)將視頻流分配給HTML5 Video標(biāo)簽。最酷的是，一旦運(yùn)行起來(lái)，你就可以使用Canvas API來(lái)拍照。對(duì)于這個(gè)演示，可以看看Greg Miernicki的Demo：http://miernicki.com/cam.html
如果這個(gè)Demo無(wú)法工作，可以按照下面的說(shuō)明來(lái)開(kāi)啟getUserMedia支持后再次進(jìn)行嘗試。（雖然我打算分享一些屏幕截圖，所以如果你只是想繼續(xù)閱讀，那也沒(méi)關(guān)系。）
基于Greg的Demo，我突然想到可以用網(wǎng)絡(luò)攝像頭的照片做一些很酷的東西。我記得Face.com有一個(gè)非常酷的API來(lái)解析臉部的圖片。（我11月曾經(jīng)在博客里寫(xiě)了一個(gè)ColdFusion的例子。）然后我在想，是否我們能把Greg的Demo與Face.com的API結(jié)合起來(lái)做一些基本面部識(shí)別的Demo。
這有這幾個(gè)重大問(wèn)題。 *** – Face.com有一個(gè)很好的REST API，我們將如何從JavaScript應(yīng)用程序里面來(lái)調(diào)用它？其次 – Face.com需要你可以上傳圖片，或給它一個(gè)網(wǎng)址。 我知道可以把一個(gè)Canvas圖片發(fā)送給服務(wù)器，并通過(guò)我的后臺(tái)上傳到Face.com，但有沒(méi)有辦法繞過(guò)服務(wù)器來(lái)把圖片發(fā)送給這個(gè)API？
***個(gè)實(shí)際上并不是問(wèn)題。Face.com實(shí)現(xiàn)了CORS（跨域資源共享）。CORS系統(tǒng)基本上可以讓服務(wù)器暴露給其它域上文件的Ajax調(diào)用。這是一個(gè)偉大的功能，我希望更多的服務(wù)能夠使用它。
更復(fù)雜的問(wèn)題則是如何把畫(huà)布上的數(shù)據(jù)發(fā)送到Face.com（注：還可以參考我的這篇文章《如何使用HTML5實(shí)現(xiàn)拍照上傳應(yīng)用》）。我如何模擬文件上傳？這里有另一個(gè)很酷的新技巧 – Formdata。ColdFusion的研究員Sagar Ganatra關(guān)于這個(gè)話題有一篇很棒的博客。下面展示了我如何使用它：
- 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]);
- }
- });
- }
讓我們一行行來(lái)看這段代碼。首先 – 我需要從畫(huà)布對(duì)象獲取二進(jìn)制數(shù)據(jù)。有幾種方法可以實(shí)現(xiàn)，但是我尤其想要一個(gè)二進(jìn)制的Blob。請(qǐng)注意dataURIToBlob方法。這是幾周前我從StockOverflow上發(fā)現(xiàn)的。
我創(chuàng)建了一個(gè)新的formdata對(duì)象，然后簡(jiǎn)單地設(shè)置了自己所需的值。你可以看到我發(fā)起了幾個(gè)API請(qǐng)求，但關(guān)鍵在于文件名和文件對(duì)象本身。
接下來(lái)你可以看到簡(jiǎn)單的jQuery Ajax調(diào)用。Face.com有多種選擇，但我基本只要求它返回預(yù)測(cè)年齡、性別、情緒，是否面帶微笑以及戴著眼鏡。就是這些。我得到了一個(gè)很棒的JSON包，并且對(duì)它進(jìn)行了格式化。
現(xiàn)在顯然API并不***。我獲得了使用API一些不同程度的結(jié)果。有時(shí)相當(dāng)準(zhǔn)確，有時(shí)相反。但是總體來(lái)說(shuō)，這相當(dāng)酷。這里有一些實(shí)際測(cè)試的圖片，看起來(lái)有點(diǎn)“可怕”。
識(shí)別結(jié)果：neutral（無(wú)表情）
識(shí)別結(jié)果：happy（開(kāi)心）
識(shí)別結(jié)果：surprised（驚訝）
識(shí)別結(jié)果：sad（悲傷）
好了，準(zhǔn)備自己親自來(lái)試試？ 只需點(diǎn)擊下面的演示按鈕。如果需要源代碼，可以直接在頁(yè)面上查看！ 這是100％的純客戶端代碼。
原文地址：http://www.html5cn.org/article-2554-1.html
