Affichage d'une image de la webcam vers Azure Face Api

Question

J'essaye de télécharger une image que je reçois de ma webcam vers Microsoft Azure Face Api. Je reçois l'image de canvas.toDataUrl ('image/png') qui contient l'Uri de données. Je change le type de contenu en application/flux d'octets et quand j'attache l'Uri de données à la demande de poste, j'obtiens une mauvaise image de visage de demande incorrecte (400). Si je change les données attachées à un blob, j'arrête de recevoir des erreurs mais je récupère seulement un tableau vide au lieu d'un objet JSON. J'apprécierais vraiment toute aide pour m'indiquer dans la bonne direction.

Merci!

Answer 1

alors je suis la réponse enfin en envoyant l'image comme un objet blob. Vous devez d'abord saisir l'image de la toile avec:

let data = canvas.toDataURL('image/jpeg'); 

Ensuite, vous pouvez le reformater un objet de données blob en exécutant:

fetch(data) 
    .then(res => res.blob()) 
    .then(blobData => { 
    // attach blobData as the data for the post request 
    } 

Vous aurez besoin aussi de changer le type de contenu du poste demande à "application/octet-stream"

Answer 2

Oh vous êtes dans une telle chance, j'ai juste (avec succès!) Essayé il y a 2 jours.

L'envoi de fichiers JPEG codés en base64 à Face API est sérieusement inefficace. Le rapport entre les octets de sortie codés et les octets d'entrée est de 4: 3 (33% de temps système). Il suffit d'envoyer un tableau d'octets, cela fonctionne, les documents mention it briefly.

Et essayez de lire comme JPEG pas PNG, qui est juste de perdre la bande passante pour des images de webcam.

... 

    var dataUri = canvas.toDataURL('image/' + format); 
    var data = dataUri.split(',')[1]; 
    var mimeType = dataUri.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); 
    } 

    return byteArr; 

utiliser maintenant byteArr comme charge utile (data:) dans $.ajax() pour jQuery ou iDontUnderStandHowWeGotHereAsAPeople() dans tout autre peuple cadre Hipster JS utilisent ces jours-ci.

La voie inverse Hipster de le faire est la suivante:

var payload = byteArr; 

var xhr = new XMLHttpRequest(); 
xhr.open('POST', 'https://SERVICE_URL'); 
xhr.setRequestHeader('Content-Type', 'application/octet-stream'); 
xhr.send(payload); 

Answer 3

pour prolonger la réponse de Dalvor: ceci est l'appel AJAX qui fonctionne pour moi:

fetch(data) 
.then(res => res.blob()) 
.then(blobData => { 
    $.post({ 
     url: "https://westus.api.cognitive.microsoft.com/face/v1.0/detect", 
     contentType: "application/octet-stream", 
     headers: { 
     'Ocp-Apim-Subscription-Key': '<YOUR-KEY-HERE>' 
     }, 
     processData: false, 
     data: blobData 
    }) 
    .done(function(data) { 
     $("#results").text(JSON.stringify(data)); 

    }) 
    .fail(function(err) { 
     $("#results").text(JSON.stringify(err)); 
    }) 

Code de démonstration complet ici: https://jsfiddle.net/miparnisari/b1zzpvye/