Azure 人脸 api 错误：凭据参数需要实现 signRequest 方法

Question

无法成功使用 Azure 人脸 api 运行人脸检测，我尝试了几种方法，但所有方法都出现了相同的错误：-凭据参数需要实现 signRequest 方法 我该如何修复它，或者是否有其他方法可以使用人脸检测模型？

这里是我尝试运行但没有成功的组件代码:(

import React, { useRef, useEffect } from "react";
 import { AzureKeyCredential } from "@azure/core-auth";
 import { FaceClient } from "@azure/cognitiveservices-face";
 import { CognitiveServicesCredentials } from "@azure/ms-rest-azure-js";
 
 const subscriptionKey = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
 const endpoint:any  = "https://xxxxxxxxxxxxxxxx.cognitiveservices.azure.com/";
 const personGroupId = "1111";
 const detectionModel = "detection_01";
 
 const credentials:any  = new CognitiveServicesCredentials(subscriptionKey);
 const faceClient= new FaceClient(endpoint, credentials);
 
 async function createPersonGroup() {
   const existingGroups = await faceClient.personGroup.list();
   const groupExists = existingGroups.some((group) => group.personGroupId === personGroupId);
   const nameGobj:any  = { name: "My Group" };
   if (!groupExists) {
     await faceClient.personGroup.create(personGroupId, nameGobj);
   }
 }
 
 const FaceDetection: React.FC = () => {
   const videoRef = useRef<HTMLVideoElement>(null);
 
   useEffect(() => {
     async function initialize() {
       try {
         await createPersonGroup();
       } catch (e: any) {
         console.log(`Error creating person group: ${e.message}`);
       }
 
       if (videoRef.current) {
         navigator.mediaDevices.getUserMedia({ video: true }).then((stream) => {
           videoRef.current!.srcObject = stream;
           videoRef.current!.play();
         });
 
         const handleStream = async () => {
           const canvas = document.createElement("canvas");
           canvas.width = videoRef.current!.videoWidth;
           canvas.height = videoRef.current!.videoHeight;
 
           const ctx = canvas.getContext("2d");
           ctx?.drawImage(videoRef.current!, 0, 0, canvas.width, canvas.height);
 
           const imageData:any  = ctx?.getImageData(0, 0, canvas.width, canvas.height);
 
           if (imageData) {
             const detectedFaces = await faceClient.face.detectWithStream(imageData, {
               detectionModel: detectionModel,
             });
 
             console.log(detectedFaces);
           }
         };
 
         const interval = setInterval(() => {
           handleStream();
         }, 1000);
 
         return () => clearInterval(interval);
       }
     }
 
     initialize();
   }, []);
 
   return <video ref={videoRef} />;
 };
 
 export default FaceDetection;