Cognitive Service Computer Vision API 'Cache-Steuerungsfehler'

Question

Ich versuche, Microsoft Cognitive Service Computer Vision API in JavaScript zu verwenden. Ich muss ein Canvas-Bild auf die API hochladen und das Ergebnis erhalten. Ich habe das gleiche Programm mit 'param' und 'URL' mit Face API ändern und es funktioniert gut. aber in Computer Vision API gibt es diesen Fehler: "Cache-Control: No-Cache \ r \ nPragma: No-Cache \ r \ nContent-Typ: application/json; charset = utf-8 \ r \ nExpires: -1 \ r \ n“

Mein Code ist:

var apiKey = "<KEY>"; 
 
var apiUrl = "https://westus.api.cognitive.microsoft.com/face/v1.0/detect"; 
 
var params = { 
 
      // Request parameters 
 
      "maxCandidates": "1", 
 
     }; 
 
     
 
$('#btn').click(function() { 
 
    \t var file = document.getElementById('filename').files[0]; 
 
    \t CallAPI(file, apiUrl, apiKey); 
 
    
 

 

 
}); 
 
    
 
navigator.getUserMedia = (navigator.getUserMedia || 
 
         \t navigator.webkitGetUserMedia || 
 
          navigator.mozGetUserMedia || 
 
          navigator.msGetUserMedia); 
 

 
var video; 
 
var webcamStream; 
 
function startWebcam() { 
 
    if (navigator.getUserMedia) { 
 
\t \t navigator.getUserMedia (
 
      \t { 
 
       video: true, 
 
       audio: false 
 
      }, 
 

 
     \t function(localMediaStream) { 
 
       \t video = document.querySelector('video'); 
 
       \t video.src = window.URL.createObjectURL(localMediaStream); 
 
        \t webcamStream = localMediaStream; 
 
       \t }, 
 

 
      function(err) { 
 
        \t console.log("The following error occured: " + err); 
 
       \t } 
 
     ); 
 
    } 
 
    else { 
 
    \t console.log("getUserMedia not supported"); 
 
    } 
 
} 
 

 
function stopWebcam() { 
 
      webcamStream.stop(); 
 
     \t } 
 

 
makeblob = function (dataURL) { 
 
    var BASE64_MARKER = ';base64,'; 
 
    if (dataURL.indexOf(BASE64_MARKER) == -1) { 
 
     var parts = dataURL.split(','); 
 
     var contentType = parts[0].split(':')[1]; 
 
     var raw = decodeURIComponent(parts[1]); 
 
     return new Blob([raw], { type: contentType }); 
 
    } 
 
    var parts = dataURL.split(BASE64_MARKER); 
 
    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 }); 
 
} 
 

 

 
function snapshot() { 
 
\t canvas = document.getElementById("myCanvas"); 
 
\t ctx = canvas.getContext('2d'); 
 
\t ctx.drawImage(video, 0,0, canvas.width, canvas.height); 
 
\t var dataurl= canvas.toDataURL(); 
 
\t CallAPI(dataurl, apiUrl, apiKey); 
 
} 
 
setInterval(snapshot,10000); 
 

 

 
function CallAPI(file, apiUrl, apiKey) 
 
{ \t console.log("api called"); 
 
\t $.ajax({ 
 
      url: "https://westus.api.cognitive.microsoft.com/vision/v1.0/analyze?" + $.param(params), 
 
      beforeSend: function(xhrObj){ 
 
       // Request headers 
 
       xhrObj.setRequestHeader("Content-Type","application/json"); 
 
       xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key",apiKey); 
 
      }, 
 
\t \t \t type: "POST", 
 
\t \t \t data: makeblob(file), 
 
\t \t \t processData: false 
 
\t \t }) 
 

 
\t .done(function (response) { 
 
\t \t \t ProcessResult(response); 
 
\t \t \t console.log("done"); 
 
\t }) 
 

 
\t .fail(function (error) { 
 
\t \t \t $("#response").text(error.getAllResponseHeaders()); 
 
      var str= JSON.stringify(error.getAllResponseHeaders()) 
 
\t \t \t console.log(str); 
 
\t }); 
 
} 
 
    
 
function ProcessResult(response) 
 
{ 
 
\t // var data = JSON.parse(response); 
 
    var string= JSON.stringify(response); 
 
    var string = string.substring(1, string.length-1); 
 
    var data= JSON.parse(string); 
 
    console.log(string) 
 

 
}

Bitte helfen und schlagen besseren Weg, dies zu tun.

Answer 1

In Ihrem $ .ajax-Aufruf muss Content-Type auf application/octet-stream gesetzt werden.

Auch eine Erinnerung, dass die APIs Vision und Face verschiedene API-Schlüssel haben.

$.ajax({ 
    url: apiUrl + "?" + $.param(params), 
    beforeSend: function(xhrObj){ 
     // Request headers 
     xhrObj.setRequestHeader("Content-Type","application/octet-stream"); 
     xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key", apiKey); 
    }, 
    type: "POST", 
    data: makeblob(file), 
    processData: false 
})