Javascript的face模塊可以讓web應(yīng)用程序通過調(diào)用攝像頭來進(jìn)行人臉識別、眼睛識別、笑容檢測等功能。這些功能都是基于計算機(jī)視覺算法的結(jié)果,可以實現(xiàn)很多有趣的效果。
調(diào)用攝像頭需要使用getUserMedia函數(shù),它是HTML5新增的API。首先需要檢測瀏覽器是否支持這個函數(shù),代碼如下:
var hasGetUserMedia = function() { return !!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia); }
如果瀏覽器支持?jǐn)z像頭調(diào)用,我們可以用以下代碼調(diào)用獲取權(quán)限:
navigator.mediaDevices.getUserMedia({ video: true }) .then(function (stream) { // success callback }) .catch(function (err) { // error callback })
這個函數(shù)的第一個參數(shù)是一個配置對象,這個對象中的video屬性告訴瀏覽器我們要獲取視頻流的許可。getUserMedia函數(shù)返回一個Promise,在成功時,它得到一個MediaStream對象,包含了一個video元素,而這個元素渲染來自攝像頭的視頻流。在錯誤時,它返回一個錯誤。
獲取到視頻流后,我們就可以使用FaceAPI來進(jìn)行人臉識別了。FaceAPI是一個開源的JavaScript庫,它可以識別圖片中的人臉,檢測人臉的特征,以及分類面部表情。它是由Microsoft在Azure云上提供的計算機(jī)視覺服務(wù)。
FaceAPI提供了一個簡單的Web頁面,讓你可以上傳圖片并檢測其中的人臉。我們可以使用它的REST API,處理來自video元素的每一幀。
var video = document.querySelector('video'); var canvas = document.querySelector('canvas'); var context = canvas.getContext('2d'); var faceApiKey = ''; function detectFaces() { context.drawImage(video, 0, 0, canvas.width, canvas.height); var dataUrl = canvas.toDataURL('image/jpeg'); var params = { 'returnFaceAttributes': 'emotion' }; var xhr = new XMLHttpRequest(); xhr.open('POST', 'https://westus.api.cognitive.microsoft.com/face/v1.0/detect'); xhr.setRequestHeader('Ocp-Apim-Subscription-Key', faceApiKey); xhr.setRequestHeader('Content-Type', 'application/octet-stream'); xhr.onreadystatechange = function() { if (xhr.readyState === XMLHttpRequest.DONE) { console.log(xhr.responseText); } }; xhr.send(makeBlob(dataUrl)); } function makeBlob(dataUrl) { var parts = dataUrl.split(';base64,'); var contentType = parts[0].split(':')[1]; var raw = window.atob(parts[1]); var rawLength = raw.length; var uInt8Array = new Uint8Array(rawLength); for (var i = 0; i< rawLength; i++) { uInt8Array[i] = raw.charCodeAt(i); } return new Blob([uInt8Array], { type: contentType }); }
在上面的代碼中,我們在頁面上獲取了video和canvas元素和FaceAPI的apiKey。detectFaces函數(shù)會在一秒鐘內(nèi)調(diào)用60次,對每一幀視頻進(jìn)行分析。它首先調(diào)用context.drawImage來將視頻幀繪制到canvas上,然后獲取一個數(shù)據(jù)URL,包含了canvas圖像的JPEG編碼數(shù)據(jù)。它然后創(chuàng)建了一個XHR對象,并將數(shù)據(jù)發(fā)送到FaceAPI。FaceAPI將返回人臉的位置和情緒,我們可以在控制臺上查看結(jié)果。makeBlob函數(shù)需要將數(shù)據(jù)URL轉(zhuǎn)換為Blob對象,使得它可以被發(fā)送到FaceAPI。
總之,使用JavaScript的face模塊可以讓我們通過調(diào)用攝像頭來進(jìn)行人臉識別、眼睛識別和笑容檢測等功能。同時,調(diào)用攝像頭需要使用getUserMedia函數(shù)獲取權(quán)限,獲取到視頻流后,我們使用FaceAPI來進(jìn)行人臉識別。