Showing the face detection results in the browser
Now that we are able to send input images to the server, we have to show the result of the detection in the browser. In a similar way to what we showed in the Getting started with OpenCV section, we'll draw a green rectangle around the detected faces. Thus, we have to find a way to take the rectangle coordinates sent by the server and draw them in the browser:
- To do this, we'll once again use a
<canvas>element. This time, it'll be visible to the user and we'll draw the rectangles using it. The trick here is to use CSS positioning so that this element overlays the video: this way, the rectangles will be shown right on top of the video and the corresponding faces. You can see the HTML code here:
index.html
<body> <div class="container"> <h1 class="my-3">Chapter 14 – Real time face detection</h1> ...
