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

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

其中的一個特性是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：

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

基于Greg的Demo，我突然想到可以用網絡攝像頭的照片做一些很酷的東西。我記得

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

第一個實際上并不是問題。Face.com實現了

更復雜的問題則是如何把畫布上的數據發送到Face.com(注：還可以參考我的這篇文章《

function snapshot() {

$(“#result“).html(“

Working hard for the money…“);

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]);

}

});

}

讓我們一行行來看這段代碼。首先 – 我需要從畫布對象獲取二進制數據。有幾種方法可以實現，但是我尤其想要一個二進制的Blob。請注意dataURIToBlob方法。這是幾周前我從

我創建了一個新的formdata對象，然后簡單地設置了自己所需的值。你可以看到我發起了幾個API請求，但關鍵在于文件名和文件對象本身。

接下來你可以看到簡單的jQuery Ajax調用。Face.com有多種選擇，但我基本只要求它返回預測年齡、性別、情緒，是否面帶微笑以及戴著眼鏡。就是這些。我得到了一個很棒的JSON包，并且對它進行了格式化。

現在顯然API并不完美。我獲得了使用API一些不同程度的結果。有時相當準確，有時相反。但是總體來說，這相當酷。這里有一些實際測試的圖片，看起來有點“可怕”。

識別結果：neutral(無表情)

識別結果：happy(開心)

識別結果：surprised(驚訝)

識別結果：sad(悲傷)

好了，準備自己親自來試試？ 只需點擊下面的演示按鈕。如果需要源代碼，可以直接在頁面上查看！ 這是100％的純客戶端代碼。

總結

以上是生活随笔為你收集整理的网页实现人脸识别PHP,奇思妙想-用HTML5进行人脸识别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。