OpenCV example that uses the face recognition demo Loads an image with faces on and identifices them draws little boxes around them Easy to modify for streaming content video add extra details such as the probility etc Todo ideas Extract the face images run extra cv processing edge detection etc Try see how many faces you can find create a variety of test images Do some testing on the limitations e g cartoons face deformations adding sunglasses Record timing peformance logs different image sizes number of faces style body height 600px style script src https docs opencv org master opencv js script script cv onRuntimeInitialized console log onRuntimeInitialized let faceCascadeFile haarcascade frontalface default xml let furl https notebook xbdev net var resources haarcascade frontalface default xml createFileFromUrl faceCascadeFile furl console log all loaded facetest var createFileFromUrl function path url callback let request new XMLHttpRequest request open GET url true request responseType arraybuffer request onload function ev if request readyState 4 if request status 200 let data new Uint8Array request response cv FS createDataFile path data true false false callback else console log Failed to load url status request status request send const width 512 const height 512 async function facetest let imgurl https notebook xbdev net var images faces jpg let imgr document createElement img imgr src imgurl await imgr decode let src cv imread imgr let rect new cv Rect 0 0 width height src src roi rect let src2 new cv Mat src convertTo src2 cv CV 8UC4 let src new cv Mat height width cv CV 8UC4 let dst new cv Mat height width cv CV 8UC4 let gray new cv Mat let faces new cv RectVector var classifier new cv CascadeClassifier classifier load haarcascade frontalface default xml src copyTo dst cv cvtColor dst gray cv COLOR RGBA2GRAY 0 detect faces classifier detectMultiScale gray faces 1 2 3 0 draw faces for let i 0 i faces size i let face faces get i let point1 new cv Point face x face y let point2 new cv Point face x face width face y face height cv rectangle dst point1 point2 255 0 0 255 cv imshow canvas dst let canvas document createElement canvas canvas style padding 5px canvas style display inline canvas width 100 canvas height 100 document body appendChild canvas console log done script Other enhancements projects to try Modify the xml to use the eye recongition version https github com opencv opencv blob master data haarcascades haarcascade eye xml remember you can mix these concepts draw boxes around the face and the eyes Display extra information as well as the boxes on screen such as face probabilities Other haarcascade versions body smile https github com opencv opencv tree master data haarcascades Take the concept further detect cars and pedestrians using haarcascade car xml and haarcascade fullbody xml If you re really ambitous you can create your own Haarcascade xml file e g detect fingers or chairs Be aware it s time consuming both setting up the data and processing but it s fun Here is a small tutorial example shows how to create your own xml using Python once you have the xml you can use it in opencv https pythonprogramming net haar cascade object detection python opencv tutorial Use the extraced feature information for user interaction for example using a web cam get the user s face eyes or any other information ears etc then add an avatar on screen which moves reachs based on the user move left or right the avatar turns his head eyes A lot more work but if you want to try extracting advanced features such as heart rate web cam face emotions happy sad confused and more Web cam identify the face add a blur background feature Multiple faces you can superimpose hats glasses or other fun cartoon graphics on top of the image face
classifier load haarcascade frontalface default xml src copyTo dst cv cvtColor dst gray cv COLOR RGBA2GRAY 0 detect faces classifier detectMultiScale gray faces 1 2 3 0 draw faces for let i 0 i faces size i let face faces get i let point1 new cv Point face x face y let point2 new cv Point face x face width face y face height cv rectangle dst point1 point2 255 0 0 255 cv imshow canvas dst let canvas document createElement canvas canvas style padding 5px canvas style display inline canvas width 100 canvas height 100 document body appendChild canvas console log done script Other enhancements projects to try Modify the xml to use the eye recongition version https github com opencv opencv blob master data haarcascades haarcascade eye xml remember you can mix these concepts draw boxes around the face and the eyes Display extra information as well as the boxes on screen such as face probabilities Other haarcascade versions body smile https github com opencv opencv tree master data haarcascades Take the concept further detect cars and pedestrians using haarcascade car xml and haarcascade fullbody xml If you re really ambitous you can create your own Haarcascade xml file e g detect fingers or chairs Be aware it s time consuming both setting up the data and processing but it s fun Here is a small tutorial example shows how to create your own xml using Python once you have the xml you can use it in opencv https pythonprogramming net haar cascade object detection python opencv tutorial Use the extraced feature information for user interaction for example using a web cam get the user s face eyes or any other information ears etc then add an avatar on screen which moves reachs based on the user move left or right the avatar turns his head eyes A lot more work but if you want to try extracting advanced features such as heart rate web cam face emotions happy sad confused and more Web cam identify the face add a blur background feature Multiple faces you can superimpose hats glasses or other fun cartoon graphics on top of the image face