Canvas not appearing on image

[priyanshuanand166]

In the video tutorial it is shown that a canvas appears on the pic displaying the name of the person but while implementing that canvas doesnt appear(even after simply copy/paste of code provided in repo,canvas do not appear)

[computervisioneng]

what browser are you using?

[sossboypasta]

Can anyone help me? Facial recognition is not working. Here is the code:

const video = document.getElementById("video");

Promise.all([ faceapi.nets.ssdMobilenetv1.loadFromUri("/models"), faceapi.nets.faceRecognitionNet.loadFromUri("/models"), faceapi.nets.faceLandmark68Net.loadFromUri("/models"), ]).then(startWebcam);

function startWebcam() { navigator.mediaDevices .getUserMedia({ video: true, audio: false, }) .then((stream) => { video.srcObject = stream; }) .catch((error) => { console.error(error); }); } startWebcam(); function getLabeledFaceDescriptions() { const labels = ["Anas1", "Anas2", "Anas3"]; return Promise.all( labels.map(async (label) => { const descriptions = []; for (let i = 1; i <= 2; i++) { const img = await faceapi.fetchImage(./labels/${label}/${i}.jpg); const detections = await faceapi .detectSingleFace(img) .withFaceLandmarks() .withFaceDescriptor(); descriptions.push(detections.descriptor); } return new faceapi.LabeledFaceDescriptors(label, descriptions); }) ); }

video.addEventListener("play", async () => { const labeledFaceDescriptors = await getLabeledFaceDescriptions(); const faceMatcher = new faceapi.FaceMatcher(labeledFaceDescriptors);

const canvas = faceapi.createCanvasFromMedia(video); document.body.append(canvas);

const displaySize = { width: video.width, height: video.height }; faceapi.matchDimensions(canvas, displaySize);

setInterval(async () => { const detections = await faceapi .detectAllFaces(video) .withFaceLandmarks() .withFaceDescriptors();

const resizedDetections = faceapi.resizeResults(detections, displaySize);

canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);

const results = resizedDetections.map((d) => {
  return faceMatcher.findBestMatch(d.descriptor);
});
results.forEach((result, i) => {
  const box = resizedDetections[i].detection.box;
  const drawBox = new faceapi.draw.DrawBox(box, {
    label: result,
  });
  drawBox.draw(canvas);
});

}, 100); });