How to print a message on browser using javascript and HTML

Question

I am currently working on face detection on a browser. Below is the snippet for my java script code. it detect the bounding boxes when face is visible in the screen. I want to print a message on the canvas when the face is not detected by my model. In that case predictions.length will be equal to 0 here is my code ,how do I modify it for my functionality

async function draw(video,context, width, height)
{
    context.drawImage(video,0,0,width,height);
    const model = await blazeface.load();
    const returnTensors = false;
    const predictions = await model.estimateFaces(video, returnTensors);
    
    console.log(predictions);
    for (let i = 0; i < predictions.length; i++) {

    const start = predictions[i].topLeft;
    const end = predictions[i].bottomRight;
    var probability = predictions[i].probability;
    const size = [end[0] - start[0], end[1] - start[1]];
    // Render a rectangle over each detected face.
    context.beginPath();
    context.strokeStyle="green";
    context.lineWidth = "4";
    context.rect(start[0], start[1],size[0], size[1]);
    context.stroke();
    var prob = (probability[0]*100).toPrecision(5).toString();
    var text = prob+"%";
    context.fillStyle = "red";
    context.font = "13pt sans-serif";
    context.fillText(text,start[0]+5,start[1]+20);
    
    
    }
    setTimeout(draw,250,video,context,width,height);
}

here is the Git repo that I am implementing https://github.com/adarsh1021/facedetection Please don't be harsh, I'm using JS for the first time

Just create a div or h1 with the message you want to display and add style="display:none" to it. When you want to display the message, set the display property to block like this: document.getElementById("myDIV").style.display = "block"; — sagar1025
– sagar1025, Commented Dec 15, 2020 at 2:35

cam · Accepted Answer · 2020-12-15 03:30:15Z

1

Check the predictions length
If no predictions, render an error message in the canvas

...
const predictions = await model.estimateFaces(video, returnTensors);

if (predictions.length < 1) {
  context.fillText('No face detected.', 150, 20);
  context.textAlign = "center"; 
}

console.log(predictions);
for (let i = 0; i < predictions.length; i++) {
...

edited Dec 15, 2020 at 3:30

answered Dec 15, 2020 at 2:59

cam

3,7301 gold badge16 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Aayush Gupta Over a year ago

I have added the //1 in the html file, I have added the if-else just at the start of my for loop just above const start.. however that text box is not visible in the ui, what am I doing wrong?

cam Over a year ago

You want to add it before your for loop, not inside of it. The loop wont run at all if there aren't any predictions. I'll update my answer to make it clearer.

Aayush Gupta Over a year ago

Thanks a lot, it works. however, just one more help. Can I change the location of that message currently it is coming at the top left(I had given it as h1). I would want it to come in the video frame, like if there is face , show the bounding box with probability, if no face , then the message "No face detected"

cam Over a year ago

Ok, we can achieve that by writing the message into the canvas instead of an html element. I'll update my answer.

Aayush Gupta Over a year ago

Thanks a lot Man, It works, also the code was easy to understand :)

Collectives™ on Stack Overflow

How to print a message on browser using javascript and HTML

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related