Microsoft Face APIの使用方法は？

エラーが発生しました。イメージを送信し、そこからデータを受信したいと思います。何が欠けている？Microsoft Face APIの使用方法は？

また、イメージ/ビデオを送信して情報を受け取るボタンを作成する方法も知りたいと思います。

<!DOCTYPE html> 
<html> 
<head> 
    <title>JSSample</title> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
</head> 
<body> 

<script type="text/javascript"> 
    $(function() { 
     var params = { 
      // Request parameters 
      "returnFaceId": "true", 
      "returnFaceLandmarks": "false", 
      "returnFaceAttributes": "{string}", 
     }; 

     $.ajax({ 
      url: "https://westcentralus.api.cognitive.microsoft.com/face/v1.0/detect?" + $.param(params), 
      beforeSend: function(xhrObj){ 
       // Request headers 
       xhrObj.setRequestHeader("Content-Type","application/json"); 
       xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key","<redacted>"); 
      }, 
      type: "POST", 
      // Request body 
      data: "{body}", 
     }) 
     .done(function(data) { 
      alert("success"); 
     }) 
     .fail(function() { 
      alert("error"); 
     }); 
    }); 
</script> 
</body> 
</html>

出典

2017-07-20 Anonymous

エラーメッセージを読んでみてください。 – SLaks

コードサンプルにサブスクリプションキーを埋め込んでいますか？ **あなたはすぐにこれを変更する必要があります。**私はあなたの質問からそれを編集しましたが、十分な担当者を持つ誰でもそれを見ていることができます。 –

@DavidMakogon キーが間違っています –

顔検出機能付きの完全なJavaScriptコードはhereです。

次の手順を実行し、サンプルを実行するには、次の

は以下をコピーして、このようなdetectFaces.htmlとしてファイルに保存します。

subscriptionKeyの値を有効なサブスクリプションキーに置き換えます。

uriBaseの値を、サブスクリプションキーを取得した場所を使用するように変更します。

ファイルをブラウザにドラッグアンドドロップします。

Analyze facesボタンをクリックします。

<!DOCTYPE html> 
<html> 
<head> 
    <title>Detect Faces Sample</title> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
</head> 
<body> 

<script type="text/javascript"> 
    function processImage() { 

     // Replace the subscriptionKey string value with your valid subscription key. 
     var subscriptionKey = "13hc77781f7e4b19b5fcdd72a8df7156"; 

     // Replace or verify the region. 
     // 
     // You must use the same region in your REST API call as you used to obtain your subscription keys. 
     // For example, if you obtained your subscription keys from the westus region, replace 
     // "westcentralus" in the URI below with "westus". 
     // 
     // NOTE: Free trial subscription keys are generated in the westcentralus region, so if you are using 
     // a free trial subscription key, you should not need to change this region. 
     var uriBase = "https://westcentralus.api.cognitive.microsoft.com/face/v1.0/detect"; 

     // Request parameters. 
     var params = { 
      "returnFaceId": "true", 
      "returnFaceLandmarks": "false", 
      "returnFaceAttributes": "age,gender,headPose,smile,facialHair,glasses,emotion,hair,makeup,occlusion,accessories,blur,exposure,noise", 
     }; 

     // Display the image. 
     var sourceImageUrl = document.getElementById("inputImage").value; 
     document.querySelector("#sourceImage").src = sourceImageUrl; 

     // Perform the REST API call. 
     $.ajax({ 
      url: uriBase + "?" + $.param(params), 

      // Request headers. 
      beforeSend: function(xhrObj){ 
       xhrObj.setRequestHeader("Content-Type","application/json"); 
       xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key", subscriptionKey); 
      }, 

      type: "POST", 

      // Request body. 
      data: '{"url": ' + '"' + sourceImageUrl + '"}', 
     }) 

     .done(function(data) { 
      // Show formatted JSON on webpage. 
      $("#responseTextArea").val(JSON.stringify(data, null, 2)); 
     }) 

     .fail(function(jqXHR, textStatus, errorThrown) { 
      // Display error message. 
      var errorString = (errorThrown === "") ? "Error. " : errorThrown + " (" + jqXHR.status + "): "; 
      errorString += (jqXHR.responseText === "") ? "" : (jQuery.parseJSON(jqXHR.responseText).message) ? 
       jQuery.parseJSON(jqXHR.responseText).message : jQuery.parseJSON(jqXHR.responseText).error.message; 
      alert(errorString); 
     }); 
    }; 
</script> 

<h1>Detect Faces:</h1> 
Enter the URL to an image that includes a face or faces, then click the <strong>Analyze face</strong> button. 
<br><br> 
Image to analyze: <input type="text" name="inputImage" id="inputImage" value="https://upload.wikimedia.org/wikipedia/commons/c/c3/RH_Louise_Lillian_Gish.jpg" /> 
<button onclick="processImage()">Analyze face</button> 
<br><br> 
<div id="wrapper" style="width:1020px; display:table;"> 
    <div id="jsonOutput" style="width:600px; display:table-cell;"> 
     Response: 
     <br><br> 
     <textarea id="responseTextArea" class="UIInput" style="width:580px; height:400px;"></textarea> 
    </div> 
    <div id="imageDiv" style="width:420px; display:table-cell;"> 
     Source image: 
     <br><br> 
     <img id="sourceImage" width="400" /> 
    </div> 
</div> 
</body> 
</html>

出典

2017-07-21 03:12:11

私はできましたが、現在はサイトと同じままです。人々の顔にある黄色い四角形と情報で、何をしなければならないのですか？ –

顔の周りにフレームを描画するには、HTML5 Canvasを使用する必要があります。 [このチュートリアル]（http://blog.teamtreehouse.com/how-to-draw-with-html-5-canvas）を見て始めてください。 –

しかし、キャンバスが壊れたものをすべて検出するので、写真の各キャンバスの情報とともに正しいマーキングを行いますか？ –

Microsoft Face APIの使用方法は？

答えて

関連する問題