使用Cordova相机插件&的人脸检测(Face-API调用) JS中的MS认知服务 [英] Face Detection (Face-API call) using Cordova Camera Plugin & MS-Cognitive Services in JS
问题描述
自最近两天以来，我一直在努力找出问题出在哪里?我正在使用Microsoft Cognitive Services开发用于人脸识别的Cordova android应用程序.为了拍摄图像，我使用了Cordova Camera插件并进行了操作(检测面部，识别 等)我正在使用JS.我将在这篇文章中逐步解释代码.这是我的内容安全政策:
Since last 2 days I am trying to figure out what went wrong? I am working on Cordova android app for Face recognition by using Microsoft Cognitive Services. For taking images I used Cordova Camera plugin and for performing operations (detect faces, identify etc) I am using JS. I will explain code step by step in this post. Here is my Content Security Policies:
<元http-equiv ="Content-Security-Policy" content ="media-src * blob :； script-src'self''unsafe-inline''unsafe-eval'*; style-src 'self''unsafe-inline'*'''>
< meta name =格式检测"； content =电话=否">
< meta name ="msapplication-tap-highlight"； content =否">
<元名称=视口" content ="user-scalable = no，initial-scale = 1，maximum-scale = 1，minimum-scale = 1，width = device-width"
<meta http-equiv="Content-Security-Policy" content="media-src * blob:; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
在捕获图片"显示按钮的标准HTML代码之后
After that standard HTML Code for display button of Capture Picture
< button id =拍照按钮">拍照</button>
<button id="take-picture-button">Take Picture</button>
现在让我们来看.js文件代码，由于它是Cordova Camera插件，所以我使用了一些预定义的事件:
Now lets come to .js file code, Since it is Cordova Camera plugin I used some pre-defined events:
bindEvents:function(){
document.addEventListener('deviceready'，this.onDeviceReady，false);
document.addEventListener('pause'，this.onPause，false);
document.addEventListener('resume'，this.onResume，false);
}，
onDeviceReady:function(){
document.getElementById(拍照按钮").addEventListener("click"，函数(){
appState.takingPicture = true;
navigator.camera.getPicture(cameraSuccessCallback，cameraFailureCallback，
{
sourceType:Camera.PictureSourceType.CAMERA，
destinationType:Camera.DestinationType.FILE_URI，
targetWidth:500，
targetHeight:500
}); });
}
bindEvents: function () {
document.addEventListener('deviceready', this.onDeviceReady, false);
document.addEventListener('pause', this.onPause, false);
document.addEventListener('resume', this.onResume, false);
},
onDeviceReady: function () {
document.getElementById("take-picture-button").addEventListener("click", function () {
appState.takingPicture = true;
navigator.camera.getPicture(cameraSuccessCallback, cameraFailureCallback,
{
sourceType: Camera.PictureSourceType.CAMERA,
destinationType: Camera.DestinationType.FILE_URI,
targetWidth: 500,
targetHeight: 500
}); });
},
之后，onPause:function(){}& onResume:function(){}以下是通过使用MS-Cognitive服务Face API进行人脸检测进行ajax调用的代码:(从FaceAPI文档中，我知道我可以发送Binary 数据或POST方法中的Blob或文件，因此我需要将图像转换为二进制数据)我将图像转换代码和Ajax代码一起发布，以便大家能够理解
and after that onPause: function(){} & onResume: function(){} Following is the code where I am making an ajax call by using MS-Cognitive services Face API for face detection: (From the FaceAPI documentation I understood that I can either send Binary data or Blob or File in POST method, therefore I need to convert image into binary data) I am going to post the image conversion code and ajax code together so that you guys can understand
var img = new Image();
img.src = imageUri; //系统路径(例如:
file:///storage/android/ .......)
var img = new Image();
img.src = imageUri; // System Path (eg:
file:///storage/android/.......)
var canvas = document.createElement("canvas");
canvas.width = $(window).width();
canvas.height = $(window).height();
var canvas = document.createElement("canvas");
canvas.width = $(window).width();
canvas.height = $(window).height();
var ctx = canvas.getContext("2d");
img.onload = function(){
ctx.drawImage(img，0，0);
}
var dataURL = canvas.toDataURL("image/jpeg");
var ctx = canvas.getContext("2d");
img.onload = function () {
ctx.drawImage(img, 0, 0);
}
var dataURL = canvas.toDataURL("image/jpeg");
var data = dataURL.split('，')[1];
var mimeType = dataURL.split(';')[0] .slice(5)
var bytes = window.atob(data);
var buf = new ArrayBuffer(bytes.length);
var byteArr = new Uint8Array(buf);
var data = dataURL.split(',')[1];
var mimeType = dataURL.split(';')[0].slice(5)
var bytes = window.atob(data);
var buf = new ArrayBuffer(bytes.length);
var byteArr = new Uint8Array(buf);
for(var i = 0; i< bytes.length; i ++){
byteArr [i] = bytes.charCodeAt(i);
}
for (var i = 0; i < bytes.length; i++) {
byteArr[i] = bytes.charCodeAt(i);
}
var params = {
" returnFaceId":"true"，
"returnFaceLandmarks":"false"，
"returnFaceAttributes":年龄"，
};
var params = {
"returnFaceId": "true",
"returnFaceLandmarks": "false",
"returnFaceAttributes": "age",
};
var faceIds = new Array();
$ .ajax({
网址:" https://australiaeast.api.cognitive.microsoft.com/face/v1. 0/detect ?" + $ .param(params)，
beforeSend:函数(xhrObj){
xhrObj.setRequestHeader("Content-Type"，"application/octet-stream");
xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key"，"API_KEY");
}，
类型:"POST"，
数据:byteArr，
processData:false，
})
.done(函数(数据){
for(var i = 0; i< data.length; i ++){
faceIds.push(data.faceId);
alert(索引处的FaceID" + i +"为"+ JSON.stringify(data.faceId [i])));
}
})
.fail(函数(jqXHR，textStatus，errorThrown){
alert(人脸检测失败，详细信息:状态:: + jqXHR.status +" ResponseText ::"+ jqXHR.statusText +"));
});
var faceIds = new Array();
$.ajax({
url: "https://australiaeast.api.cognitive.microsoft.com/face/v1.0/detect?" + $.param(params),
beforeSend: function (xhrObj) {
xhrObj.setRequestHeader("Content-Type", "application/octet-stream");
xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key", "API_KEY");
},
type: "POST",
data: byteArr,
processData: false,
})
.done(function (data) {
for (var i = 0; i < data.length; i++) {
faceIds.push(data.faceId);
alert("FaceID at index"+ i+" is " + JSON.stringify(data.faceId[i]));
}
})
.fail(function (jqXHR, textStatus, errorThrown) {
alert("Failed in Face Detect, Details: Status:: " + jqXHR.status + " ResponseText:: " + jqXHR.statusText + "");
});
现在，以上代码的输出为面部检测失败，详细信息:状态:: 400 ResponseText ::错误请求"我不知道我需要在哪里进行更改或缺少任何内容?
Now, the output of above code is "Failed in Face Detect, Details: Status::400 ResponseText:: Bad Request I am not understanding where I need to make changes or did I missing anything?
请帮助.
谢谢
推荐答案
对于任何Microsoft AZURE Cognitive服务，您可以在此处发布.
Support for Cognitive Services has been moved to Stack overflow. For any of Microsoft AZURE Cognitive service, you may post here.
我看到类似的查询已发布在 堆栈溢出.您可以在那里继续讨论.
I see that similar query has been posted On Stack overflow. You may continue your discussion there.
这篇关于使用Cordova相机插件&的人脸检测(Face-API调用) JS中的MS认知服务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
